Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

What extensions do you use in VSCode? #406

Closed
kentcdodds opened this issue May 24, 2018 · 22 comments

Comments

@kentcdodds
Copy link
Owner

commented 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

This comment has been minimized.

Copy link
Owner Author

commented 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.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"
  }
]
@kentcdodds kentcdodds closed this May 24, 2018
@EQuimper

This comment has been minimized.

Copy link

commented 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

This comment has been minimized.

Copy link

commented 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:

Join Lines

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

@jfsiii

This comment has been minimized.

Copy link

commented May 24, 2018

@esausilva

This comment has been minimized.

@Rolando-Barbella

This comment has been minimized.

Copy link

commented May 25, 2018

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

This comment has been minimized.

Copy link

commented Jun 14, 2018

@kentcdodds @esausilva

Replace

dzannotti.vscode-babel-coloring

With

mgmcdermott.vscode-language-babel

@esausilva

This comment has been minimized.

Copy link

commented Jun 14, 2018

@sagirk Thanks, I will try it

@detrohutt detrohutt added the packages label Jun 21, 2018
@michaelgmcd

This comment has been minimized.

Copy link

commented 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

This comment has been minimized.

Copy link

commented Sep 12, 2018

This one extension is a game changer for console.log





@talves

This comment has been minimized.

Copy link

commented 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()
@Oluwasetemi

This comment has been minimized.

Copy link

commented Jan 24, 2019

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

@Ridermansb

This comment has been minimized.

Copy link

commented Mar 29, 2019

@kentcdodds and about this...

Screen Shot 2019-03-29 at 12 28 32

@matchai

This comment has been minimized.

Copy link

commented Mar 29, 2019

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

@tjshipe

This comment has been minimized.

Copy link

commented May 11, 2019

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

@kentcdodds

This comment has been minimized.

Copy link
Owner Author

commented May 11, 2019

Hi @tjshipe! Updated 💯

@mohammedzamakhan

This comment has been minimized.

Copy link

commented Oct 4, 2019

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

@kentcdodds

This comment has been minimized.

Copy link
Owner Author

commented Oct 4, 2019

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

This comment has been minimized.

Copy link

commented Oct 4, 2019

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

This comment has been minimized.

Copy link
Owner Author

commented Oct 4, 2019

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

This comment has been minimized.

Copy link

commented Oct 16, 2019

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

@kentcdodds

This comment has been minimized.

Copy link
Owner Author

commented Oct 16, 2019

It's inspired by the Night Owl theme.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.