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
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
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.
Implements syntax support for environment variables files, that are widely used in modern project setups.
Adds language and syntax support for working with vector images in SVG format.
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 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.
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.
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.
Adds tooltip hints after hovering on a CSS class in VS Code, provides jumping to classes definition by pressing Ctrl + Left Click.
Activates autocompletion for code related with CSS modules. Besides this plugin implements convenient jumping to CSS selectors definitions on pressing Ctrl + Left Click.
Provides Intellisense feature for Sass variables, mixins and functions over all files in your workspace.
Linting
Adds support for ESLint linter, which is widely used among developers and de-facto is standard among linters for JS / TS.
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.
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
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.
Allows instant switching between different kinds of quotes in string values by pressing Ctrl + '.
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.
Adds in VS Code a module for creating your own snippets that you can use during writing your code.
Appearance
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
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.
Adds in the code editor obvious highlighting of syntax errors and visually indicates warnings, making debugging much more comfortable.
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.
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
Implements in VS Code functionality of searching files within node_modules directory in your project.
Adds autocompletion mechanism for imports of JS / JS modules.
Design
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
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
Plugin that allows making stunning screenshots of selected code, with syntax highlighting and your IDE design theme.
Automatical code processing
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"
}
Top comments (0)