Visual Studio Code

Visual Studio Code is a distribution of the Code.

Marketplace

One place for all extensions for Visual Studio, Azure DevOps Services, Azure DevOps Server and Visual Studio Code.

Extensions

Essential extensions

Recommended extensions

  • One Dark Pro
    Atom‘s iconic One Dark theme for Visual Studio Code

  • vscode-icons
    Icons for Visual Studio Code

  • Auto Close Tag
    Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text

  • Auto Rename Tag
    Auto rename paired HTML/XML tag

  • File Utils
    A convenient way of creating, duplicating, moving, renaming and deleting files and directories.

  • Indent 4-to-2
    Convert indentation from tab or 4 spaces into 2 spaces

  • Rainbow CSV
    Highlight CSV and TSV files, Run SQL-like queries

  • Markdown Preview Mermaid Support
    Adds Mermaid diagram and flowchart support to VS Code's builtin markdown preview

Settings

settings.json

{
    "files.associations": {
        "*.vue": "html",
        "*.ejs": "html",
        "*.jinja": "html",
        "*.jsx": "javascriptreact",
        "*.tsx": "typescriptreact"
    },

    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/*.code-search": true,
        "**/package-lock.json": true,
        "**/yarn-lock.json": true,
        "**/Gemfile.lock": true,
        "**/.history": true
    },

    "editor.formatOnSave": false,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
    "editor.tabSize": 4,
    "editor.defaultFormatter": null,

    "emmet.includeLanguages": {
        "php": "html",
        "ejs": "html",
        "vue-html": "html",
        "vue": "html",
        "jinja-html": "html",
        "jinja": "html",
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    },
}

Configure file associations to languages (e.g. "*.extension": "html"). These have precedence over the default associations of the languages installed.

{
    "files.associations": {
        "*.vue": "html",
        "*.ejs": "html",
        "*.jinja": "html",
        "*.jsx": "javascriptreact",
        "*.tsx": "typescriptreact"
    },
}

Configure glob patterns for excluding files and folders in fulltext searches and quick open. Inherits all glob patterns from the files.exclude setting.

{
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/*.code-search": true,
        "**/package-lock.json": true,
        "**/yarn-lock.json": true,
        "**/Gemfile.lock": true,
        "**/.history": true
    },
}

Format a file on save. A formatter must be available, the file must not be saved after delay, and the editor must not be shutting down.

{
    "editor.formatOnSave": false,
}

Insert spaces when pressing Tab. This setting is overridden based on the file contents when editor.detectIndentation is on.

{
    "editor.insertSpaces": true,
}

Controls whether editor.tabSize# and #editor.insertSpaces will be automatically detected when a file is opened based on the file contents.

{
    "editor.detectIndentation": false,
}

The number of spaces a tab is equal to. This setting is overridden based on the file contents when editor.detectIndentation is on.

{
    "editor.tabSize": 4,
}

Defines a default formatter which takes precedence over all other formatter settings. Must be the identifier of an extension contributing a formatter.

{
    "editor.defaultFormatter": null,
}

Enable Emmet abbreviations in languages that are not supported by default. Add a mapping here between the language and Emmet supported language.

{
    "emmet.includeLanguages": {
        "php": "html",
        "ejs": "html",
        "vue-html": "html",
        "vue": "html",
        "jinja-html": "html",
        "jinja": "html",
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    },
}

Uninstall

Step1. Run the script

rm -rf $HOME/Library/Application\ Support/Code
rm -rf $HOME/.vscode

Step2. Remove VSCode from application