Immediately Eliminate 50% of Code Misery as a Software Engineer | VS Code Tutorial for Beginners
As a web developer or software engineer you are already a smart person. You just have to be conscious about tools you use and how you use them. You probably sit in front of computer for more than 9 hours per day - doing tedious, repetitive tasks all the time. Here is a tip for you to make your life easier. This is VS Code tutorial for beginners.
Use a good code editor and make best use of it. Look at how can you improve, automate and accelerate whatever you do using it by putting in little effort. Use 'Visual Studio Code'. 'Visual Studio Code' can do a lot for you in background. It can automate tasks. It can add cross browser and cross platform compatibility in code that you write. It can help you collaborate with other colleagues in real time. It has got amazing visual enhancements in shape of themes, icons and more. It has extensions that help you in each aspect of coding experience.
I will show you briefly how small things can be taken care of by using Visual Studio Code easily. I will go with the CSS first. As I save this SCSS file, It gives me it's CSS output and minified version of CSS by using extension 'Live SASS Compiler'. It gives me cross browser compatible code by using CSS prefixes automatically. Again 'Live SASS Compiler' extension does that in background. If you see generated CSS code you will see some extra CSS code. This is implemented by that extension so that webpage styling may remain consistent across different web browsers. I don't have to take care of it manually.
It helps me write clean code. If I mistakenly use empty CSS rules or use wrong syntax, it warns me and points me at the line where error exists. Look for warning icon and cross icon at the bottom left of VSCode. Click that. It is displaying where did I do mistake in this document. Click at the warning or error message. It will highlight the line with error. Fix error and error message will go away.
It has got built-in terminal. If I work with NodeJS or ReactJS, I can type commands and run in this directory or for currently opened file, right from my code editor instead of opening separate terminal window provided by operating system. You can watch files that can be watched and see output right from code editor. Right now SCSS file is being watched and it's showing me exactly that. It's got this outline panel that can help me navigate to any area of currently opened document with ease. While working with JavaScript, this panel plays even more important role.
Code recognition and Syntax Highlighting is another important feature. When I write code in VSCode, code editor recognizes it. See 'Language Selection Mode'. You can manually switch language or technology from here to help code editor recognize your code. Once it recognizes it, it will apply proper syntax highlighting.
Find all and replace is a feature that you already know. Press CTRL + F to find anything in document and you can specify alternative to replace it with. Very useful feature. Search feature is very helpful. Right click at any folder, type anything that you want to search in all files in that folder.And it will find the files and location of that term in actual file. You can search class name, or JavaScript function name by using this.
You can create your custom code snippets and call these by using their name in any file. These are like templates that you use repeatedly. It saves a lot of time. It has got custom settings for user. You can define rules for extensions and code editor itself from here. While working with JavaScript or any other language, it can recognize errors and warnings. It will show you red squiggly lines underneath code that is wrong for some reason. Hover over that issue. It will suggest what is expected there. And at the bottom it shows that warning or error message too.
Then it's got extensions. Does not matter what you are doing in Visual Studio Code, it has got a relevant extension for that.There are free extensions for Python, JavaScript, CSS, Django, C++, minification, syntax highlighting, JSON, PHP, HTML, VueJS, ReactJS, Angular, WordPress, Docker, Svelte and more. Make sure you search relevant extension for your tech stack and you will find useful visual studio code extensions to help you code easily.
You just can not beat visual studio code in this feature. Extensions are powerful tools that make you work faster and accurately. So, know your tools and learn all the best features it offers to make you more productive in less time. By using 'Visual Studio Code', and learning how to make best use of it, you can become more productive, efficient and you will write clean code.
Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: / webstylepress
Website: https://www.webstylepress.com
FaceBook: / webstylepress
Twitter: / webstylepress
#tutorials #webstylepress #webdevelopment #vscode #coder #code #codeeditor #tips
Смотрите видео Immediately Eliminate 50% of Code Misery as a Software Engineer | VS Code Tutorial for Beginners онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь WebStylePress 19 Июнь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 97 раз и оно понравилось 7 людям.