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.

- 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 [Microsoft]

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.

- IntelliCode [Microsoft]

AI-assisted development.

- IntelliCode API Usage Examples [Microsoft]

See relevant code examples from GitHub for over 100K different APIs right in your editor.

- 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.

- Live Server [Ritwick Dey]

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

- Monokai Pro [monokai]

Professional dark & light theme + icon pack, from the author of the original Monokai color scheme.

- 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.

- Pylance [Microsoft]

A performant, feature-rich language server for Python in VS Code.

- Python [Microsoft]

Python language support with extension access points for IntelliSense (Pylance), Debugging (Python Debugger), linting, formatting, refactoring, unit tests, and more.

- Python Debugger [Microsoft]

Python Debugger extension using debugpy.

- Stylelint [stylelint]

Official Stylelint extension for Visual Studio Code.

- Vue - Official [Vue]

Language support for Vue.

VSCode settings.json:

{
    "workbench.tips.enabled": false,
    "workbench.colorTheme": "Monokai Pro (Filter Machine)",
    "workbench.iconTheme": "Monokai Pro (Filter Machine) Icons",
    "workbench.startupEditor": "newUntitledFile",
    "workbench.editor.enablePreview": false,
    "workbench.sideBar.location": "right",

    "explorer.compactFolders": false,
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,

    "editor.fontFamily": "'Fira Code', 'Consolas', 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.fontSize": 14,
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
    "editor.smoothScrolling": true,
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.lightbulb.enabled": "off",
    "editor.hover.enabled": false,
    "editor.linkedEditing": true,
    "editor.minimap.enabled": true,
    "editor.codeLens": false,
    "editor.rulers": [80, 120],

    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": 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)"
    ],

    "html.autoClosingTags": true,
    "javascript.autoClosingTags": true,
    "update.showReleaseNotes": false,
    "extensions.ignoreRecommendations": true
}