{ Ellis Min }

[VSCode]: Settings

05/19/2020

VS Code Tips

Enable code . inside terminal

  • Open command pallette with (cmd + shift + P)
  • Type in shell command to find Shell Command: Install 'code' command in PATH

Shortcuts

  • Navigation
    • Cmd + shift + E: Open Explorer
    • Ctrl + shift + G: Open GitHub GUI
    • Cmd + B: Open/close sidebar
    • Ctrl + Shift + ->/<- Expand selection
    • Creating a new file: Open explorer with cmd + shirt + E. Select folder. Open pallet with cmd + shift + p. Type New file or New folder
    • Cmd + J: Open/close bottom navigation panel
    • Cmd + `: Open/close terminal & focus
    • Cmd + 1: Focus on Editor
    • Cmd + 2: Focus on 2nd Editor (or open it)
  • Moving around
    • Jumpy: need to set shortcut. Shift + Enter to start jumpy mode. Space bar to exit jumpy mode
    • command + d to select other words
    • Multi Line Tricks plugin
      • Cmd + shift + L
    • Cmd + X to delete the whole line
  • Shortcuts
    • type clg to show auto complete for console.log
    • command pallet: cmd + shift + p. Type Fold level 2 to display function names only

Plugins

  • Auto Close Tag
  • Babel JavaScript
  • Bittersweet Theme
  • Code Spell Checker
  • Color Highlight
  • Community Material Theme
  • ES7 React/Redux/Graphql Snippets
  • ESLint
  • Highlight Matching Tag
  • Live Server
  • Lorem ipsum
  • Markdown Preview Enhanced
  • Material Icon Theme
  • Material Theme
  • Material Theme Icons
  • Path Intellisense
  • Prettier - Code formatter
  • pug formatter
  • Python
  • Rainbow Brackets
  • Reactjs code snippets
  • Snazzy Operaotr (theme)
  • Spirited Away Color Theme
  • TODO Highlight
  • vscode-styled-components
  • Git lens
  • Project manager

Setting

To change the setting, open the vs code setting with cmd + , then search for json. Click edit in setting.json under Launch panel.

Enable emmet

JSON
"emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

Changing colors of terminal

When using snazzy operator theme, undefined keyword doesn't show unless you tweak the terminal color with

JSON
"workbench.colorCustomizations": {
    "terminal.ansiBrightBlack": "#b57575"
  },

Personal setting

JSON
{
  "update.mode": "none",
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": true,
  "workbench.editor.enablePreview": false,
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.colorCustomizations": {
    "terminal.ansiBrightBlack": "#b57575"
    // "terminal.background":"#000",
    // "terminal.foreground":"#E0E0E0",
    // "terminalCursor.background":"#E0E0E0",
    // "terminalCursor.foreground":"#E0E0E0",
    // "terminal.ansiBlack":"#000000",
    // "terminal.ansiBlue":"#6FB3D2",
    // "terminal.ansiBrightBlue":"#6FB3D2",
    // "terminal.ansiBrightCyan":"#76C7B7",
    // "terminal.ansiBrightGreen":"#A1C659",
    // "terminal.ansiBrightMagenta":"#D381C3",
    // "terminal.ansiBrightRed":"#FB0120",
    // "terminal.ansiBrightWhite":"#FFFFFF",
    // "terminal.ansiBrightYellow":"#FDA331",
    // "terminal.ansiCyan":"#76C7B7",
    // "terminal.ansiGreen":"#A1C659",
    // "terminal.ansiMagenta":"#D381C3",
    // "terminal.ansiRed":"#FB0120",
    // "terminal.ansiWhite":"#E0E0E0",
    // "terminal.ansiYellow":"#FDA331"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "cSpell.userWords": [
    "add",
    "afterbegin",
    "beforeend",
    "boxshadow",
    "btns",
    "btwn",
    "captcha",
    "cart",
    "chmod",
    "codepen",
    "collapsable",
    "component",
    "csrf",
    "deauthenticate",
    "destructured",
    "dmin",
    "dropdown",
    "droppable",
    "ellismin",
    "elmt",
    "emin",
    "frontmatter",
    "geoip",
    "graphiql",
    "hacky",
    "ingred",
    "iphone",
    "kakao",
    "launchd",
    "linkedin",
    "mern",
    "metastring",
    "middlewares",
    "minimalistic",
    "mkdir",
    "mult",
    "noopener",
    "noreferrer",
    "nums",
    "originalname",
    "page",
    "pageview",
    "personalizations",
    "polyfill",
    "predeploy",
    "ramenkid",
    "recaptcha",
    "resave",
    "result",
    "sendgrid",
    "signin",
    "signup",
    "sitekey",
    "staatliches",
    "steelblue",
    "templating",
    "uncategorized",
    "uniqid",
    "unmount",
    "unmounting",
    "unsubscription",
    "upsert",
    "will"
  ],
  "window.zoomLevel": 1,
  "liveServer.settings.donotShowInfoMsg": true,
  "terminal.integrated.shell.osx": "/bin/zsh",
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.iconTheme": "material-icon-theme",


  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "liveServer.settings.donotVerifyTags": true,
  "workbench.colorTheme": "Snazzy Operator",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "files.associations": {
    // "*.ejs": "html"
    // "*.md": "mdx"
    "*.mdx": "markdown"
  }
}

Secondary vscode setting

JSON
{
  "workbench.colorTheme": "Snazzy Operator",
  "workbench.colorCustomizations": {
    "terminal.ansiBrightBlack": "#b57575"
  },
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "window.zoomLevel": 0,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.iconTheme": "material-icon-theme",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.tabSize": 2,
  "launch": {
    "configurations": [],
    "compounds": []
  }
}

WRITTEN BY

Ellis Min

Keeping a record

GitHub