Patiparn Intaraprasert

Posted on Dec 5, 2021

Superb VSCode extensions changing your coding life

#tooling #productivity #vscode #javascript

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

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

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

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

Wrap up and replace the line of codes with choices.

File Utils - Visual Studio Marketplace

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

Easy Highlight - Visual Studio Marketplace

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

Insert Unicode - Visual Studio Marketplace

Instantly create any Unicode characters/code and emoji.

Random Everything - Visual Studio Marketplace

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

Relative Path - Visual Studio Marketplace

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

Open file From Path - Visual Studio Marketplace

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

npm Dependency Links - Visual Studio Marketplace

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

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

Convert JSON clipboard to a type guard definition

Paste JSON as Code - Visual Studio Marketplace

Paste Image - Visual Studio Marketplace

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

Visual enhancer

Todo Tree - Visual Studio Marketplace

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

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

Add readability to the output panel.

Image preview - Visual Studio Marketplace

Shows image preview in the gutter and on hover.

Svg Preview - Visual Studio Marketplace

Automatically preview the SVG file on click.

Statusbar error - Visual Studio Marketplace

Show the error status at the status bar.

Just paste an image!

filesize - Visual Studio Marketplace

Show the size of a file on the status bar.

Autocomplete, Linter, Formatter, Sorter and Tracker

GitHub Copilot - Visual Studio Marketplace

Best of all autocompletion at the moment.

ESLint - Visual Studio Marketplace

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

Stylelint - Visual Studio Marketplace

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

Prettier - Code formatter - Visual Studio Marketplace

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

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

TypeScript Import Sorter - Visual Studio Marketplace

Automatically sort all imports on the saving file.

Headwind - Visual Studio Marketplace

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

Highlight Trailing White Spaces - Visual Studio Marketplace

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

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

Template String Converter - Visual Studio Marketplace

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

Log fast, debug faster. stop writing console log!

JavaScript Booster - Visual Studio Marketplace

If you work with javascript, use it!

React Tools

Typescript React hooks Tools - Visual Studio Marketplace

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

Simple React Snippets - Visual Studio Marketplace

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

Paste HTML as JSX - Visual Studio Marketplace

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

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

Seamlessly help you live and collaborate.

GitLens - Git supercharged - Visual Studio Marketplace

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

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

Markdown

Markdown All in One - Visual Studio Marketplace

Cover all about the Markdown.

Markdown Image - Visual Studio Marketplace

CSS

Change Color Format - Visual Studio Marketplace

Convert the format of color to your desire.

Tailwind Shades - Visual Studio Marketplace

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

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

CSS Navigation - Visual Studio Marketplace

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

Extras

Settings Sync in Visual Studio Code

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

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

"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

"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

Rosé Pine - Visual Studio Marketplace

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;

"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

Material Icon Theme - sure, why not?

Settings

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

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