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

Cursor

Редактор кода на основе VS Code (fork) со встроенным ИИ-анализом на базе Chat-GPT.

Установка - download

После установки может подтянуть все существующие настройки (settings.json) и плагины из VS Code. Имеет вид подобный VS Code, но с фокусом на взаимодействие с ИИ-ассистентом.

Интерфейс:

Основной сайдбар (слева) - Cmd + B
Консоль (снизу) - Ctrl + ё
ИИ-панель (справа) - Cmd + Option + B

Настройка ИИ-ассистента

Иконка шестирёнки справа-сверху.

General:
Manage Account - регистрируемся как пользователь через GitHub, Google или по email
Privacy mode (Legacy) - нужно переключить на Privacy mode c Share data, чтобы ваш код оставался приватным
Models: выбор моделей
Rules & Memories: кастомные настройки в виде самописных наборов правил для ИИ (User rules & project rules)

Отвечай на русском языке
Предложенный код должен быть простым и понятным для чтения
Учитывай линтеры для оформления кода
Предлагай ссылки на оффициальную документацию

Проект на TypeScript + React + Redux
Используй Material-UI компоненты
Стили пиши в SCSS модулях (.module.scss)
Следуй camelCase для переменных, PascalCase для компонентов
Типизируй все пропсы через TypeScript интерфейсы
Используй функциональные компоненты с хуками

Можно выключить spellCheck, так как подсвечивает ошибки синим

"cSpell.enabled": false

keybindings.json

// Place your key bindings in this file to override the defaults
[
  // Cursor AI
  {
    "key": "cmd+i",
    "command": "composerMode.agent"
  },
  {
    "key": "cmd+e",
    "command": "composerMode.background"
  },

  // возвращаем так как в VS Code
  {
    "key": "cmd+shift+k",
    "command": "editor.action.deleteLines",
    "when": "textInputFocus && !editorReadonly"
  },
  {
    "key": "cmd+l",
    "command": "expandLineSelection",
    "when": "textInputFocus"
  },

  // На всякий случай снимаем конфликтующие бинды Cursor (укажите точные команды из UI)
  { "key": "cmd+l", "command": "-cursor.inlineChat" },
  { "key": "cmd+shift+k", "command": "-cursor.composer.toggle" }
]

Как пользоваться

Можно писать всё что угодно в ИИ панель, можно указывать файлы (через @)
Прямо в открытом файле можно использовать сочетания клавиш Cmd + L (чтобы что-то спросить) и Cmd + K (для генерации кода)
Cmd + I - сворачивание / разворачивание ИИ-меню
Cmd + Е - создание нового чата

Visual Studio Code (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

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

Открыть консоль в Sublime text 3 (View - Show console)
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

Cursor​

Установка - download​

Настройка ИИ-ассистента​

keybindings.json​

Как пользоваться​

Visual Studio Code (VS Code)​

keybindings.json​

Add code to path​

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

Plugins (must have)​

Most wanted plugins​

Helpful​

Plugins (optional)​

Shortcuts​

Редактор​

Файлы​

Код​

Settings​

Sublime Text 3​

Shortcuts​

Package control​

Packages​

Settings​

Webstorm​

Shortcuts​

.editorconfig​

Cursor

Установка - download

Настройка ИИ-ассистента

keybindings.json

Как пользоваться

Visual Studio Code (VS Code)

keybindings.json

Add code to path

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

Plugins (must have)

Most wanted plugins

Helpful

Plugins (optional)

Shortcuts

Редактор

Файлы

Код

Settings

Sublime Text 3

Shortcuts

Package control

Packages

Settings

Webstorm

Shortcuts

.editorconfig