After more than one year using Visual Studio Code to work in the majority of my web application projects. This post will show some tips to get the best of this awesome editor as a complete and integrated development tool.
Main Features
First of all, Visual Studio Code has a lot of features.
- Free and open source: The project is hosted on GitHub and it’s free to download, fork, modify and contribute to the project.
- Multi-platform: You can download binaries for different platforms, included Windows (x64), MacOS and Linux (.rpm and .deb packages)
- LightWeight: It runs smoothly in different devices. It has an average memory and CPU usage. Starts almost immediately and it’s very stable.
- Extended language support: Supports by default the majority of the most used languages and syntax like Javascript, HTML, C#, Swift, Java, PHP, Python and others. Also, VS Code supports different file types associated to projects like .ini, .properties, XML and JSON files.
- Integrated tools: Includes an integrated terminal, debugger, problem list and console output inspector. The project navigator sidebar is simple and powerful: you can manage your files and folders with ease. The command palette helps you find commands by text. The search widget has a powerful auto-complete feature to search and find your files.
- Extensible and configurable: There are many extensions available for every language supported, including syntax highlighters, IntelliSense and code completion, and debuggers. There are also extension to manage application configuration and architecture like Docker and Jenkins.
- Integrated with Git: You can visually manage your project repositories, pull, commit and push your changes, and easy conflict resolution. For SVN users, there is a plugin to add support to SVN repositories as well.
Using Visual Studio Code for Web development
You can use Visual studio code for different development projects. For web development, also, you can find in Visual Studio a powerful tool to improve your efficiency and saving a lot of time and efforts for different tasks. Certainly, if you have previous experience with editors like Sublime or Atom, some commands and shortcuts will be very familiar. These are some of the first steps to follow to get a better experience.
Installation and initial Setup
After downloading the application binary, you can do some initial improvements to your editor for the first time:
- Change font size: Use your preferred font size changing zoom as in your browser (
Ctrl +/-
orCommand +/-
in Mac) - Other basic configurations: Change tab size, and word-wrap in the main settings page (
Ctrl ,
orCommand ,
in Mac) at your choice. - Install some essential extensions: Check the most popular extensions and install the most useful for you. Based on the type of project you may want to install some of these extensions:
- Javascript: ESLInt and TSLint to check Javascript syntax, Npm suppport, Vue and React Snippets, Debugger for Chrome
- HTML: HTML Snippets and CSS autocomplete support.
- PHP: PHP IntelliSense, PHP Debug, phpcs (Syntax check), Twig for templates, Laravel extension pack (Snippets, Blade templates, artisan commands)
- Python: Python (syntax, debugging), Dyango, Jinga
- Java: Maven for Java, Debugger, Test Runner (JUnit)
Working with projects
- Open your projects using the base project folder.
- You will get instant access to all files using the search command palette (
Ctrl p
orCommand p
in Mac). Then, you can type a part of the file name and get quick access to all matches - You can configure some project-related configurations like special tab spacing configuration or end of lines. Internally, these configurations will be stored inside your project folder in a
.vscode/
hidden folder
- You will get instant access to all files using the search command palette (
- Check the “Problems” tab (View/problems) frequently to view and fix some basic problems detected in syntax or content.
- Use the Source Control sidebar to perform Git operations like stage, commit and push changes.
Use IntelliSense in your code
Visual Studio will help you to auto-complete code based on the current syntax/language detected. Simply press Ctrl Space
or Command Space
in Mac to get a list of possibilities for auto-complete your code. Even more, if you install some intellisense extensions for specific languages, you will get more detailed help and documentation about commands, functions and properties.
Run your code from Visual Studio Code
You can install the extension Code Runner to run a variety of programs in different languages. Some of them require a previously installed runtime like in Java, C or PHP. Then you need to configure the binary paths for each runtime
Integrating other development tools
Then, you can integrate additional development tools to work with your projects. For example, working with docker and containers, you can install the Docker and Docker Explorer extension to help with the container syntax and to get a view of the status of containers.