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 · 12 comments

Comments

Projects
None yet
@kentcdodds
Copy link
Owner

kentcdodds 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

kentcdodds 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.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"
  }
]

@kentcdodds kentcdodds closed this May 24, 2018

@EQuimper

This comment has been minimized.

Copy link

EQuimper 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

palashmon 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

jfsiii commented May 24, 2018

@esausilva

This comment has been minimized.

@Rolando-Barbella

This comment has been minimized.

Copy link

Rolando-Barbella 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

sagirk commented Jun 14, 2018

@kentcdodds @esausilva

Replace

dzannotti.vscode-babel-coloring

With

mgmcdermott.vscode-language-babel

@esausilva

This comment has been minimized.

Copy link

esausilva 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

michaelgmcd 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

amb101 commented Sep 12, 2018

This one extension is a game changer for console.log





@talves

This comment has been minimized.

Copy link

talves 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

Oluwasetemi 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment