Visual Studio Code

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).

Installation

1. Run in Terminal app:

brew cask install visual-studio-code

1. Add VS Code to your Dock by right-clicking on the icon and choosing Options, Keep in Dock.

Launching from the Command Line

You can also run VS Code from the terminal by typing 'code' after adding it to the path:

1. Launch VS Code.

2. Open the Command Palette (⇧⌘P) and type 'shell command' to find the Shell Command: Install 'code' command in PATH command.

3. Restart the terminal for the new $PATH value to take effect. You'll be able to type 'code .' in any folder to start editing files in that folder.

Customization

There are many things you can do to customize VS Code.

Change your theme

Keyboard Shortcut: ⌘K ⌘T

Theme: Material Theme Palenight High Contrast

Icon Theme: Material Theme Icons Palenight

Tune your settings

Keyboard Shortcut: ⌘,

editor.fontFamily: "Operator Mono"

editor.fontSize: 13

editor.fontLigatures: true

editor.formatOnPaste: true

editor.formatOnType: false

editor.renderWhitespace: "all"

editor.snippetSuggestions: "top"

editor.tabSize: 2

files.associations: { ".babelrc": "json5" }

files.autoSave: "onFocusChange"

explorer.decorations.badges: false

extensions.ignoreRecommendations: false

eslint.autoFixOnSave: true

git.autofetch: true

git.confirmSync: false

prettier.eslintIntegration: true

Install extensions

• Auto Close Tag

code --install-extension formulahendry.auto-close-tag

• Auto Rename Tag

code --install-extension formulahendry.auto-rename-tag

• Code Navigation

code --install-extension vikas.code-navigation

• Create Unique Ids

code --install-extension donjayamanne.createuniqueid

• DotENV

code --install-extension mikestead.dotenv

• ES7 React/Redux/GraphQL/React-Native snippets

code --install-extension dsznajder.es7-react-js-snippets

• ESLint

code --install-extension dbaeumer.vscode-eslint

• Flow Language Support

code --install-extension flowtype.flow-for-vscode

• Formatting Toggle

code --install-extension tombonnike.vscode-status-bar-format-toggle

• GitLens — Git supercharged

code --install-extension eamodio.gitlens

• Material Icon Theme

code --install-extension PKief.material-icon-theme

• Material Theme

code --install-extension Equinusocio.vsc-material-theme

• Prettier - Code formatter

code --install-extension esbenp.prettier-vscode

• Sublime Babel

code --install-extension joshpeng.sublime-babel-vscode