Superb VSCode extensions changing your coding life
Tags: tooling, productivity, vscode, javascript
Published: 2021-12-05 07:27:52

In this article, I will share my most used extensions in the VSCode editor. Honestly, searching for the extensions might not be funny and take so much time to find out. Here is the pack of the most wanted extension for you. It's time to boost your productivity!


>💡 TLDR; Scroll down to start now! but don't skip it. Because you will need all of those.

---

## Productivity

[Bracketeer - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=pustelto.bracketeer)

Have you ever wasted your time fixing the wrong quote or wrong brackets? Then, no more! Bracketeer helps you create a shortcut such as ctrl/cmd + ' or ctrl/cmd + ; to instantly toggle between '[', '{', '(', '<' or ' " ', " ' ", '`'.

[Jump Tag - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ysemeniuk.jump-tag)

Create a shortcut ctrl/cmd + left or right to jump between the head or tail of the XML/HTML tag.

[Auto Rename Tag - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

This should be one of the must-have extensions, but sadly this extension doesn't work very well. The rename head or tail of the XML/HTML tag might not be fully renamed if your computer is lagging or delayed.

[Surround - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=yatki.vscode-surround)

Wrap up and replace the line of codes with choices.

[File Utils - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils)

Utility tools, which add a lot more powerful stuff to your command bar. Such as move, copy and duplicate.

[Easy Highlight - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=BrandonBlaschke.easy-highlight)

Simple but great! Remember the line of codes by highlighting it.

[Insert Unicode - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=brunnerh.insert-unicode)

Instantly create any Unicode characters/code and emoji.

[Random Everything - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=helixquar.randomeverything)

Generate many kinds of data to create dummy data with ease.

[Relative Path - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath)

Simple but useful! Go to a relative path from any file in the workspace.

[Open file From Path - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=jack89ita.open-file-from-path)

Go to destination file by shortcuts. ctrl/cmd + click

[npm Dependency Links - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=herrmannplatz.npm-dependency-links)

Bring you to NPM sources where the definition and document live using shortcuts. ctrl/cmd + click. Best combo with Package Json Upgrade

[Package Json Upgrade - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=codeandstuff.package-json-upgrade)

Show available updates in package.json. Both extensions are very important when cloning or forking a project, first things you want to do are upgrade and also learn What it is?

- Green sign - the new patch version is available
- Yellow sign - the new minor version is available
- Red sign - the new major version has been released. 

[JSON to TS - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts)

Convert JSON clipboard to a type guard definition

[Paste JSON as Code - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)

[Paste Image - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image)

Copy the image then paste it right in there. Very simple!

## Visual enhancer

[Todo Tree - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

Comment line of codes with specific highlighting keywords like TODO and FIXME. Cool thing! Todo Tree can quickly search and find all of the keywords you already have commented on in the tree structures view.

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

How can you know the actual color of the hex/rgb/hsl color? Here is the solution, don't miss this! 

[Output Colorizer - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)

Add readability to the output panel.

[Image preview - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)

Shows image preview in the gutter and on hover.

[Svg Preview - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview)

Automatically preview the SVG file on click.

[Statusbar error - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=JoeBerria.statusbarerror)

Show the error status at the status bar.

Just paste an image!

[filesize - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize)

Show the size of a file on the status bar.

## Autocomplete, Linter, Formatter, Sorter and Tracker

[GitHub Copilot - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)

Best of all autocompletion at the moment.

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

Linter pattern for Javascript. If you never know, you may need to read more about this extension somewhere.

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

Linter work on SASS, SCSS, LESS, Post CSS and common CSS.

[Prettier - Code formatter - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Code formatter works very well with HTML, CSS and JS. They are two easy ways to use. First, you may run it on the local workspace. Second, we can install it globally by naming it as '.prettierrc' or '.prettierrc.js'. and here is my global config;

```json
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "arrowParens": "always"
}
```

be sure to add this to your setting.json too

```json
"prettier.configPath": "~/.prettierrc",
```

[EditorConfig for VS Code - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)

Formatter that can override user/workspace project, easily create by right-clicking at file explorer.

[TypeScript Import Sorter - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mike-co.import-sorter)

Automatically sort all imports on the saving file.

[Headwind - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind)

A Tailwind class sorter. if you are using Tailwind CSS, please use it!

[Highlight Trailing White Spaces - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ybaumes.highlight-trailing-white-spaces)

Track the white space as a red color block. I know you got several settings to remove white space, but still feel pretty good when it becomes red and see it destroed. LoL!

[Gremlins tracker for Visual Studio Code - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=nhoizey.gremlins)

Track the weird characters that may invisible in your codebase. please use it!

[Template String Converter - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter)

Automatically convert a normal string like a quote ("'") and double quotes ('"') to escape string ('`'). If you like to use interpolation you may want this.

## Snippets

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

Log fast, debug faster. stop writing console log!

[JavaScript Booster - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster)

If you work with javascript, use it!

## React Tools

[Typescript React hooks Tools - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=kingwl.ts-react-hooks-tools)

A tool of React refactoring. Improve your codebase performance by hinting at the needed function.

[Simple React Snippets - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets)

Best React snippets in my opinion, simple keywords and just React!

[Paste HTML as JSX - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=leodriesch.paste-html-as-jsx)

Automatic convert normal HTML to JSX-HTML, useful when you scaffolding or bootstrapping the skeleton HTML in React files.


## Version Control

[Git Graph - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

I use this all the time, the extension visualizes the timeline, also provide many actions in it. everyone should use it!

[GitLive - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=TeamHub.teamhub)

Seamlessly help you live and collaborate.

[GitLens - Git supercharged - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

This is a huge extension called "Lens", you may take time for a while to understand how powerful it is. if you don't want to take time to learn this then just install it!

[gitignore - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore)

Instantly create .gitignore file by right-clicking to the file explorer area.

## Markdown

[Markdown All in One - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

Cover all about the Markdown.

[Markdown Image - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=hancel.markdown-image)

## CSS

[Change Color Format - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=bbugh.change-color-format)

Convert the format of color to your desire.

[Tailwind Shades - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=bourhaouta.tailwindshades)

Generate your input hex color as default equal to 400. with the output of range between 100 to 900.

[px to rem - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem)

Convert between px to rem and rem to px. the most two popular CSS units.

[CSS Navigation - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=pucelle.vscode-css-navigation)

This is a go-to file of CSS version, yeah! use it.

## Extras

[Settings Sync in Visual Studio Code](https://code.visualstudio.com/docs/editor/settings-sync)

For those people who still use the "Settings Sync" extension, it already has built-in support. The above link will make your crystal clear.

### Styling with configs

[Guides - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=spywhere.guides)

The fancy for guidelines, I prefer this over rainbow indent.  Here is my configuration;

```json
"guides.overrideDefault": true,
"guides.active.extraIndent": true,
"guides.active.color.dark": "#86a5ff",
"guides.normal.color.dark": "rgba(191, 184, 219, 0.1)",
"guides.stack.color.dark": "rgba(191, 184, 219, 0.1)",
"guides.active.style": "dashed",
"guides.stack.style": "dashed",
"guides.normal.style": "dashed",
"guides.limit.maximum": -1,
"guides.normal.enabled": false,
"guides.indent.showFirstIndentGuides": false,
```

#### Bracket Pair Colorizer

```json
"workbench.colorCustomizations": {
	"editorBracketHighlight.foreground1": "#58cdff",
	"editorBracketHighlight.foreground2": "#ff9ce3",
	"editorBracketHighlight.foreground3": "#9161ff",
	"editorBracketHighlight.foreground4": "#e7b454",
	"editorBracketHighlight.foreground5": "#49c54f",
}
```

As bracket pair colorizer is now a built-in extension, here is my matches color for Tokyo Night Storm theme.

#### Themes

[Tokyo Night - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=enkia.tokyo-night)

[Rosé Pine - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mvllow.rose-pine)

I mostly used Tokyo Night Storm theme with little customization. I prefer a little dark but less than normal version so I customize it as dimmed blue gray, sometimes I use to switch to the Rose Pine theme. Here is the addition config;

```json
"workbench.colorCustomizations": {
    "list.inactiveSelectionBackground": "#00000000",
    "titleBar.activeForeground": "#00000000",
    "panel.border": "#00000000",
    "panelTitle.activeBorder": "#00000000",
    "editorGroup.border": "#00000000",
    "editorGroupHeader.border": "#00000000",
    "editorGroupHeader.tabsBorder": "#00000000",
    "editorHoverWidget.border": "#00000000",
    "focusBorder": "#00000000",
    "menu.border": "#00000000",
    "menubar.selectionBorder": "#00000000",
    "sideBar.border": "#00000000",
    "sideBarTitle.foreground": "#00000000",
    "sideBarSectionHeader.border": "#00000000",
    "scrollbar.shadow": "#00000000",
    "statusBar.border": "#00000000",
    "tab.activeBorder": "#00000000",
    "tab.activeModifiedBorder": "#00000000",
    "tab.border": "#00000000",
    "tab.inactiveModifiedBorder": "#00000000",
    "tab.lastPinnedBorder": "#00000000",
    "tab.unfocusedActiveBorder": "#00000000",
    "titleBar.border": "#00000000",
    "window.activeBorder": "#00000000",
    "window.inactiveBorder": "#00000000",
    "[Tokyo Night]": {
      "tab.activeBackground": "#1a1b26",
      "statusBar.background": "#272735"
    },
    "[Tokyo Night Storm]": {
      "editor.background": "#1d2132",
      "tab.activeBackground": "#1d2132",
      "tab.activeForeground": "#bdc5e9",
      "statusBar.background": "#333a57"
    },
    "[Rosé Pine]": {
      "editorGroupHeader.tabsBackground": "#171521",
      "activityBar.background": "#171521",
      "sideBar.background": "#171521",
      "titleBar.activeBackground": "#171521",
      "titleBar.inactiveBackground": "#171521",
      "tab.inactiveBackground": "#191724",
      "tab.activeBackground": "#171521",
      "terminal.background": "#171521",
      "panel.background": "#171521"
    },
    "[Rosé Pine Moon]": {
      "editorGroupHeader.tabsBackground": "#25233a",
      "activityBar.background": "#25233a",
      "sideBar.background": "#25233a",
      "titleBar.activeBackground": "#25233a",
      "titleBar.inactiveBackground": "#25233a",
      "tab.activeBackground": "#232136",
      "tab.inactiveBackground": "#25233a",
      "terminal.background": "#25233a",
      "panel.background": "#25233a"
    }
  },
```

### Icon

[Material Icon Theme - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

Material Icon Theme - sure, why not?

### Settings

> 🎨 This is my overall settings in case you need it.

```json
{
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.inlayHints.functionLikeReturnTypes.enabled": true,

  "window.zoomLevel": 1,
  "window.title": "Amyse is on 🔥",
  "window.autoDetectColorScheme": true,

  "workbench.iconTheme": "material-icon-theme",
  "workbench.preferredDarkColorTheme": "Tokyo Night Storm",
  "workbench.editor.enablePreview": true,
  "workbench.tips.enabled": false,
  "workbench.startupEditor": "none",
  "workbench.statusBar.visible": true,
  "workbench.tree.indent": 14,
  "workbench.tree.renderIndentGuides": "none",

  "breadcrumbs.enabled": false,

  "diffEditor.ignoreTrimWhitespace": false,
  "diffEditor.wordWrap": "on",

  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,

  "extensions.ignoreRecommendations": true,

  "editor.lineNumbers": "on",
  "editor.autoClosingBrackets": "always",
  "editor.maxTokenizationLineLength": 500000,
  "editor.wordWrapColumn": 120,
  "editor.linkedEditing": true,
  "editor.overviewRulerBorder": false,
  "editor.scrollBeyondLastLine": false,
  "editor.find.addExtraSpaceOnTop": false,
  "editor.cursorBlinking": "solid",
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.fontFamily": "Dank Mono, Fira Code, JetBrains Mono, Kanit",
  "editor.fontWeight": "300",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  "editor.semanticHighlighting.enabled": false,
  // "editor.letterSpacing": 0.5,
  "editor.renderWhitespace": "trailing",
  "editor.renderLineHighlight": "gutter",
  "editor.renderControlCharacters": false,
  "editor.occurrencesHighlight": true,
  "editor.selectionHighlight": false,
  "editor.detectIndentation": true,
  "editor.scrollBeyondLastColumn": 4,
  "editor.definitionLinkOpensInPeek": true,
  "editor.padding.top": 22,
  "editor.padding.bottom": 22,
  "editor.suggest.preview": true,

  "explorer.confirmDragAndDrop": false,
  "explorer.openEditors.visible": 8,
  "explorer.confirmDelete": true,
  "explorer.incrementalNaming": "smart",

  "terminal.external.windowsExec": "",
  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.fontFamily": "MesloLGS NF, 'Fira Code',Operator Mono Light",
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1"
  },

  "files.hotExit": "off",
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,

  "search.exclude": {
    "**/node_modules": true,
    "**/package-lock.json": true,
    "**/yarn-lock.json": true,
    "**/bower_components": true,
    "**/*.code-search": true
  },

  "scm.diffDecorations": "none",
  "scm.diffDecorationsGutterWidth": 1,

  "turboConsoleLog.logMessagePrefix": "",
  "turboConsoleLog.quote": "'",

  "search.quickOpen.includeHistory": false,

  "git.alwaysShowStagedChangesResourceGroup": true,
  "gitlens.currentLine.format": "${author}, ${agoOrDate} ",
  "gitlens.currentLine.scrollable": false,
  "gitlens.codeLens.scopes": ["document"],
  "gitlens.statusBar.enabled": false,
  "gitlens.hovers.currentLine.changes": false,
  "gitlens.hovers.annotations.changes": false,
  "gitlens.views.repositories.files.compact": false,
  "gitlens.views.repositories.showBranchComparison": false,
  "gitlens.statusBar.alignment": "left",
  "git.autofetch": true,
  "GitLive.Issue tracker integration": "Disabled",

  "prettier.configPath": "~/.prettierrc",
  "css.validate": false,
  "scss.validate": false,
  "less.validate": false,
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescriptreact": "javascriptreact"
  },
  "gitlens.views.remotes.branches.layout": "list",
  "gitlens.advanced.messages": {
    "suppressImproperWorkspaceCasingWarning": true
  },
  "stylelint.snippet": ["css", "postcss", "scss", "css-in-js"],
  "stylelint.validate": [
    "css",
    "html",
    "javascript",
    "javascriptreact",
    "markdown",
    "postcss",
    "sass",
    "scss",
    "source.css.styled",
    "source.markdown.math",
    "svelte",
    "typescript",
    "typescriptreact",
    "xml"
  ],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": false,
  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "file",
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
    "source.addMissingImports": true,
    "source.fixAll": true
  },
  "turboConsoleLog.addSemicolonInTheEnd": false,
  "turboConsoleLog.delimiterInsideMessage": "",
  "turboConsoleLog.includeFileNameAndLineNum": false,
  "turboConsoleLog.insertEnclosingFunction": false,

  "editor.bracketPairColorization.enabled": true,
  "editor.semanticTokenColorCustomizations": {
    "enabled": false
  },
  "editor.tokenColorCustomizations": {
    "textMateRules": []
  },

  "workbench.colorTheme": "Tokyo Night Storm",
  "editor.accessibilitySupport": "off",
  "editor.inlineSuggest.enabled": true,
  "github.copilot.enable": {
    "*": true,
    "yaml": false,
    "plaintext": false,
    "markdown": false
  },
  "editor.guides.indentation": false,
  "editor.guides.highlightActiveIndentation": false,
  "editor.guides.bracketPairsHorizontal": false,
}
```

This might not be relevant, but still my favourite motto:


> 🍀 Calm is the best way to conquer


## Final thoughts

From my perspective, the list I gave should be included for every developer. Someone may find out them as useful or useless stuff. In case it's useful, please leave a like or comment for support. Lastly, if anyone got some extension to share, please let me know!

It's time for today. Enjoy Dever!