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)