In this article, I will share the favourite extension that I use in the VSCode editor. Tell you first, I am a frontend developer who primarily uses React in native, so you will see some React extensions too. sorry for the others.
This is my own collection of extensions since the first day I started using VSCode. Every morning I always find something that would improve my productivity skills such as tools, philosophy, mindset, creativity, and also extensions. I always search for the extensions of famous blog sites like ex. Medium, Dev.to, Hashnode, Daily.dev. To people might be worried about over-extensions (Just hacking the word over-engineer) because of 68, honestly, I use it mostly more than 85% all the time.
💡 TLDR; Thank goodness! You found the best article on extensions that will change your coding life.
Before we start, the list below is not in any particular order. If you have trouble finding something, just search...
Productivity
Bracketeer - Visual Studio Marketplace
Bracketeer - have you ever put the wrong quote or wrong brackets into your code? Bracketeer helps you to instantly toggle between '[', '{', '(', '<' and ' " ', " ' ", '`'. (must have).
Jump Tag - Visual Studio Marketplace
Jump Tag - add a shortcut to jump between the head or tail of the XML/HTML tag.
Auto Rename Tag - Visual Studio Marketplace
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
Surround - wrap the whole line of codes with many logical conditions!
File Utils - Visual Studio Marketplace
File Utils - do a lot more with the command bar such as move, copy and duplicate.
Easy Highlight - Visual Studio Marketplace
Easy Highlight - as the name said "easy highlight" just hover the line of codes you want to highlight then highlight it by command bar or shortcut.
Insert Unicode - Visual Studio Marketplace
Insert Unicode - find any Unicode characters/code and emoji.
Random Everything - Visual Studio Marketplace
Random Everything - generate pieces of stuff, useful when you want to create fake data or dummy JSON.
Relative Path - Visual Studio Marketplace
Relative Path - get a relative path from any file in the workspace. check it out! it is more simple than you thought.
Open file From Path - Visual Studio Marketplace
Open file From Path - bring you to destination file by clicking the path using ctrl + click (windows) and cmd + click (macOS).
npm Dependency Links - Visual Studio Marketplace
npm Dependency Links - bring you to npm sources by clicking the path using ctrl + click (windows) and cmd + click (macOS). (very useful when needing more dependency definition.)
Package Json Upgrade - Visual Studio Marketplace
Package JSON Upgrade - show available updates in package.json. They are 3 colors to indicate how old it is compared to your installed version. The green color stands for the new patch version is available, the yellow color stand for the new minor version is available and the red color stand for the new major version has been released.
vszip - Visual Studio Marketplace
VSZip - add the ability to zip a file right in the VSCode.
JSON to TS - Visual Studio Marketplace
JSON to TS - convert JSON clipboard to a type guard
Paste JSON as Code - Visual Studio Marketplace
Paste JSON as Code - as the extension name.
Paste Image - Visual Studio Marketplace
Paste Image - add the ability to copy the image then paste it as an image.
Visual enhancer
Todo Tree - Visual Studio Marketplace
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
Color Highlight - must-have extension! how can you know the actual color of the hex color, RGB color or else? here is the solution!
Rainbow CSV - Visual Studio Marketplace
Rainbow CSV - fancy for CSV extension file.
Output Colorizer - Visual Studio Marketplace
Output Colorizer - add more readability to the output menu.
Image preview - Visual Studio Marketplace
Image preview - shows image preview in the gutter and on hover.
Svg Preview - Visual Studio Marketplace
SVG Preview - click the SVG file on the explorer, and it will automatically preview the file.
Statusbar error - Visual Studio Marketplace
Statusbar error - show the error status at the left side of the status bar.
Fig - visual autocomplete for the terminal.
Autocomplete, Linter, Formatter, Sorter and Tracker
exports autocomplete - Visual Studio Marketplace
exports autocomplete - collect export from the workspace while adding the ability to autocomplete.
ESLint - Visual Studio Marketplace
ESLint - linter pattern for javascript.
Stylelint - Visual Studio Marketplace
Stylelint - linter work both on Sass, Scss, Less, PostCss and common Css.
Prettier - Code formatter - Visual Studio Marketplace
Prettier - 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;
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"arrowParens": "always"
}
be sure to add this to your setting.json too
"prettier.configPath": "~/.prettierrc",
EditorConfig for VS Code - Visual Studio Marketplace
EditorConfig - formatter that can override user/workspace project, easily create by right-clicking at file explorer.
TypeScript Import Sorter - Visual Studio Marketplace
Typescript Import Sorter - add the ability to automatically sort all imports by on save.
Headwind - Visual Studio Marketplace
Headwind - a Tailwind class sorter. if you using Tailwindcss, please use it!
Highlight Trailing White Spaces - Visual Studio Marketplace
Highlight Trailing White Spaces - track the white space as a red color block.
Gremlins tracker for Visual Studio Code - Visual Studio Marketplace
Gremlins tracker - track the weird characters that may invisible.
Template String Converter - Visual Studio Marketplace
Template String Converter - automatic convert a normal string like a quote ("'") and double quotes ('"') to escape string ('`').
Snippets
Turbo Console Log - Visual Studio Marketplace
Turbo Console Log - log fast, debug faster. this extension adds shortcuts and defaults messages to your console log.
JavaScript Booster - Visual Studio Marketplace
Javascript Booster - if you work with javascript, use it!
React Tools
Typescript React hooks Tools - Visual Studio Marketplace
Typescript React hooks Tools - a tool of React refactoring. Improve your code base performance by hinting at the needed function.
Simple React Snippets - Visual Studio Marketplace
Simple React Snippets - best React snippets, in my opinion, simple keywords and just React!
Paste HTML as JSX - Visual Studio Marketplace
Paste HTML as JSX - automatic convert normal HTML to JSX-HTML, useful when you scaffolding or bootstrapping the skeleton HTML in React files.
Testing
Wallaby.js - Visual Studio Marketplace
Wallaby - useful development tools, whenever you doing TDD, these tools immediately test and show the output as a color signal in the gutter area.
Quokka.js - Visual Studio Marketplace
Quokka - very useful development tools, these tools immediately output your logic as a color signal in the gutter area.
AI for life
GitHub Copilot - Visual Studio Marketplace
GitHub Copilot - best auto completions at the moment.
Version Control
Git Graph - Visual Studio Marketplace
Git Graph - I use this all the time, the extension visualizes the timeline, also provide many actions in it. you can use it by clicking it at the sidebar.
GitLive - Visual Studio Marketplace
GitLive - seamlessly help you live and collaborate.
GitLens - Git supercharged - Visual Studio Marketplace
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
gitignore - instantly create gitignore by right-clicking to the file explorer area.
Markdown
Markdown All in One - Visual Studio Marketplace
Markdown All in One - must-have extension! this cover all about the MD extension file.
Markdown Image - Visual Studio Marketplace
Markdown Image - just paste an image, then it automatically generates a markdown image.
filesize - Visual Studio Marketplace
filesize - show the size of a file on the status bar.
CSS
Change Color Format - Visual Studio Marketplace
Change Color Format - convert multiple format color to your desired color
Tailwind Shades - Visual Studio Marketplace
Tailwind Shades - generate your input hex color as -400 to be in the range of 100 to 900.
px to rem - Visual Studio Marketplace
PX to REM - convert between px to rem and rem to px. the most two popular CSS units.
CSS Navigation - Visual Studio Marketplace
CSS Navigation - this is a go-to file of CSS version, yeah! use it.
Intellisense
npm Intellisense - Visual Studio Marketplace
npm Intellisense - npm packages autocomplete for your import (es6) or require
markdownlint - Visual Studio Marketplace
markdownlint - IntelliSense for MD extension file.
Prisma - Visual Studio Marketplace
Prisma - Intellisense for Prisma. For those who are unfamiliar, Prisma is a TypeORM that help you directly connect to your database with or without SQL knowledge. You will need this if you try to do backend stuff.
Path Intellisense - Visual Studio Marketplace
Path Intellisense - path hints.
Babel JavaScript - Visual Studio Marketplace
Babel Javascript - intellisense for javascript.
Tailwind CSS IntelliSense - Visual Studio Marketplace
Tailwind CSS Intellisense
Sass - Visual Studio Marketplace
Sass - intellisense for Sass user.
GraphQL - Visual Studio Marketplace
GraphQL - intellisense for GraphQL
DotENV - Visual Studio Marketplace
DotENV - inteelisense for DotENV
Remote Tools
SFTP - Visual Studio Marketplace
SFTP - as a developer you may already hear of SFTP/FTP. They are a lot of tools out there, but why don't we just use the extension in VSCode. make it simple, make it easy.
Remote - SSH - Visual Studio Marketplace
Remote - SSH: Editing Configuration Files - Visual Studio Marketplace
Remote SSH - as I mentioned SFTP, these are similar stuff.
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 you be crystal clear.
Styling with configs
Guides
Guides - Visual Studio Marketplace
Guides - fancy guide lines (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,
"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,
"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",
"tailwindCSS.emmetCompletions": true,
"tailwindCSS.includeLanguages": {
"plaintext": "html",
"javascript": "html",
"javascriptreact": "html",
"typescript": "html",
"typescriptreact": "html"
},
"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,
"todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
"todo-tree.filtering.excludeGlobs": ["**/node_modules", "**.d.ts"],
"todo-tree.general.tagGroups": {
"FIXME": ["FIXME", "FIXIT", "FIX"]
},
"todo-tree.highlights.customHighlight": {
"TODO": {
"iconColour": "skyblue",
"foreground": "white",
"background": "#17b9ff",
"gutterIcon": true
},
"FIXME": {
"iconColour": "#Ff2047",
"foreground": "white",
"background": "#Ff2047",
"gutterIcon": true
},
"BUG": {
"iconColour": "#aaa",
"foreground": "#111",
"background": "#aaa",
"gutterIcon": true
},
"HACK": {
"iconColour": "#8A2BE2",
"foreground": "#111",
"background": "#8A2BE2",
"gutterIcon": true
},
"REMARK": {
"iconColour": "#aadd11",
"foreground": "#111",
"background": "#aadd11",
"gutterIcon": true
},
"NOTE": {
"iconColour": "#FFD700",
"foreground": "#111",
"background": "#FFD700",
"gutterIcon": true
}
},
"todo-tree.general.tags": [
"BUG",
"HACK",
"FIXME",
"TODO",
"REMARK",
"NOTE",
"[ ]",
"[x]"
],
"editor.bracketPairColorization.enabled": true,
"workbench.colorCustomizations": {
"editorBracketHighlight.foreground1": "#58cdff",
"editorBracketHighlight.foreground2": "#ff9ce3",
"editorBracketHighlight.foreground3": "#9161ff",
"editorBracketHighlight.foreground4": "#e7b454",
"editorBracketHighlight.foreground5": "#49c54f",
"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"
}
},
"editor.semanticTokenColorCustomizations": {
"enabled": false
},
"editor.tokenColorCustomizations": {
"textMateRules": []
},
"remote.SSH.defaultExtensions": ["gitpod.gitpod-remote-ssh"],
"remote.SSH.configFile": "/var/folders/18/x7b61__j05v_gxztzqb4qk6c0000gn/T/gitpod_ssh_config-19477-2Re147OV3TBI",
"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,
"wallaby.startAutomatically": false
}
This might not be relevant, but still my favourite motto:
🍀 Calm is the best way to conquer
Final thoughts
This is all of my extensions, you may have them useful or useless. In case you think it is useful, please leave a message so we can share the moment using it. Enjoy!