Selection of VS Code / Cursor plugins for frontend development in 2023

jussiemion — Tue, 15 Aug 2023 22:58:46 +0000

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

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.

Syntax and language support

EditorConfig for VS Code

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.

DotENV

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

SVG

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

YAML

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

CSS Modules Syntax Highlighter

Implements syntax support of CSS Modules.

Git

GitLess and 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.

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.

Autocompletion

IntelliCode и 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.

Path Intellisense

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

IntelliSense for CSS class names in HTML

Enhances autocompletion for CSS classes.

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 Modules

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

SCSS IntelliSense

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

Linting

ESLint

Adds support for ESLint linter, which is widely used among developers and de-facto is standard among linters for JS / TS.

Stylelint

Provides support for Stylelint 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.

Prettier

Embeds in the editor Prettier 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 and Stylelint llinters.

Hotkeys

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.

Toggle Quotes

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

Turbo Console Log

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

Snippets

ES7+ React/Redux/React-Native snippets

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

Snippet

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

Appearance

Darcula Solid и 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.

Visualization

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.

Error Lens

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

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.

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.

Node, NPM

Search node_modules

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

npm Intellisense

Adds autocompletion mechanism for imports of JS / JS modules.

Design

Figma for VS Code

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.

Spell checking

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.

Screenshots

CodeSnap

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

Automatical code processing

empty-indent

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

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.

{
  "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"
}

DEV Community: jussiemion