Skip to main content

Редакторы кода

Visual Studio Code (VS Code)​

Download VS Code - visualstudio.com

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

Most wanted plugins​

  • JavaScript and TypeScript Nightly - поддержка версий JavaScript and TypeScript grammar
  • ESLint - поддержка ESLint (JS/TS линтер)
  • ES7+ React/Redux/React-Native snippets - JS сниппеты
  • Auto Rename Tag - одновременное исправление парных тегов
  • EditorConfig for VS Code - конфиг базовых настроек редактора
  • Prettier - Code formatter - форматирование кода
  • npm Intellisense - поддержка импортов npm-пакетов
  • Mithril Emmet - сниппеты для быстрого разворачивание HTML, CSS, JSX
  • Tabnine: AI Chat & Autocomplete - AI чат в редакторе
  • Import Cost (показывает размеры пакетов или файлов)
  • Live server (открытие html-файлов в браузере, dev-server)

Helpful​

  • Git History (Git-client)
  • GitLens (расширение для Git)
  • NPM Scripts (запуск npm-скриптов)
  • TODO Tree (показывает список всех TODO в проекте)
  • Live Share (шеринг кода)
  • Docker (поддержка Docker)
  • markdownlint (md-линтер)

Plugins (optional)​

  • Thunder Client (тестирование API)
  • REST Client (аналог Thunder Client)
  • Svg Preview (svg-превью)
  • SFTP (FTP-доступ к серверу прямо из редактора)
  • vscode-pdf (поддержка pdf)
  • SVG (svg syntax)
  • Database client (редактирование БД из редактора)
  • TailWind CSS IntelliSense (Css IntelliSence)
  • MJML (поддерка mjml файлов)
  • Sublime Text Keymap and Settings Importer (шорткаты как в Sublime Text 3)
  • Auto open markdown preview (md-превью)
  • Template Generator (генерирует сниппеты кода)
  • GitHub Copilot (AI - не работает в РФ)
  • Colonize (добавление точки с запятой Shift/Alt + Enter)

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)

Sublime Text 3​

Download Sublime Text 3 - sublimetext.com

Shortcuts​

Shortcuts for Sublime

  • Ctrl + ` - Открыть консоль
  • Ctrl + Shift + P - Командная строка
  • Ctrl + P - Перейти к файлу
  • Ctrl + Shift + N - Новое окно
  • Ctrl + B - Сайдбар
  • Alt + ↑↓ - Переместить строку
  • F11 - Полноэкранный режим
  • Ctrl + \ - Разделение окна

Package control:​

  1. Открыть консоль в Sublime text 3 (View - Show console)
  2. Ctrl + Shift + P - Install Package control

Packages​

  • Emmet
  • AutoFileName - пути к файлам
  • BracketHighlighter - подсветка скобок и парных тегов
  • A File Icon - иконки для файлов в сайдбаре
  • ColorHighliter - подсветка цветов в CSS
  • Terminal - открывать терминал командой
  • LESS - поддержка синтаксиса
  • SASS - поддержка синтаксиса
  • Babel - поддержка синтаксиса
  • SideBarEnhancements - расширение функций сайдбара
  • Bootstrap 3 Snippets
  • Bootstrap 4 Snippets
  • JavaScript Snippets - автозаполнение
  • JavaScript Completions - автозаполнение хорошее
  • jQuery Snippets
  • CodeFormatter - форматирование
  • HTML Minifier - минификатор HTML, CSS, JS
  • BufferScroll - запоминает сворачивание блоков
  • EditorConfig - запоминает форматирование кода (download)
  • SublimeLinter - Линтер
  • SublimeLinter - eslint - JS-линтер

Settings​

{
  "color_scheme": "Mariana.sublime-color-scheme",
  "default_line_ending": "unix",
  "draw_white_space": "all",
  "font_face": "Consolas",
  "line_padding_top": 1,
  "line_padding_bottom": 1,
  "font_size": 13,
  "margin": -3,
  "tab_size": 2,
  "theme": "Default.sublime-theme",
  "word_separators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?",
  "word_wrap": true
}

Webstorm​

jetbrains.com - Скачать

Shortcuts​

  • Ctrl + Alt + S - Настройки
  • Ctrl + Alt + A - Команды
  • Ctrl + Shift + L - Автоформатирование
  • Ctrl + Shift + N - Поиск по файлу
  • Alt + F12 - Терминал
  • Ctrl + E - Недавние файлы
  • Ctrl + F4 - Закрыть вкладку
  • Ctrl + ~ - Меню настроек оформления
  • Shift + Shift - Поиск везде

.editorconfig​

https://editorconfig.org/

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true