Visual Studio Code is a development environment from Microsoft, created recently with the use of new technologies (e.g. Node.js). Unlike the full Visual Studio package, this environment is a text editor with the ability to connect a huge number of plugins. It is designed to develop in different programming languages and for different platforms. It supports not only Windows but also Linux and MacOS.
By default, the environment is just a very advanced text editor. Therefore, to complete the work it will configure. In this article I will explain how to use Visual Studio Code and how to set up a complete environment for web development. Or to be more precise – for beach development. Talk about appearance, Russification and, of course, useful extensions.
- How to use Visual Studio Code
- 1. The Visual Studio Interface Code
- 2. Russification Visual Studio Code
- 3. Appearance
- 4. Project management
- 5. Auto-formatting of code
- 6. Autocompletion
- 7. Management Vim
- 8. Debug code
- 9. Terminal
- 10. Using Git
How to use Visual Studio Code
Unlike previous articles on the subject, I’m not going to tell you about the installation. This is a full-fledged article, so look there. Program easily is from the official website or from the snap package in any distro based on Debian or RedHat. First stop on the program interface. And will be considered the work of the Visual Studio Code for beginners. If you are already an experienced developer, it’s unlikely that you will find for yourself something new.
1. The Visual Studio Interface Code
The program’s interface is typical of many code editors. But there are its own peculiarities. Conventionally, the main program window can be divided into seven parts:
These are the areas you will use while working with VS Code:
2. Russification Visual Studio Code
The default environment is set to English language. It’s better to keep it that way: most of the information on programming on the Internet in English, and if you get used to this format, it will be easier to navigate. But if you’re interested in how to localize the Visual Studio Code, then it becomes very easy. On the sidebar, click the icon with the squares, which is responsible for the installation of add-ons, and type in the search box vscode-language-pack-EN; the utility will find only one package, click Installto install it:
To select the language, press Ctrl+Shift+P and start typing Configin the list, select Configure Display Language:
Then select EN and then restart the program. All. After that, the program interface will be Russian.
One of the important things for a development environment – its appearance and theme. To change the theme, just press the combination Ctrl+Shift+P and dial Theme. Then in the menu you should choose the Color Theme:
Then in the menu left to select the theme you want the arrows and press Enter. By default, there are several dark and light themes:
Download new themes from the official site of Visual Studio Code. You can also customize the theme icons.
4. Project management
Very often it happens that we have to switch between multiple projects while working. By default in VS Code to do this, open the project folder via the menu. But there is a way. This extension Project Manager. With it, you can save the project and switch between them in one click. Install Project Manager as described above, then click on the sidebar icon with the folder.
Here you can see the list of available projects. To bookmark the current folder as a draft, click on the icon with a diskette and enter the name of the project:
After that you can easily manage your projects.
5. Auto-formatting of code
One of the most important moments in working with the code is its monotony. Allow the code to one species manually is not always convenient – it was invented different extensions. It’s PHP-CS-Fixer for PHP, and Prettier to JS/HTML/CSS. Install them using the setup menu additions, and then use the keyboard shortcut Ctrl+Shift+F in Windows or Ctrl+Shift+I on Linux, in order to align the code to Visual Studio Code.
Greatly helps in the development of automatic code completion. You write the beginning of the word, and the environment itself tells you than you can end it. Packages that allow you to perform autocompletion, called *-intellisense. It is recommended to install the PHP Intellisense, CSS Intellisense and Path Intellisense for auto-completion of file paths. Different frameworks have their own extension, automatic code completion, for example, for Laravel is Laravel Extra Intellisense. Syntax highlighting usually built in the VS Code for many languages, but if not, also look for extension.
7. Management Vim
I am used to Vim editor and want to use his style everywhere, even in the Visual Studio Code. If you also want, for us is an extension of Vim, which transfers all the key combinations and modes of operation of Vim in the Visual Studio editor. After installing it, you can move a file by buttons h, j, k, l, use Esc and save the file with the command :w.
8. Debug code
In Visual Code is the interface by which debugging code, but before you can use it for PHP, it will have to adjust. For debugging PHP code is used Xdebug, so you need to install the add-on PHP Debug. Then click on the triangle icon of the bug on the side panel. If you haven’t debugged in this project, the program will prompt you to create a file launch.json. Click on this link. In the opened list select PHP:
The resulting file is necessary to pay attention only on the port. It needs to be the same as the value of the variable xdebug.remote_port in php.ini. I have this 9008. Save the changes and click the green triangle to start debugging.
The program will ask the path to the folder with the project files. If it is a local computer, then the problems should arise. Then you need to choose a stopping point. These points are placed in the leftmost part of the editor area in front of the line where you want stop:
The last step: it is necessary to open the debugged the page in the browser, but for Chrome you need to use Xdebug Helper, which includes a required flag and tells Xdebug that this code is necessary to debug. To do this, select the Debug mode in the expansion:
Then Xdebug connects to the VS Code for the chosen port and sends back all the necessary information. Only then you will be able to watch variables and step through the code:
In conclusion, let’s talk about something more simple. One of the advantages of Code VS over other editors is the built-in terminal that allows you to execute commands in the Linux shell or in the selected Windows shell. If the terminal is not already open, you can do this with Ctrl+Shift+P or from the menu Terminal -> Create terminal:
10. Using Git
Another very useful feature in Visual Studio Code is integration with Git. It works by default, and you do not even need to install anything extra. Just enough to in the directory with the project was already initialized a Git repository. All new or changed files are highlighted in Explorer.
In addition, you can make fixation of the changes (commits) to push changes to the server directly in the GUI. First, you need to add files to commit: click on the branching icon on the sidebar. Here you can see all changed files. Click the + next to the file you want to add:
In order to commit the changes, type an explanation of komito in a text string, then press Ctrl+Enter or the checkbox above the text field:
Now we have to send changes to the repository, use the button in the status bar with the refresh icon. See on the previous picture.
In this article, we covered how to use Visual Studio Code for programming in PHP and other programming languages designed for web development. As you can see, this environment is a lot better by default than the same Atom that have to be there, here is already out of the box. And what kind of development environment do you use? Write in the comments!