What extensions do you use in VSCode? #406

kentcdodds · May 24, 2018

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 · May 24, 2018

Here's the list:

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 · May 24, 2018

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 · May 24, 2018

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 · May 24, 2018

GitLens

Import Cost

colorize

Code Outline

esausilva · May 24, 2018

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 · May 25, 2018

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

sagirk · Jun 14, 2018

@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 · Jun 14, 2018

@sagirk Thanks, I will try it

michaelgmcd · Jul 16, 2018

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 · Sep 12, 2018

This one extension is a game changer for console.log

Turbo Console Log

talves · Jan 14, 2019

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()

kentcdodds closed this May 24, 2018

detrohutt added the packages label Jun 21, 2018

kentcdodds referenced this issue Jul 20, 2018
Closed
A Perfectionist who seek some help to create his first screencast #448

cassiocardoso referenced this issue Oct 23, 2018
Open
VS Code extensions #2

kentcdodds/ama forked from sindresorhus/ama

What extensions do you use in VSCode? #406

What extensions do you use in VSCode? #406

kentcdodds commented May 24, 2018

This comment has been minimized.

kentcdodds commented May 24, 2018 •

edited

kentcdodds closed this May 24, 2018

This comment has been minimized.

EQuimper commented May 24, 2018 •

edited

This comment has been minimized.

palashmon commented May 24, 2018

This comment has been minimized.

jfsiii commented May 24, 2018

This comment has been minimized.

esausilva commented May 24, 2018 •

edited

This comment has been minimized.

Rolando-Barbella commented May 25, 2018

This comment has been minimized.

sagirk commented Jun 14, 2018 •

edited

This comment has been minimized.

esausilva commented Jun 14, 2018

detrohutt added the packages label Jun 21, 2018

This comment has been minimized.

michaelgmcd commented Jul 16, 2018

kentcdodds referenced this issue Jul 20, 2018

A Perfectionist who seek some help to create his first screencast #448

This comment has been minimized.

amb101 commented Sep 12, 2018

cassiocardoso referenced this issue Oct 23, 2018

VS Code extensions #2

This comment has been minimized.

talves commented Jan 14, 2019

kentcdodds/ama forked from sindresorhus/ama

Join GitHub today

What extensions do you use in VSCode? #406

Comments

kentcdodds commented May 24, 2018

This comment has been minimized.

kentcdodds commented May 24, 2018 • edited

Snippets

kentcdodds closed this May 24, 2018

This comment has been minimized.

EQuimper commented May 24, 2018 • edited

This comment has been minimized.

palashmon commented May 24, 2018

This comment has been minimized.

jfsiii commented May 24, 2018

GitLens

Import Cost

colorize

Code Outline

This comment has been minimized.

esausilva commented May 24, 2018 • edited

This comment has been minimized.

Rolando-Barbella commented May 25, 2018

This comment has been minimized.

sagirk commented Jun 14, 2018 • edited

Replace

With

This comment has been minimized.

esausilva commented Jun 14, 2018

detrohutt added the packages label Jun 21, 2018

This comment has been minimized.

michaelgmcd commented Jul 16, 2018

kentcdodds referenced this issue Jul 20, 2018

A Perfectionist who seek some help to create his first screencast #448

This comment has been minimized.

amb101 commented Sep 12, 2018

This one extension is a game changer for console.log

cassiocardoso referenced this issue Oct 23, 2018

VS Code extensions #2

This comment has been minimized.

talves commented Jan 14, 2019

kentcdodds commented May 24, 2018 •

edited

EQuimper commented May 24, 2018 •

edited

esausilva commented May 24, 2018 •

edited

sagirk commented Jun 14, 2018 •

edited