Visual Studio Code - редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как "лёгкий" редактор кода для кроссплатформенной разработки веб- и облачных приложений. Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, IntelliSense и средства для рефакторинга. Имеет широкие возможности для кастомизации: пользовательские темы, сочетания клавиш и файлы конфигурации. Распространяется бесплатно, разрабатывается как программное обеспечение с открытым исходным кодом, но готовые сборки распространяются под проприетарной лицензией.

VSCode основан на Electron - фреймворк, позволяющий с использованием Node.js разрабатывать настольные приложения, которые работают на движке Blink. Несмотря на то, что редактор основан на Electron, он не использует редактор Atom. Вместо него реализуется веб-редактор Monaco, разработанный для Visual Studio Online.

VSCode shortcuts:

  • ctrl + shift + p | command palette (show all commands)
  • ctrl + p | find a specific file in your current folder
  • ctrl + , | go to settings
  • ctrl + ` | toggle terminal
  • ctrl + b | toggle sidebar
  • f11 | fullscreen mode
  • ctrl + k, z | zen mode
  • alt + click | multi cursor
  • ctrl + d | add selection to next find match
  • alt + up arrow | move the selected code one line up
  • alt + down arrow | move the selected code one line down
  • shift + alt + arrow | copy line
  • ctrl + / | insert comment
  • ctrl + f | search in file
  • ctrl + h | replace in file
  • ctrl + shift + f | search tab, find in files
  • ctrl + shift + h | search tab, replace in files
  • f5 | start debugging
  • ctrl + l | select the current line in the cursor
  • alt | show definition
  • f12 | go to definition

VSCode installed/enabled extensions:

- Better Comments [Aaron Bond]

Improve your code commenting by annotating with alert, informational, TODOs, and more.

- Code Spell Checker [Street Side Software]

Spelling checker for source code.

- Color Highlight [Sergii Naumov]

Highlight web colors in your editor.

- CSS Peek [Pranay Prakash]

Allow peeking to css ID and class strings as definitions from html files to respective CSS.

- EditorConfig for VS Code [EditorConfig]

EditorConfig Support for Visual Studio Code.

- ESLint [Dirk Baeumer]

Integrates ESLint JavaScript into VS Code.

- Highlight Matching Tag [vincaslt]

Highlights matching closing and opening tags.

- Image preview [Kiss Tamás]

Shows image preview in the gutter and on hover.

- indent-rainbow [oderwat]

Makes indentation easier to read.

- IntelliSense for CSS class names in HTML [Zignd]

CSS class name completion for the HTML class attribute based on the definitions found in your workspace.

- JavaScript (ES6) code snippets [charalampos karypidis]

Code snippets for JavaScript in ES6 syntax.

- Live Server [Ritwick Dey]

Launch a development local Server with live reload feature for static & dynamic pages.

- Material Theme [Equinusocio]

The most epic theme now for Visual Studio Code.

- npm Intellisense [Christian Kohler]

Visual Studio Code plugin that autocompletes npm modules in import statements.

- Path Intellisense [Christian Kohler]

Visual Studio Code plugin that autocompletes filenames.

- Stylelint [stylelint]

Modern CSS/Less/SCSS linter.

- Trailing Spaces [Shardul Mahadik]

Highlight trailing spaces and delete them in a flash.

- vscode-icons [VSCode Icons Team]

Icons for Visual Studio Code.

- Vue Language Features (Volar) [Vue]

Language support for Vue 3.

VSCode settings.json:

{
    "workbench.colorTheme": "Material Theme",
    "workbench.iconTheme": "vscode-icons",
    "workbench.startupEditor": "none",
    "workbench.editor.enablePreview": false,
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
    "editor.fontFamily": "'Fira Code', 'Consolas', 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.linkedEditing": true,
    "explorer.openEditors.visible": 0,
    "files.insertFinalNewline": true,
    "files.autoSave": "afterDelay",
    "files.exclude": {
        "**/.DS_Store": true,
        "**/.git": true,
        "**/.hg": true,
        "**/.svn": true,
        "**/CVS": true,
        "node_modules": true,
        ".vscode": true
    },
    "indentRainbow.colors": [
        "rgba(255,255,64,0.07)",
        "rgba(127,255,127,0.07)",
        "rgba(255,127,255,0.07)",
        "rgba(79,236,236,0.07)"
    ],
    "trailing-spaces.highlightCurrentLine": false,
    "trailing-spaces.includeEmptyLines": false,
    "trailing-spaces.trimOnSave": true,
    "html.autoClosingTags": true,
    "javascript.autoClosingTags": true,
    "liveServer.settings.port": 0,
    "editor.codeLens": false
}