My VS Code extensions of choice for a supercharged code editor!
If you are a web developer you would have mostly given Visual Studio Code a shot and might be using it as your editor of choice. The extensive support for extensions gives a lot of power to the users to customize the editor to their liking. As I use it as my daily code editor of choice and primarily a web developer myself, working with Angular and React, I will be sharing a few extensions that help ease my coding and related activities.
Code formatting
These are a few extensions that help in speeding up development while being able to assess code quality and help fix them at the same time.
Babel Javascript: This is a plugin that enables syntax highlighting for ES 201x, along with JSX and GraphQL. Pretty essential for JS coding in my opinion.
ES Lint and Sonar Lint: ES Lint plugin allows you to enforce linting rules in your code and picks up the rules from the eslintrc file in the directory.
Sonar lint is another extension that allows you to view code quality issues inline and get suggestions to fix them while coding. It allows you to configure it using standard pre-defined rules for a language or framework or connect to your SonarQube server to sync the rules from there.
Bracket Pair Colorizer 2: This is a simple extension that adds the same colors to bracket pairs in the code and a line enclosing the pair to highlight the code block inside the bracket pair. Extremely helpful when you are trying to find that one missing closing bracket!
Prettier: This extension formats code automatically and supports configuration from a prettier config file in the codebase. Very useful to maintain similar formatting across all developers in a team.
Angular 8 code snippets and language services: These extensions work very well in harmony to provide support for automated Angular code snippets generation, navigation from templates to code definitions, etc.
Jest snippets: This extension allows easy code snippets generation for unit tests written in a format similar to the Jest framework unit tests.
Intellisense for CSS class-names: This extension caches the CSS classes in a project and shows CSS class names auto-complete options in HTML files.
npm IntelliSense: This simple extension provides autocomplete suggestions for npm module import statements.
Utilities
These are extensions that help me to perform most of my tasks associated with my daily development activities, without having to leave the editor.
Quokka.js: This plugin provides a JS scratchpad inside the editor for some quick coding and debugging code snippets as independent JS code.
GitLens: This extension allows quick git blame on any line and see line-wise or file-wise git history in a very convenient GUI on the sidebar along with supporting a host of other git related features.
Import Cost: This extension shows the imported JS package’s size alongside the import statement. Extremely useful when trying to keep an eye out for the performance impacts of using packages.
Jira and Bitbucket: This is the official extension provided for Bitbucket and JIRA integration in VS Code. This is useful if you use JIRA or Bitbucket in your projects and want to quickly read JIRA tickets, monitor Bitbucket pipelines, etc. without ever leaving the editor.
VS Code Spotify: I am one of those devs who listen to music while coding and Spotify is my service of choice. This extension provides some nifty features to control music playback inside the editor, view playlists and tracks, etc.
I would love to hear your thoughts on my selection of extensions and your preferred extensions in the comments!
