My recommendations to configure Visual Studio Code for Angular Development

profile
Tim Deschryver
timdeschryver.dev

As developers, we spend a lot of time in our editor, so it's important to configure it to our liking. Setting up your editor correctly is an important step to improve your development workflow.

Throughout the years I've learned some tips and tricks to enhance my Visual Studio Code (VSCode) setup. In this article, I'll show you how to configure VSCode to optimize (imho) specifically for your Angular development process.

Extensions link

What makes VSCode so powerful is its extensibility. There are thousands of extensions available in the marketplace that can help to optimize your development workflow. Here are some recommended extensions for Angular development.

To install an extension, open the Extensions view by pressing Ctrl+Shift+X or ⇧⌘X, or click the extension icon in the sidebar. Then, search for the extension by name and click the install button.

Angular Language Service link

The Angular Language Service is the most important extension because it provides a rich editing experience for Angular templates. As result, the HTML template gets to know the Angular and TypeScript context of the component. This helps to drastically improve the development experience by reducing the feedback loop.

Marketplace

ESLint link

ESLint is a static code analysis tool for identifying problematic patterns found in code. This extension provides a quick feedback loop to help you write code that adheres to your team's coding standards. The ESLint extension also works with Typescript ESLint and Angular ESLint, the recommended linter for Angular projects. The result is a consistent linting experience across your entire project, including your TypeScript and HTML files.

Marketplace

To integrate ESLint with Angular, I refer you to the Angular ESLint project.

Prettier link

Many teams use Prettier to enforce a consistent code style. Install this extension to format your code using the Prettier code formatter. Within the next section, I'll show you how to configure VSCode to format your code automatically when a file is saved.

Marketplace

Auto Rename Tag link

This extension automatically renames paired HTML tags when you rename one of them. For me, this extension is a real time-saver.

Marketplace

Nx Console link

A no-brainer if you are using Nx to manage your Angular workspace. Use this extension to get a useful overview of the workspace, with the ability to run commands and scripts. Directly from within VSCode.

Marketplace

Pretty TypeScript Errors link

Make TypeScript errors prettier and human-readable with this extension. TypeScript errors are better formatted, include syntax highlighting, and include links to the documentation for more information, making it easier to read, understand, and fix the error.

Marketplace

Angular-switcher link

This extension provides a quick way to navigate between the different files that make up an Angular component, *.ts, *.html, and *.scss files.

Marketplace

Note

You can also take a look at the Angular Extension Pack, created by Loiane Groner. This package includes multiple extensions that are useful for Angular development. Most of them are already included in the list above.

Settings link

Set the following settings to improve your development experience. These settings are on a user level, for every project (or file) you open in VSCode.

To access the settings, open the Command Panel by pressing Ctrl+Shift+P or ⇧⌘P to open the settings UI. Search (using the search bar at the top) for the following settings and set them to the recommended values.

To set settings for specific languages, you can use the language identifier. For example, to set the formatter specifically for TypeScript files, prefix the search term with @lang:typescript.

You can also edit the settings via the settings file. Press Ctrl + P or Cmd + P to open the settings file.

Enforce the setup across the team link

Not every team member will be motivated or aware to properly configure their editor. To enforce the setup across the team, you can use workspace settings. This benefits the whole team, helping everyone to work more efficiently.

Start by adding the .vscode\extensions.json file to your workspace to prompt developers to install the recommended extensions. For more information, see Workspace recommendations extensions.

As an example, here's how you can configure the workspace to recommend the extensions mentioned above.

To apply the use of certain settings, add the .vscode\settings.json file to your workspace. In the file, you can add the same configuration as the user settings, but with the added benefit that these settings are applied to all developers working on the project.

Note that not all settings can be included (for security reasons), and keep in mind that these settings override the user settings.

Learn how to work with Visual Studio Code link

I can't emphasize enough how important it is to learn the ins and outs of your editor. From my experience, I can acknowledge that investing time in learning your editor will pay off in the long run. Once you master your IDE, tasks that otherwise take some minutes (and frustration) will become easy and fast.

An important part of this is learning keyboard shortcuts to quickly navigate and perform actions in the editor. This also includes your mouse to perform multi-cursor actions, for example, a multi-cursor selection.

This will come over time, but the following cheat sheets can help you get started.

Some of my favorite shortcuts, besides the obvious ones, are the following:

Also, make sure to learn how to use the refactoring tools (e.g. quick actions) with Ctrl+. to quickly restructure code. Other shortcuts that are worthy of mentioning while editing code:

Conclusion link

In this article, I showed you how to configure Visual Studio Code for optimal (imho) Angular development. By installing the recommended extensions and tweaking a few settings you can enhance your workflow, making it more efficient and enjoyable. I find this important because we spend a lot of time in our editor(s), so it's in your best interest to make it as comfortable as possible.

Tip

After publishing this article, Aristeidis Bampakos pointed out that there's also an official Angular Profile maintained by the VSCode team. The profile includes a set of recommended extensions and settings for Angular development. Make sure to check it out as well as it includes some additional recommendations, which are not particularly bound to Angular development.

Feel free to update this blog post on GitHub, thanks in advance!

Join My Newsletter (WIP)

Join my weekly newsletter to receive my latest blog posts and bits, directly in your inbox.

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.

Buy Me a Coffee at ko-fi.com PayPal logo

Share this post

Twitter LinkedIn