Перейти к основному содержимому

VS Code

Download VS Code - visualstudio.com

keybindings.json​

// Place your key bindings in this file to override the defaults
[
  {
    "key": "cmd+l",
    "command": "expandLineSelection",
    "when": "textInputFocus"
  }
]

Add code to path​

Open the Command Palette (Cmd+Shift+P) and type 'shell command' to find the Shell:

Command: Install 'code' command in PATH command.

Преимущества​

  • Бесплатный и Кроссплатформенный
  • Терминал, Git, Дебаггер из коробки
  • Плагины большиой выбор для различных языков и задач
  • Кастомизация: настроить можно всё
  • Поддержка русского языка кому нужен
  • Авторизация через GitHub и синхронизация настроек

Plugins (must have)​

VS Code marketplace

Плагины​

  • GitLens
  • Auto Rename Tag - одновременное исправление парных тегов
  • GitLens
  • EditorConfig for VS Code - конфиг базовых настроек редактора
  • ES7+ React/Redux/React-Native snippets - JS сниппеты
  • ESLint - поддержка ESLint (JS/TS линтер)
  • GitLens (расширение для Git)
  • Git History
  • HTMLHint (html-валидатор);
  • Import Cost (показывает размеры пакетов или файлов)
  • JavaScript (ES6) code snippets
  • JavaScript and TypeScript Nightly - поддержка версий JavaScript and TypeScript grammar
  • Live server (открытие html-файлов в браузере, dev-server)
  • Live Share (шеринг кода)
  • markdownlint (md-линтер)
  • Mithril Emmet - сниппеты для быстрого разворачивание HTML, CSS, JSX
  • npm Intellisense - поддержка импортов npm-пакетов
  • NPM Scripts (запуск npm-скриптов)
  • Prettier - Code formatter - форматирование кода
  • Prettier ESLint
  • Russian Language Pack for Visual Studio Code
  • SVG (svg syntax)
  • Svg Preview (svg-превью)
  • Thunder Client (тестирование API)
  • Todo Tree (показывает список всех TODO в проекте)
  • TypeScript Debugger
  • vscode-pdf (поддержка pdf)
  • YAML

Дополнительно​

  • Docker (поддержка Docker)
  • REST Client (аналог Thunder Client)
  • SFTP (FTP-доступ к серверу прямо из редактора)
  • Database client (редактирование БД из редактора)
  • MJML (поддерка mjml файлов)
  • Sublime Text Keymap and Settings Importer (шорткаты как в Sublime Text 3)
  • Auto open Markdown preview (md-превью)
  • Template Generator (генерирует сниппеты кода)
  • Colonize (добавление точки с запятой Shift/Alt + Enter)
  • Tabnine: AI Chat & Autocomplete - AI чат в редакторе (платный)

Настройки для вёрстки (Prettier + HTMLHint)​

settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "prettier.singleQuote": true,
  "prettier.printWidth": 100,
  "prettier.bracketSameLine": true,
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "html.validate.scripts": true,
  "html.validate.styles": true,
  "html.suggest.html5": true,
  "html.format.wrapLineLength": 100,
  "html.format.wrapAttributes": "auto",
  "htmlhint.enable": true,
  "htmlhint.options": {
    "tagname-lowercase": true,
    "attr-lowercase": true,
    "attr-value-double-quotes": true,
    "doctype-first": true,
    "tag-pair": true,
    "spec-char-escape": true,
    "id-unique": true,
    "src-not-empty": true,
    "attr-no-duplication": true
  }
}

Shortcuts​

Shortcuts for VS Code

Редактор​

  • Cmd + Shift + P – Командный интерфейс
  • Cmd + Shift + N – Новое окно
  • Cmd + B – Сайдбар
  • Cmd + , – Настройки
  • Cmd + Q – Закрыть редактор
  • Ctrl + Cmd + F – Полноэкранный режим в MacOS
  • Cmd + Shift + P – Командный интерфейс
  • Ctrl + ` / Cmd + J – Открыть/закрыть терминал
  • Ctrl + Tab – Переключение между вкладками
  • Cmd + K + S – Список шорткатов
  • Ctrl + Shift + G – Git
  • Cmd + Shift + D – Debugger
  • Cmd + Shift + E – Editor
  • Cmd + Shift + X – Extentions
  • Cmd + Shift + R – Thunder Client
  • Cmd + \ – Divide window
  • Option + Z – Переносы строк
  • Option + H – Открыть список коммитов (git log)
  • Option + Esc – Открыть suggestions menu

Файлы​

  • Cmd + S/С/V/X – Сохранить/Копировать/Вставить/Вырезать
  • Cmd + P – Выбрать файл
  • Cmd + N – Новый файл
  • Cmd + O – Открыть файл
  • Cmd + W – Закрыть вкладку
  • Cmd + Shift + T – Открыть закрытую вкладку

Код​

  • Cmd + ←→ – Начало/Конец строки
  • Cmd + ⇅ – Начало/Конец файла
  • Cmd + Shift + ←→ – Выделить строку
  • Cmd + X – Вырезать строку
  • Cmd + Shift + K – Удалить строку
  • Alt + ←→ – Движение курсора по коду/тексту
  • Alt + Shift + ⇅ – Копирование строк
  • Alt + ⇅ – Перенос строки
  • Cmd + F/E/G – Поиск
  • Cmd + Alt + F – Поиск и исправление
  • Cmd + / – Комментирование
  • Tab – Табуляция
  • Shift + Tab, Cmd + [] – Обратная табуляция
  • Cmd + Alt + ⇅ / Cmd + ЛКМ – Новый курсор
  • Cmd + Shift + ⇅ – Выделить всё, что выше/ниже
  • Cmd + D – Умное выделение
  • Cmd + Shift + L – Выделить одинаковые
  • Ctrl + G – На строку
  • Option + Shift + F – Автоформатирование

Settings​

{
  "breadcrumbs.enabled": true, (default)

  "gitlens.advanced.messages": {
    "suppressResultsExplorerNotice": true,
    "suppressShowKeyBindingsNotice": true
  },
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "gitlens.keymap": "alternate",

  "editor.fontFamily": "Consolas",
  "editor.fontSize": 18,
  "editor.letterSpacing": 0, (default)
  "editor.lineHeight": 25, (23 default)
  "editor.formatOnPaste": true,
  "editor.minimap.enabled": false,
  "editor.minimap.scale": 2, (0 default)
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.snippetSuggestions": "top",
  "editor.renderControlCharacters": false,
  "editor.renderWhitespace": "all",
  "editor.rulers": [100],
  "editor.tabSize": 2,
  "editor.padding.top": 10,
  "editor.padding.bottom": 10,
  "editor.wordWrap": "on",

  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    // "javascript": "html",
  },

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

  "npm-scripts.showStartNotification": true,

  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "terminal.integrated.shell.linux": "/bin/bash",


  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.implicitProjectConfig.experimentalDecorators": true,

  "window.zoomLevel": 0,

    // local theme
  "workbench.colorTheme": "Monokai",
  "workbench.statusBar.visible": true,
  "files.insertFinalNewline": true
}

Configure Language в консоли - смена языка на англ (en)