Selection of VS Code plugins for frontend development in 2023
Tags: vscode, frontend, extensions
Published: 2023-08-15 22:58:46

By default, VS Code does not provide as much functionality as WebStorm does. However, VS Code Marketplace contains a large number of plugins that can transform VS Code into full-fledged, comfortable IDE, that is able to compete on equal terms with solutions by JetBrains.

Independent search of high quality extensions for VS Code can take a lot of time and strength, so I've decided to share with you with time-tested and battle-tested plugins that I use not the first year. At the same time, we won't ignore relatively new, but not less quality extensions that have taken their own deserved place in the list of my favorite plugins for VS Code in 2023.

## Project management

[**Project Manager**](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)

Provides a module for managing your projects, where it's easy to view them, switch between each project and also open them in one click, like in the current window, as well as in a new one.

> For correct working of the plugin you must initialize Git repositories in every project, if you want to see them in Project Manager.

![Project Manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvbtko82upp3xitiex7i.gif)

## Syntax and language support

[**EditorConfig for VS Code**](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)

Adds language support for `.editorconfig` files that are responsible for IDE settings within the current project, like indentation size, insertion of empty line at the ending of a file etc.

![EditorConfig for VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6cht648do67f945okwk.jpg)

[**DotENV**](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)

Implements syntax support for environment variables files, that are widely used in modern project setups.

![DotENV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyuploegpiwjt34arlxu.jpg)

[**SVG**](https://marketplace.visualstudio.com/items?itemName=jock.svg)

Adds language and syntax support for working with vector images in SVG format.

![SVG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crn2jpiwljjqrkblu6s7.jpg)

[**YAML**](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml)

Activates language and syntax support for YAML files that are being used for different purposes, e.g. for creating configuration files.

![YAML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhjgeo1a1y37m7oq998e.jpg)

[**CSS Modules Syntax Highlighter**](https://marketplace.visualstudio.com/items?itemName=andrewleedham.vscode-css-modules)

Implements syntax support of CSS Modules.

![CSS Modules Syntax Highlighter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szfrqdu8k8xj9cbt1osv.jpg)

## Git

[**GitLess**](https://marketplace.visualstudio.com/items?itemName=maattdd.gitless) and [**Git Graph**](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

GitLess is a fork of the once legendary GitLens, that integrates into VS Code module with all necessary tools for working with Git, but without annoying advertisement of paid features by GitKraken.

Using GitLess you can effortlessly work with commits, history of a project's files, branches, tags, stash storage, remote connections to Git servers. Besides this plugin allows you to search and compare commits easily.

In turn, Git Graph extension provides a widget with Git graph, that visualizes branch structure and their relations clear way, that makes the extension a great addition for GitLess plugin.

![GitLess and Git Graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87djuokmvthyzihiv7pt.jpg)

[**gitignore**](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore)

Adds support for `.gitignore` files and provides a huge list of ready to use `.gitignore` templates, that you can easily add in your project.

![gitignore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8khtj1zlep4u2l5a3y7.png)

## Autocompletion

[**IntelliCode**](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode) и [**IntelliCode API Usage Examples**](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.intellicode-api-usage-examples)

Implements in VS Code code autocompletion powered by AI and provides tooltip hints with references to similar in meaning code examples from GitHub as you write your code.

![IntelliCode and IntelliCode API Usage Examples](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbm63u850gw7pp8peivx.gif)

[**Path Intellisense**](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

Activates Intellisense during entering paths to files within your project and file system in common.

![Path Intellisense](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnn9mfhpgpjcr5y4yjyi.gif)

[**IntelliSense for CSS class names in HTML**](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion&ssr=false#overview)

Enhances autocompletion for CSS classes.

![IntelliSense for CSS class names in HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bb0xsn2xodmsebtcc6i.gif)

[**CSS Peek**](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)

Adds tooltip hints after hovering on a CSS class in VS Code, provides jumping to classes definition by pressing `Ctrl` + `Left Click`.

![CSS Peek](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sn4alt4bi18rkpw3d369.gif)

[**CSS Modules**](https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules)

Activates autocompletion for code related with CSS modules. Besides this plugin implements convenient jumping to CSS selectors definitions on pressing `Ctrl` + `Left Click`.

![CSS Modules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rt88np59dszur2lwj6ch.gif)

[**SCSS IntelliSense**](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss)

Provides Intellisense feature for Sass variables, mixins and functions over all files in your workspace.

![SCSS IntelliSense](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84ojl8xy6s390e6ld8rc.gif)

## Linting

[**ESLint**](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

Adds support for [ESLint](https://eslint.org/) linter, which is widely used among developers and de-facto is standard among linters for JS / TS.

![ESLint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oeprr1bvnhzk4w2fhgrg.gif)

[**Stylelint**](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)

Provides support for [Stylelint](https://stylelint.io/) linter, which is being used for CSS rules processing. The plugin works in a similar way to ESLint, except the fact that Stylelint processes only stylesheets.

![Stylelint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zscv9hsbyr1jtsqrswrq.gif)

[**Prettier**](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Embeds in the editor [Prettier](https://prettier.io/) linter. After installation this plugin will be automatically formatting your code into a uniform form on each file saving. Prettier might be adjusted really well and it works in combination with the above [ESLint](https://eslint.org/) and [Stylelint](https://stylelint.io/) llinters.

![Prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxdd24ufkrxznjfqo168.gif)

## Hotkeys

[**htmltagwrap**](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap)

Adds `Alt` + `W` hotkey that triggers wrapping of a selected markup fragment in one HTML tag.

> Despite the fact that the latest versions of VS Code can do the same, I still prefer this plugin, because it copes with the task sleeker and more elegant way.

![htmltagwrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmhfbeq1pu823rilc06k.gif)

[**Toggle Quotes**](https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes)

Allows instant switching between different kinds of quotes in string values by pressing `Ctrl` + `'`.

![Toggle Quotes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ok87rb5nqbktfktw203f.gif)

[**Turbo Console Log**](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)

Instantly generates on the next line a selected code fragment, wrapped into `console.log()`, after pressing `Ctrl` + `Alt` + `L`.

![Turbo Console Log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcpsaru5h5wzpogd74sg.gif)

## Snippets

[**ES7+ React/Redux/React-Native snippets**](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

Adds snippets for all occasions. Part of them will be definitely useful for development on JS / TS, React, Redux and React Native.

![ES7+ React, Redux, React Native snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pk38l9votzam4gsbrntz.gif)

[**Snippet**](https://marketplace.visualstudio.com/items?itemName=devonray.snippet)

Adds in VS Code a module for creating your own snippets that you can use during writing your code.

![Snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05m6ckw40xebb22gclik.gif)

## Appearance

[**Darcula Solid**](https://marketplace.visualstudio.com/items?itemName=jussiemion.darcula-solid) и [**Fluent Icons**](https://marketplace.visualstudio.com/items?itemName=miguelsolorio.fluent-icons)

Darcula Solid is a dark design theme for IDE that is made in grey and orange tones. Theme design is based on the eponymous theme for WebStorm, but in doing so provides a set of its own enhancements and adaptations, bringing a more pleasant development experience.

What about icons set, I can recommend the Fluent Icons pack, that fits well in VS Code UI.

![Darcula Solid and Fluent Icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fgtjghx1lgyab52ihvz.jpg)

## Visualization

[**indent-rainbow**](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

Highlights each indentation level in your code, which makes source code reading much more easier. It's possible to define your own color scheme if it's needed.

![indent-rainbow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo88kqfqaq29cp438krg.jpg)

[**Error Lens**](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

Adds in the code editor obvious highlighting of syntax errors and visually indicates warnings, making debugging much more comfortable.

![Error Lens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ujwfgq1bvcqin3p3o7f.jpg)

[**Color Highlight**](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

Provides highlighting of color codes in VS Code. For instance, `#ff0000` will be highlighted with red color, and `rgba(81, 21, 177)` will be indicated with violet. This significantly simplifies perception of code with color codes, that is especially useful for working with styles.

![Color highlight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzqw3qtmjfrtjwvsszpj.jpg)

[**Better Comments**](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

Highlights comments (e.g. `TODO`, `FIXME`) using flashy colors. The plugin could be adjusted for yourself by adding your own comment types and color scheme.

![Better Comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9bwfcan32isvyeuehbu.jpg)

## Node, NPM

[**Search node_modules**](https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules)

Implements in VS Code functionality of searching files within `node_modules` directory in your project.

![Search node_modules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2vl666wxcnduikaqyqaw.gif)

[**npm Intellisense**](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)

Adds autocompletion mechanism for imports of JS / JS modules.

![npm Intellisense](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uptqlefehtdwj561tj65.gif)

## Design

[**Figma for VS Code**](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)

Allows you to open Figma design mockups right into VS Code and extract necessary information from them for UI development, without necessity to leave your IDE.

![Figma for VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bzure2x6k7n4uwdl2l8t.jpg)

## Spell checking

[**Code Spell Checker**](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

Automatically checks orthography, thereby allowing to avoid mistakes that easily escape attention, like wrong naming of variables, functions and other entities in your code.

![Code Spell Checker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0m436qv01fzeu8v3y8na.jpg)

## Screenshots

[**CodeSnap**](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)

Plugin that allows making stunning screenshots of selected code, with syntax highlighting and your IDE design theme.

![CodeSnap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mu8qq80ok6v3w97ivir6.gif)

## Automatical code processing

[**empty-indent**](https://marketplace.visualstudio.com/items?itemName=DmitryDorofeev.empty-indent)

Automatically removes redundant indents in empty lines during saving the current file.

![empty-indent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj3kbmd95ehawnhovsrc.gif)

## Bonus: additional IDE settings

Default behavior of plugins doesn't always meet expectations and demands of a developer. Fortunately, the majority of extensions allow settings overwriting, that could be done in `settings.json`.

Code listing below contains my settings for the above plugins. Also the listing includes some settings for VS Code itself that will provide you additional level of comfort.

You can insert these settings into your `settings.json` as it is, either extract part of them into your config, depending on your demands.

```json
{
  "better-comments.tags": [
    {
      "backgroundColor": "transparent",
      "bold": false,
      "color": "#FF2D00",
      "italic": false,
      "strikethrough": false,
      "tag": "!",
      "underline": false
    },
    {
      "backgroundColor": "transparent",
      "bold": false,
      "color": "#3498DB",
      "italic": false,
      "strikethrough": false,
      "tag": "?",
      "underline": false
    },
    {
      "backgroundColor": "transparent",
      "bold": false,
      "color": "#474747",
      "italic": false,
      "strikethrough": true,
      "tag": "//",
      "underline": false
    },
    {
      "backgroundColor": "transparent",
      "bold": false,
      "color": "#FF8C00",
      "italic": false,
      "strikethrough": false,
      "tag": "todo",
      "underline": false
    },
    {
      "backgroundColor": "transparent",
      "bold": false,
      "color": "#98C379",
      "italic": false,
      "strikethrough": false,
      "tag": "*",
      "underline": false
    }
  ],
  "codesnap.backgroundColor": "",
  "codesnap.boxShadow": "",
  "codesnap.containerPadding": "0",
  "codesnap.showWindowControls": false,
  "codesnap.shutterAction": "save",
  "codesnap.transparentBackground": true,
  "cSpell.userWords": [
    "codesnap",
    "datasets",
    "devtool",
    "flexbox",
    "flexbugs",
    "minmax",
    "mobx",
    "noopener",
    "noreferrer",
    "outro",
    "rgba",
    "sourcemap",
    "stylelint",
    "teamcity",
    "testid",
    "uglifyjs",
    "uikit"
  ],
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  "editor.renameOnType": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "javascriptreact",
    "vue-html": "html"
  },
  "errorLens.fontWeight": "500",
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html"
  ],
  "files.trimTrailingWhitespace": true,
  "gitlens.currentLine.enabled": true,
  "gitlens.hovers.currentLine.over": "line",
  "gitlens.views.commits.files.layout": "list",
  "gitlens.views.stashes.files.layout": "list",
  "html-css-class-completion.enableEmmetSupport": true,
  "htmltagwrap.autoDeselectClosingTag": true,
  "htmltagwrap.tag": "p",
  "indentRainbow.colors": [
    "#833ab414",
    "#fd1d1d14",
    "#fcb04514"
  ],
  "indentRainbow.ignoreLinePatterns": [
    "/[ \t]/g"
  ],
  "javascript.suggest.autoImports": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "prettier.tabWidth": 2,
  "projectManager.git.ignoredFolders": [
    ".haxelib",
    "archived",
    "node_modules",
    "out",
    "test",
    "typings"
  ],
  "stylelint.snippet": [
    "css",
    "less",
    "postcss",
    "scss"
  ],
  "stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss"
  ],
  "svg.preview.autoShow": false,
  "svg.preview.mode": "svg",
  "turboConsoleLog.addSemicolonInTheEnd": true,
  "turboConsoleLog.delimiterInsideMessage": "->",
  "turboConsoleLog.includeFileNameAndLineNum": false,
  "turboConsoleLog.insertEnclosingFunction": false,
  "turboConsoleLog.logMessagePrefix": ">>>",
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always"
}
```