FAST START

Setting up a great VSC environment to get coding now.

This extension pack contains a lot of great extensions that I use often and I've also included a handful of themes.

I love Visual Studio Code and am always telling people about it.

The pain point for them seemed to be installing extensions (knowing what to install, setting up, etc). I wanted a way to share my own dev enviornment to help them get going instantly to remove the friction.

Languages I generally code with when using VSC:

• JavaScript + framework roulette (and Node/etc)
• PHP
• Python
• Ruby
• LUA
• Elixir
• C# / Unity3D (game development)

Some cool things to do with this pack:

• Use the project manager to organize your projects (shift+cmd and start typing "project" for more)
• Enjoy knowing when your code is getting out of control thanks to vscode-codemetrics.
• Get quick GIT info on each line thanks to Git Lens.
• Have a fast way to execute NPM scripts via a panel thanks to npm-script.
• Various intellisense and language packs to make working with the languages much better than the default experience.
• Nice highlighting for TODO: and FIXME: notes.
• Get import cost info for your JS files and find heavy imports thanks to import-cost.
• and more!

Recommended User Settings

Here's the user settings I'm currently using. Just open user settings in VSC and paste this JSON into there.

These settings are off a Mac, so if you're on Linux (woot) or Windows, change the editor.fontFamily to something appropriate. And dont' forget to peek at the overall settings because there's a ton you can tweak. These settings will get you running right away.

{
    "editor.fontFamily": "Monaco",
    "editor.fontSize": 14,
    "editor.rulers": [150],
    "editor.tabSize": 2,
    "editor.cursorStyle": "block",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "files.trimTrailingWhitespace": true,
    "workbench.iconTheme": "vscode-icons",
    "codemetrics.basics.CodeLensHiddenUnder": 5,
    "csharp.format.enable": false,
    "workbench.colorTheme": "eppz!",
    "codemetrics.basics.ComplexityLevelExtremeDescription": "Most fail, this one has.",
    "codemetrics.basics.ComplexityLevelHighDescription": "This one has failed ...",
    "codemetrics.basics.ComplexityLevelNormalDescription": "Starting to fail.",
    "codemetrics.basics.ComplexityLevelLowDescription": "Readable...",
    "codemetrics.basics.ComplexityLevelNormal": 8,
    "codemetrics.basics.ComplexityLevelHigh": 12,
    "material-icon-theme.showUpdateMessage": false,
    "vsicons.dontShowNewVersionMessage": true,
    "telemetry.enableTelemetry": false,
    "npm.enableScriptExplorer": true,
    "workbench.colorCustomizations": {
        "editorIndentGuide.activeBackground": "#20b0f3"
    },
    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true
    },
    "gitlens.historyExplorer.enabled": true,
    "auto-close-tag.SublimeText3Mode": true,
    "auto-close-tag.enableAutoCloseSelfClosingTag": true,
    "todohighlight.isCaseSensitive": true,
    "todohighlight.keywords": [
        "REVIEW:",
        {
            "text": "DEPRECATED:",
            "color": "white",
            "backgroundColor": "red",
            "overviewRulerColor": "grey"
        },
        {
            "text": "STUB:",
            "color": "#000",
            "backgroundColor": "#7EC0EE",
        }
    ],
    "materialTheme.fixIconsRunning": false,
}

Extensions Breakdown

Here's a list of extensions in this pack along with any relevant notes.

General Improvements

Bracket Pair Colorizer :: Colorizes brackets so it's easier to see what section you're in.

Beautify :: Makes it easier to beautify JS/SASS/HTML/CSS/JSON files.

Sort Lines :: Easy way to sort lines in the editor.

EditorConfig

Project Manager :: Easy way to create/manage projects.

Bookmarks :: Creates a way to bookmark a line of code.

Auto Close Tag :: Creates closing tags, which VSC doesn't do out the box.

Auto Rename Tag :: When you rename a tag, this will rename the closing tag as well.

Prettier :: Adds more code formatting functionality.

Code Outline :: Provides a code outline in explorer for many languages.

TODO Hightlight :: Adds highlighting when you put a TODO or FIXME in your code. You can add more words and styles too. If you're using the recommended settings, you already have those plus STUB, REVIEW and DEPRECATED.

Color Highlight :: Shows colors for hex colors it finds in code.

Debugger for Chrome :: Debugging JS code in Chrome.

Codemetrics :: Computes code complexity in JS / TS / LUA.

Formatting Toggle :: Quick way to toggle formatting. It puts a one-click toggle in the bottom bar.

Material Icons :: Provides icons for VSC.

Copy Relative Path :: Drop menu off file will now have 'Copy Path' that copies over the relative path of the file.

Path Intellisense :: Autocompletes filenames.

Partial Diff :: Ability to diff text sections in file or in multiple files.

DotJoshJohnson.xml :: XML formatting/tooling.

REST Client :: Gives you a way to do REST calls in VSC.

VSC THEMES

Base 16 Ocean Kit :: Light/Dark Base 16 Ocean Theme.

Material Theme :: Material-based themes.

One Dark Pro :: One Dark Pro Theme.

Eppz :: C# Unity Theme.

Nord :: Nord Theme.

Palenight Material :: Palenight Material Theme.

ANGULARJS / ANGULAR

Angular Language Service

Angular TS Snippets

Angular Highlighting

Angular Inline :: Syntax highlighting, code completion, etc.

C# / UNITY3D

ShaderLab :: Unity shaderlab.

Shader Languages Support :: Shader languages support.

C# XML Doc Comments :: Generates XML doc comments.

Unity Tools

C# Fix Format

Unity Debug :: Debugger extension for Unity.

C# Snippets

C# Support

Unity Code Snippets

Unity Snippets

DOCKER

Docker :: Adds syntax highlighting, commands, hover tips, and linting for Dockerfile and docker-compose files.

ELIXIR

Elixir Linting

Elixir Support

Elixir Support & Debugger

GIT

GIT Project Manager

GIT Lens :: Provides a good way to visualize GIT activity, such as providing GIT data at the ends of lines showing when it was last modified, commit message, etc.

GIT History :: GIT history, search, log and more.

GO

Go :: Rich Go language support for Visual Studio Code.

JAVASCRIPT MISC

Document This :: Automatically generate JSdoc comments for JS/TS files.

Jest :: A way to use Jest in the IDE.

ESLint :: Integrates ESLint into VSC.

Exports Autocomplete :: Helps VSC autocomplete JS exports.

StandardJS Styled Snippets :: More JS snippets.

Import Cost :: Displays the size of the imported package.

Javascript ES6 Code Snippets :: Even more JS snippets.

Stylelint :: Lints CSS/SCSS/Less with Stylelint.

Sass Indented :: Adds indented syntax ability for Sass.

TSLint :: Integrates TS linter.

LUA

Lua :: Add Lua language support.

NODE JS / NPM

NPM Scripts :: Adds commands to runs NPM scripts.

NPM Intellisense :: Add autocomplete for imports.

Search Node Modules :: Easy way to search the node modules folder.

PHP

PHP Intellisense :: Adds more PHP Intellisense.

PYTHON

Python :: Must-have for Python. Adds a lot of support (Intellisense, linting, debugging, unit tests, formatting, and more).

REACT

React Snippets :: React snippets.

RUBY

Ruby Solargraph :: Provides intellisense and inline doc for Ruby.

Ruby :: Language support and debugging.

VUE

Vue VSCode Snippets :: VueJS snippets.

Vuetr :: VueJS tooling (syntax highlighting, linting, debugging, formatting, etc).

Go forth & code...