Skip to content

Latest commit

 

History

History
111 lines (69 loc) · 4.76 KB

README.md

File metadata and controls

111 lines (69 loc) · 4.76 KB

VS Code setup

The goal of this document is to list out configurations and extensions that I use with VS Code. It aims to be more of a concentrated list and less of a "here's the firehose" awesome-list (Even though I like awesome lists and all of the work that goes into making them 👏)

After using Atom for about 2 years, I have switched to using VS Code. Why? VS Code is fast. It's almost on par with Sublime Text. It also comes with a few more "batteries included" ⚡️ features, like a terminal and git integration. With all of this being said, this document contains opinions. If you agree with them, great! If not, that's also great!

Starting out

Shortcuts

If you're coming from Atom, you won't feel too far from home 😉

  • Cmd + P to open any file
  • Cmd + Shift + P to access the command palette
Side Bar

The following commands are for switching out the view for the Side Bar on the left

  • Cmd + Shift + E show file explorer
  • Cmd + Shift + F show find/replace (global)
  • Ctrl + Shift + G show git tools
  • Cmd + Shift + D show debugging tools
  • Cmd + Shift + X show extensions menu
Terminal

Ctrl + (backtick) although, you'd probably have an easier time remapping this to something like Ctrl + '

Easy, just add a new shortcut

Cmd + K, Cmd + S

{ "key": "ctrl+'", "command": "workbench.action.terminal.toggleTerminal" }

Set your User Settings

Open the user settings file, Cmd + ,. Here, you'll find all of the settings that can be modified for VS Code. Once you find one that you want to modify, click next to it and it will be copied over into your own settings file. A few good custom settings to start with are font size and font family.

{
  "editor.fontFamily": "Operator Mono",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "workbench.activityBar.visible": false,
  "javascript.validate.enable": false
}

Why do you disable javascript validation?

¯\_(ツ)_/¯ I rely on ESLint

Markdown

If GitHub markdown styles are your thing, check this out.

The Sweet Setup

Now, for the list of extensions. I'll list links to the VSCode marketplace, as well as the install commands. To install any of these, simply press Cmd + P and paste the install command listed next to each extension.

Workspace enhancements

  • ESLint

    ext install vscode-eslint

    If you use a .eslintrc file and have ESLint installed either in the project locally or globally, then this just works.

  • Git Project Manager

    ext install git-project-manager

    Damn, this is awesome! Cmd + Option + P and start typing a .git project. Hit Enter to switch to that project in the same window. This supports customization like folder paths to monitor as well as a maximum recursion level to look for .git projects.

  • NPM Intellisense

    ext install npm-intellisense

    Completions of node modules in your package.json dependencies? Check.

  • Path Intellisense

    ext install path-intellisense

    Autocompletion of filenames. And, it even drops the .js if you are importing a module.

  • Code Runner

    ext install code-runner

    Handy. Highlight code. Run it! It even lets you customize how certain languages should run.

  • Advanced New File

    ext install advanced-new-file

    Cmd + Option + N, select a relative directory. Done.

  • Open in GitHub

    ext install vscode-open-in-github

    Nice shortcuts when you need to quickly open a file on GitHub (either in the current branch or master). This will even jump to the line number.

Language support and syntax highlighting

  • Docker Support

    ext install vscode-docker

    Create dockerfiles. Syntax highlighting and linting. And, Intellisense on image names from Dockerhub.com

  • GraphQL

    ext install graphql

    Syntax highlighting and code snippets for GraphQL

  • File Icons

    ext install file-icons

    Port of file-icons package for Atom