What extensions do you use in VSCode?

[kentcdodds]

Yes, this is me asking myself a question, because I want to answer it and I'm sure someone will ask me eventually.

I'll try to keep my answer up-to-date. You can get to this question quickly with the short-link: http://kcd.im/vscode

[kentcdodds]

Here's the list:

• ban.spellright
• christian-kohler.npm-intellisense
• christian-kohler.path-intellisense
• CoenraadS.bracket-pair-colorizer
• dbaeumer.vscode-eslint
• deerawan.vscode-dash
• eg2.tslint
• eg2.vscode-npm-script
• esbenp.prettier-vscode
• formulahendry.auto-rename-tag
• ionutvmi.path-autocomplete
• jakob101.RelativePath
• jasonnutter.search-node-modules
• leizongmin.node-module-intellisense
• mgmcdermott.vscode-language-babel
• mrmlnc.vscode-duplicate
• ms-vscode.atom-keybindings
• paulmolluzzo.convert-css-in-js
• PKief.material-icon-theme
• RoscoP.ActiveFileInStatusBar
• sdras.night-owl
• silvenon.mdx
• sleistner.vscode-fileutils
• VisualStudioExptTeam.vscodeintellicode
• WallabyJs.quokka-vscode
• wayou.vscode-todo-highlight
• xyz.local-history

---

To generate this list:

const {execSync, spawn} = require('child_process')

const result = execSync('code --list-extensions')

const list = String(result)
  .split('\n')
  .filter(Boolean)
  .map(
    x => `- [${x}](https://marketplace.visualstudio.com/items?itemName=${x})`
  )
  .join('\n')

const proc = spawn('pbcopy')
proc.stdin.write(list)
proc.stdin.end()

I just load that up in a Quokka buffer​​​​ and it's just waiting in my clipboard.

And here's my config because someone asked me once:

{
  // Place your settings in this file to overwrite the default settings
  "editor.formatOnSave": true,
  "editor.detectIndentation": true,
  "editor.fontSize": 16,
  "editor.parameterHints.enabled": false,
  "editor.fontFamily": "'Dank Mono', Menlo, Monaco, 'Courier New', monospace",
  "editor.fontLigatures": false,
  "editor.rulers": [80],
  "editor.snippetSuggestions": "top",
  "editor.tabSize": 2,
  "editor.renderWhitespace": "boundary",
  "editor.glyphMargin": false,
  "editor.folding": false,
  "files.exclude": {
    "USE_GITIGNORE": true
  },
  "javascript.suggest.autoImports": false,
  "javascript.validate.enable": false,
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/coverage": true,
    "**/dist": true,
    "**/build": true,
    "**/.build": true,
    "**/.gh-pages": true
  },
  "eslint.autoFixOnSave": false,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.options": {
    "env": {
      "browser": true,
      "jest/globals": true,
      "es6": true
    },
    "parserOptions": {
      "ecmaVersion": 2018,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "rules": {
      "no-debugger": "off"
    }
  },
  "terminal.integrated.experimentalBufferImpl": "TypedArray",
  "terminal.integrated.shellArgs.osx": ["-l"],
  "files.associations": {
    "*.md": "mdx"
  },
  "explorer.openEditors.visible": 0,
  "editor.lineNumbers": "on",
  "workbench.colorTheme": "Night Owl",
  "breadcrumbs.enabled": true,
  "prettier.eslintIntegration": false,
  "prettier.bracketSpacing": false,
  "prettier.printWidth": 80,
  "prettier.tabWidth": 2,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  "prettier.jsxBracketSameLine": false,
  "prettier.semi": false,
  "prettier.useTabs": false,
  "prettier.proseWrap": "always",
  "local-history.absolute": true,
  "local-history.path": "/Users/kdodds/.vscode-history",
  "grunt.autoDetect": "off",
  "npm.runSilent": true,
  "gulp.autoDetect": "off",
  "workbench.iconTheme": "material-icon-theme",
  "explorer.confirmDragAndDrop": false,
  "workbench.sideBar.location": "left",
  "atomKeymap.promptV3Features": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.formatOnPaste": false,
  "workbench.startupEditor": "none",
  "window.zoomLevel": 0,
  "editor.minimap.enabled": false,
  "workbench.activityBar.visible": false,
  "spellright.language": ["en"],
  "spellright.documentTypes": ["markdown", "plaintext"],
  "javascript.updateImportsOnFileMove.enabled": "never",
  "typescript.updateImportsOnFileMove.enabled": "never",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.smoothScrolling": true
  // egghead
  /*
  "editor.fontSize": 22,
  "terminal.integrated.fontSize": 16,
  "scm.diffDecorations": "none",
  "editor.lineNumbers": "off",
  "workbench.editor.showTabs": false,
  "workbench.statusBar.visible": false,
  "editor.cursorBlinking": "solid",
  "breadcrumbs.enabled": false
  /**/
  // workshop
  /*
  "editor.fontSize": 22,
  "terminal.integrated.fontSize": 16,
  "scm.diffDecorations": "none",
  "editor.lineNumbers": "off",
  "workbench.statusBar.visible": false,
  "editor.cursorBlinking": "solid"
  /**/
  // livestream
  /*
  "window.zoomLevel": 2,
  "editor.fontSize": 22,
  "terminal.integrated.fontSize": 16,
  "scm.diffDecorations": "none",
  "editor.lineNumbers": "off",
  "workbench.statusBar.visible": false,
  "editor.cursorBlinking": "solid"
  /**/
}

Snippets

javascript.json/typescript.json/typescriptreact.json (I just copy/paste it...)

{
  /*
   // Place your snippets for JavaScript here. Each snippet is defined under a snippet name and has a prefix, body and
   // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
   // $1, $2 for tab stops, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.
   // Example:
   "Print to console": {
  "prefix": "log",
  "body": [
    "console.log('$1');",
    "$2"
  ],
  "description": "Log output to console"
  }
*/
  "console.log": {
    "prefix": "cl",
    "body": "console.log(${1:'here'})$0"
  },
  "console.log('var', var)": {
    "prefix": "vl",
    "body": "console.log('$1', $1)$0"
  },
  "console.log({var})": {
    "prefix": "ol",
    "body": "console.log({$1})$0"
  },
  "import x from 'x'": {
    "prefix": "imp",
    "body": "import ${2:*} from '$1'$3"
  },
  "eslint rule": {
    "prefix": "esl",
    "body": "/* eslint $1:0 */"
  },
  "eslint disable next line": {
    "prefix": "eslnl",
    "body": "// eslint-disable-next-line $1"
  },
  "eslint disable line": {
    "prefix": "esll",
    "body": "// eslint-disable-line $1"
  },
  "constructor": {
    "prefix": "ctor",
    "body": [
      "constructor(...args) {",
      "  super(...args)",
      "  $0",
      "}"
    ]
  },
  "try/catch": {
    "prefix": "try",
    "body": [
      "try {",
      "  $1",
      "} catch (error) {",
      "  $0",
      "}"
    ]
  },
  "async function": {
    "prefix": "afun",
    "body": [
      "async function $1($2) {",
      "  $0",
      "}"
    ]
  },
  "throw log": {
    "prefix": "tl",
    "body": "throw new Error(JSON.stringify({$0}, null, 2))"
  },
  "spaced console.log": {
    "prefix": "scl",
    "body": [
      "console.log('**************************************************************************\\\\n\\\\n\\\\n')",
      "console.log($0)",
      "console.log('\\\\n\\\\n\\\\n**************************************************************************')"
    ]
  },
  "React Component": {
    "prefix": "rc",
    "body": [
      "class $1 extends React.Component {",
      "  render() {",
      "    $0",
      "  }",
      "}"
    ]
  },
  "React: componentWillMount": {
    "prefix": "cwm",
    "body": [
      "componentWillMount() {",
      "  $0",
      "}"
    ]
  },
  "React: componentDidMount": {
    "prefix": "cdm",
    "body": [
      "componentDidMount() {",
      "  $0",
      "}"
    ]
  },
  "React: componentWillReceiveProps": {
    "prefix": "cwrp",
    "body": [
      "componentWillReceiveProps(nextProps) {",
      "  $0",
      "}"
    ]
  },
  "React: componentWillUpdate": {
    "prefix": "cwu",
    "body": [
      "componentWillUpdate(nextProps, nextState) {",
      "  $0",
      "}"
    ]
  },
  "React: componentDidUpdate": {
    "prefix": "cdu",
    "body": [
      "componentDidUpdate(prevProps, prevState) {",
      "  $0",
      "}"
    ]
  },
  "React: componentWillUnmount": {
    "prefix": "cwu",
    "body": [
      "componentWillUnmount() {",
      "  $0",
      "}"
    ]
  },
  "Jest test": {
    "prefix": "test",
    "body": [
      "test('$1', () => {",
      "  $0",
      "})"
    ]
  },
  "Jest async test": {
    "prefix": "atest",
    "body": [
      "test('$1', async () => {",
      "  $0",
      "})"
    ]
  },
  "Mocha it block": {
    "prefix": "it",
    "body": [
      "it('should $1', () => {",
      "  $2",
      "})"
    ]
  },
  "Mocha describe block": {
    "prefix": "desc",
    "body": [
      "describe('$1', () => {",
      "  $2",
      "})"
    ]
  },
  "split-guide final": {
    "prefix": "sgf",
    "body": [
      "// FINAL_START",
      "$1",
      "// FINAL_END"
    ]
  },
  "split-guide workshop": {
    "prefix": "sgw",
    "body": [
      "// WORKSHOP_START",
      "$1",
      "// WORKSHOP_END"
    ]
  },
  "split-guide comment": {
    "prefix": "sgc",
    "body": [
      "// COMMENT_START",
      "$1",
      "// COMMENT_END"
    ]
  }
}

keybindings.json

[
  {
    "comment": "This is just really handy. I use it all the time in Atom.",
    "key": "shift+cmd+\\",
    "command": "workbench.files.action.focusFilesExplorer"
  },
  {
    "comment": "Because I want enter to open the file, I need some way to rename it, this seemed as good as any other method. 'm' for 'move'",
    "key": "m",
    "command": "renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus"
  },
  {
    "comment": "This allows me to open the file on enter instead which makes more sense to me.",
    "key": "enter",
    "command": "-renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus"
  },
  {
    "comment": "This makes my zoom behavior more like chrome",
    "key": "cmd+0",
    "command": "workbench.action.zoomReset"
  },
  {
    "comment": "This disables the enter key for autocomplete. Use tab instead. It's annoying when I'm typing quickly and want to go to the next line but have to first clear the autocomplete menu. So I just disabled the enter key here.",
    "key": "enter",
    "command": "-acceptSelectedSuggestionOnEnter",
    "when": "acceptSuggestionOnEnter && suggestWidgetVisible && suggestionMakesTextEdit && textInputFocus"
  },
  {
    "comment": "This disables the tab key for autocomplete. Instead we have another one which only applies when not in snippet mode.",
    "key": "tab",
    "command": "-acceptSelectedSuggestion",
    "when": "suggestWidgetVisible && textInputFocus"
  },
  {
    "key": "tab",
    "command": "acceptSelectedSuggestion",
    "when": "suggestWidgetVisible && textInputFocus && !editorTabMovesFocus && !inSnippetMode"
  },
  {
    "key": "shift+cmd+space",
    "command": "editor.action.triggerParameterHints",
    "when": "editorHasSignatureHelpProvider && editorTextFocus"
  },
  {
    "key": "shift+cmd+space",
    "command": "-editor.action.triggerParameterHints",
    "when": "editorHasSignatureHelpProvider && editorTextFocus"
  }
]

[EQuimper]

Hey @kentcdodds nice list :) Hope this is ok I wrote something here :) You should check this one out https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync This let you have your setting in a private gist and when you change machine etc you get all back :)

[palashmon]

Hi @kentcdodds,

• wmaurer.join-lines

This extension is no longer required, as a Join Lines command has been built into Visual Studio Code:

You can open Keyboard Shortcuts (Ctrl+K Ctrl+S) and bind editor.action.joinLines to a shortcut of your choice.

[jfsiii]

GitLens

Import Cost

colorize

Code Outline

[esausilva]

If you have multiple computers you would want to sync vs code settings https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

ES6/ES7 syntax coloring https://marketplace.visualstudio.com/items?itemName=dzannotti.vscode-babel-coloring

To colorize brackets https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

React code snippets https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

Take pretty code screenshots to share on Twitter https://marketplace.visualstudio.com/items?itemName=pnp.polacode

[Rolando-Barbella]

• ES7 React/Redux/GraphQL/React-Native snippets
• Import Cost
• Git History
• Git History Diff
• Markdown All in One

[sagirk]

@kentcdodds @esausilva

Replace

• dzannotti.vscode-babel-coloring — abandoned; no updates or responses to issues for 2 years

With

• mgmcdermott.vscode-language-babel — better, maintained alternative; also pretty good attention to detail.

[esausilva]

@sagirk Thanks, I will try it

[michaelgmcd]

Hey @kentcdodds, just seeing this now. Awesome that you're using my vscode-language-babel package. Let me know if you (or anyone else on this thread) run into any issues with it!

[amb101]

This one extension is a game changer for console.log

• Turbo Console Log

[talves]

To generate this list on Windows (copies list to clipboard)

const {execSync, spawn} = require('child_process')

const result = execSync('code --list-extensions')

const list = String(result)
  .split('\n')
  .filter(Boolean)
  .map(
    x => `- [${x}](https://marketplace.visualstudio.com/items?itemName=${x})`
  )
  .join('\n')

const proc = spawn('clip')
proc.stdin.write(list)
proc.stdin.end()

[Oluwasetemi]

I have been looking for this. Can you please help me with some light on whats is going on under the hood.
@talves