Hello to everyone who is interested in web development! Choosing an editor for a developer and setting it up is a very important stage in the development process. In this article, which is called ‘How To Set Up Visual Studio Code For Node / Angular Development’, we’ll look at what Visual Studio Code is, how to install and configure it for front-end development. I say right away that, due to the specialty, the described functionality will be presented under the prism of frontend development, although most of the settings are of a general nature. Let’s start from the beginning!
Visual Studio Code, or basically VS Code, is a free, well known and add-on text editor fundamentally designed for developing and debugging advanced web and cloud applications. It was created by Microsoft and is accessible for Windows, MacOS and Linux operating systems. This program is distributed free of charge, its source code is available on GitHub. VS Code supports a wide variety of programming languages, including a debugger, Git tools, language syntax highlighting, IntelliSense autocomplete, refactoring tools, a terminal, and more. VS Code is quite adaptable and extensible with plugins available on the Visual Studio Marketplace. You can open the board with extensions within the program using the key combination Ctrl + Shift + X. The main advantage of VS Code is that it is fast, like code editors (faster can be only Sublime), but at the same time functional, like a full-fledged IDE. Many developers do not use IDEs because they are heavy and heavily loaded in terms of the interface. This is contrary to all the ideas about front-end work. VS Code is simple in appearance, similar to a customized Sublime, but at the same time at a different level of functionality, specially tailored for the front-end and constantly evolving (developers roll out an update with new features every month) – what more could you ask for?
I suggest starting with a general VS Code setting, the settings of which can be used to work with Node.js. To install VS Code on your computer, you need to go to code.visualstudio.com. After that, on the page, select your operating system and click on the “Downloads” icon. After downloading the program, install it on your computer. Visual Studio Code has a huge number of different plugins besides language packs. They are intended to expand the functionality of this editor. All plugins for this editor are hosted on the Marketplace VS Code. VS Code contains a large number of settings with which you can customize this editor for yourself and, accordingly, to work with Node.js. Changing settings in VS Code is done in the appropriate window. You can open it in several ways: through the key combination Ctrl +; via the menu item ‘File -> Settings -> Settings’; click on the gear icon and select the ‘Settings’ item in the menu that opens. You can change the settings both globally and specifically for the current project. Changing global settings is carried out in the ‘Parameters’ window on the ‘User’ tab. These settings are saved to the ‘settings.json’ file. You can open it by clicking on the ‘Open Parameters (JSON)’ icon. Saving settings for the working directory is performed in a special file ‘settings.json’, which will be added to the ‘.vscode’ folder. Setting parameters for the working directory (project) can also be done simply by editing this file. Now let’s move on to the settings for working with Node.js. To get started, set up themes for different purposes as you develop your project. For example, Material-Icon-Theme is good for file icons, and fairyFloss is the most used theme because many people like purple backgrounds. Then you need to add a few configuration settings, namely Tab size two spaces, enable Emmet for HTML and JavaScript, file formatting when saving and pasting snippets from other sources, and enable word wrap. The next step is to make this editor work like magic with well-supported and free extensions. Some of them are: Bracket Pair Colorizer, ESLint, GitHub pull requests, GraphQL, Import Cost and others. That’s all, these are the steps you should follow while setting up VS Code for Node.js.
What about the work of VS Code and Angular development? The native environment for Angular applications is the Visual Studio Code editor. The most common browser today is Google Chrome, so this is exactly the bundle (VS Code + Chrome). To debug Angular code, you need to install the debugger extension for Chrome. Open Extensions (Ctrl + Shift + X) and type ‘chrome’ in the search bar, you will see several Chrome related extensions. Click the Install button next to the Debugger for Chrome extension. The button will change to Installation in progress, and after the installation is complete, it will change to Restart. Click Restart to restart VS Code and activate the extension. First, you need to set up a debugger for the VS Code environment itself. To do this, go to the Debug view (Ctrl + Shift + D) and click the Gear button to create the launch.json debugger configuration file. Select Chrome from the Select Environment drop-down menu. This will create a launch.json file in the .vscode folder of your project, which includes the configuration for launching the website. The only thing to do with this file is to change the port from 8080 to 4200.
Conclusion
As you understood from the article ‘How To Set Up Visual Studio Code For Node / Angular Development’, VS Code is a very functional editor that is in great demand among developers. Moreover, Angular accepts this editor as a native environment. I hope that you received an answer to the question about the installation and configuration of the VS code to work with your development projects. Thanks for reading!
You must be logged in to post a comment.