What extensions do you use in VSCode? #406

kentcdodds · 2018-05-24T15:45:18Z

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 · 2018-05-24T15:47:28Z

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.lightbulb.enabled": false,
  "editor.parameterHints.enabled": false,
  "editor.fontFamily": "'Dank Mono', Menlo, Monaco, 'Courier New', monospace",
  "editor.fontLigatures": false,
  "editor.rulers": [80],
  "editor.snippetSuggestions": "top",
  "editor.wordBasedSuggestions": false,
  "editor.suggest.localityBonus": true,
  "editor.acceptSuggestionOnCommitCharacter": false,
  "editor.acceptSuggestionOnEnter": "off",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.suggestSelection": "recentlyUsed",
    "editor.suggest.filteredTypes": {
      "keyword": false,
    },
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.suggestSelection": "recentlyUsed",
    "editor.suggest.filteredTypes": {
      "keyword": false,
    },
  },
  "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.shellArgs.osx": ["-l"],
  "terminal.integrated.scrollback": 10000,
  "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",
  "prettier.requireConfig": true,
  "local-history.absolute": true,
  "local-history.path": "/Users/kentcdodds/.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", "mdx"],
  "spellright.parserByClass": {"mdx": {"parser": "markdown"}},
  "javascript.updateImportsOnFileMove.enabled": "never",
  "typescript.updateImportsOnFileMove.enabled": "never",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.smoothScrolling": true,
  "workbench.panel.defaultLocation": "right",
  "php.suggest.basic": false,
  "typescript.suggest.autoImports": false,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // egghead
  /*
  "editor.fontSize": 22,
  "terminal.integrated.fontSize": 20,
  "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": 20,
  "scm.diffDecorations": "none",
  "workbench.statusBar.visible": false,
  "editor.cursorBlinking": "solid",
  "window.zoomLevel": 1,
  "workbench.colorTheme": "Night Owl Light",
  /**/
  // Talk
  /*
  "editor.fontSize": 22,
  "terminal.integrated.fontSize": 20,
  "scm.diffDecorations": "none",
  "editor.lineNumbers": "off",
  "workbench.statusBar.visible": false,
  "editor.cursorBlinking": "solid",
  "window.zoomLevel": 1,
  "workbench.colorTheme": "Night Owl Light",
  "breadcrumbs.filePath": "off",
  "breadcrumbs.symbolPath": "off",
  /**/
  // livestream
  /*
  "window.zoomLevel": 1,
  "editor.fontSize": 22,
  "terminal.integrated.fontSize": 20,
  "scm.diffDecorations": "none",
  "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 '": {
		"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**************************************************************************')"
		]
	},
	"Switch Statement": {
		"prefix": "switch",
		"body": [
			"switch (${1:key}) {",
			"  case ${2:value}: {",
			"    $0",
			"    break",
			"  }",
			"  default: {",
			"    break",
			"  }",
			"}"
		]
	},
	"Reducer": {
		"prefix": "reducer",
		"body": [
			"function ${1:someReducer}(state, action) {",
			"  switch (action.type) {",
			"    case ${2:'value'}: {",
			"      return $0",
			"    }",
			"    default: {",
			"      throw new Error(`Unhandled action type: ${action.type}`)",
			"    }",
			"  }",
			"}"
		]
	},
	"Switch case": {
		"prefix": "case",
		"body": [
			"case ${2:'value'}: {",
			"  return $0",
			"}",
		]
	},
	"React.useState": {
		"prefix": "us",
		"body": [
			"const [${1:state}, ${2:setState}] = React.useState($0)"
		]
	},
	"React.useEffect": {
		"prefix": "uf",
		"body": [
			"React.useEffect(() => {",
			"  $0",
			"}, [])"
		]
	},
	"React.useReducer": {
		"prefix": "ur",
		"body": [
			"const [state, dispatch] = React.useReducer(${1:someReducer}, {",
			"  $0",
			"})"
		]
	},
	"React.useRef": {
		"prefix": "urf",
		"body": [
			"const ${1:someRef} = React.useRef($0)"
		]
	},
	"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"
  },
  {
    "key": "cmd+a",
    "command": "explorer.newFile",
    "when": "filesExplorerFocus && !inputFocus"
  },
  {
    "key": "shift+cmd+a",
    "command": "explorer.newFolder",
    "when": "filesExplorerFocus && !inputFocus"
  },
  {
    "key": "ctrl+w",
    "command": "expand_region",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+w",
    "command": "undo_expand_region",
    "when": "editorTextFocus && editorHasSelection"
  }
]

EQuimper · 2018-05-24T16:30:37Z

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 · 2018-05-24T17:59:25Z

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 · 2018-05-24T19:09:30Z

GitLens

Import Cost

colorize

Code Outline

esausilva · 2018-05-24T19:42:43Z

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 · 2018-05-25T23:52:28Z

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

sagirk · 2018-06-14T13:50:09Z

@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 · 2018-06-14T13:54:22Z

@sagirk Thanks, I will try it

michaelgmcd · 2018-07-16T21:41:32Z

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 · 2018-09-12T16:28:56Z

This one extension is a game changer for console.log

Turbo Console Log

talves · 2019-01-14T16:22:39Z

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 · 2019-01-24T11:53:13Z

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

Ridermansb · 2019-03-29T15:29:11Z

@kentcdodds and about this...

matchai · 2019-03-29T15:32:11Z

@Ridermansb It looks like he's using Rocket:
https://matthewpalmer.net/rocket/

tjshipe · 2019-05-11T20:43:34Z

@kentcdodds Can you share the vscode snippet you used in your remote workshop for useReducer?

kentcdodds · 2019-05-11T22:19:32Z

Hi @tjshipe! Updated 💯

mohammedzamakhan · 2019-10-04T16:39:20Z

@kentcdodds instead of using comments in VS Code settings.json, you can actually create multiple workspaces and have workspace specific settings.json

kentcdodds · 2019-10-04T16:44:37Z

That requires the settings be inside the project right? The thing is that sometimes when I'm in the project I want it to have my livestream settings (like when I'm livestreaming) and other times I want it to have my normal settings.

mohammedzamakhan · 2019-10-04T16:55:24Z

No, its doesn't require you to have settings inside the project. You can add/remove folders from a workspace. Once you create a workspace (file format: .code-workspace) and keep the workspace file in which ever folder you want on your system. You can then go to workspace settings by "Preferences: Open Workspace Settings"

kentcdodds · 2019-10-04T17:04:18Z

Oh, I see. Thanks for letting me know. I think I'll stick with my current workflow because I think it's a bit faster/easier :) Thanks though!

enzime4u · 2019-10-16T20:19:39Z

Hi there, in this article [https://kentcdodds.com/blog/react-hooks-pitfalls] what theme are you using for the code snippets ? thank you ?

kentcdodds · 2019-10-16T20:58:40Z

It's inspired by the Night Owl theme.

kentcdodds closed this May 24, 2018

detrohutt added the packages label Jun 21, 2018

kentcdodds referenced this issue Jul 20, 2018

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

Closed

cassiocardoso referenced this issue Oct 23, 2018

VS Code extensions #2

Open

kentcdodds/ama forked from aviflombaum/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

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

This comment has been minimized.

michaelgmcd commented Jul 16, 2018

This comment has been minimized.

amb101 commented Sep 12, 2018

This one extension is a game changer for console.log

This comment has been minimized.

talves commented Jan 14, 2019

This comment has been minimized.

Oluwasetemi commented Jan 24, 2019 • edited

This comment has been minimized.

Ridermansb commented Mar 29, 2019

This comment has been minimized.

matchai commented Mar 29, 2019

This comment has been minimized.

tjshipe commented May 11, 2019

This comment has been minimized.

kentcdodds commented May 11, 2019

This comment has been minimized.

mohammedzamakhan commented Oct 4, 2019

This comment has been minimized.

kentcdodds commented Oct 4, 2019

This comment has been minimized.

mohammedzamakhan commented Oct 4, 2019

This comment has been minimized.

kentcdodds commented Oct 4, 2019

This comment has been minimized.

enzime4u commented Oct 16, 2019

This comment has been minimized.

kentcdodds commented Oct 16, 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

Oluwasetemi commented Jan 24, 2019 •

edited