Редактирование кода — неотъемлемая часть рабочего процесса разработки.. Он включает в себя все ваши действия в редакторе перед повторным запуском тестов или проверкой того, как ваши изменения влияют на приложение, над которым вы работаете:

  • Добавление, изменение и удаление кода
  • Исправление синтаксических ошибок
  • Исправление опечаток, например, в именах переменных и функций
  • Исправление ошибок и предупреждений линтера
  • Форматирование
  • Рефакторинг и реструктуризация кода

Наличие незначительных проблем в процессе редактирования кода может привести к потере времени и разочарованию.. Возможно, вам придется переключить контекст и потерять ход мыслей, когда, например, вы сразу не видите или не понимаете синтаксическую ошибку, пропускаете потенциальную ошибку или ваш редактор внезапно наполняется предупреждениями линтера, связанными с форматированием.

Код Visual Studio обеспечивает надежный опыт редактирования и предлагает множество расширений, которые вы можете установить, чтобы перейти на следующий уровень. Эти шесть расширений Visual Studio Code (пакет расширения) Помоги мне оставаться в потоке и быть продуктивным при редактировании кода JavaScript и TypeScript:

Пример второго пилота GitHub

Второй пилот GitHub предлагает завершение кода для вашей текущей должности редактора. Его предложения, сгенерированные ИИ, варьируются от завершения коротких операторов до полных функций и классов.

Второй пилот полезен, например, для автоматического генерация стандартного кода, обнаружение APIа также реализация общих шаблонов быстро. Это также полезно для отклеиваться когда не сразу понятно, какой код нужен для решения задачи.

Предложения по коду лишь иногда бывают идеальными и нуждаются в пересмотре и доработке, а часто я полностью отбрасываю их. Тем не менее, в целом Copilot повышает мою продуктивность и помогает оставаться в потоке.

Красивый логотип

Согласованное форматирование упрощает чтение кода и снижает вероятность случайного оттока в запросах на вытягивание. Однако ручное форматирование кода очень утомительно и чревато ошибками. Вы можете сэкономить время и поддерживать единый стиль своей кодовой базы с помощью автоматического форматирования кода.

красивее — это самоуверенный форматировщик кода, который используют многие проекты JavaScript и TypeScript. Он может форматировать JavaScript, TypeScript, JSON, HTML, JSX (React), CSS и многое другое. Поскольку он предлагает лишь несколько параметров конфигурации, использование Prettier может помочь избежать дискуссий о форматировании кода.

Вы можете настроить Prettier на автоматически форматировать код при сохранении файла. Если вы хотите свести к минимуму изменения существующих файлов, вы можете ограничить форматирование измененным кодом. Это параметры кода Visual Studio для настройки Prettier:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnSaveMode": "modificationsIfAvailable"
Войти в полноэкранный режим

Выйти из полноэкранного режима

Если вы часто используете сочетание клавиш для сохранения, например, после каждого небольшого изменения кода, исправления или рефакторинга, вы даже можете написать плохо отформатированный код и положиться на то, что Prettier исправит его без особых проблем.

пример быстрого lint-js
быстрый lint-js является отличной альтернативой ESLint когда вы в первую очередь хотите проверить правильность кода. Он предоставляет фиксированный набор правил для TypeScript и JavaScript и работает очень быстро.

Хотя quick-lint-js не обладает расширяемостью и параметрами конфигурации ESLint, он помогает вам быстро видеть распространенные ошибки и исправлять их. И поскольку он фокусируется на правильности, quick-lint-js не содержит самоуверенных правил стиля и очень хорошо работает с Prettier.

Пример проверки правописания кода

Не все ошибки приводят к синтаксическим ошибкам или потенциальным ошибкам. Легко сделать опечатку в имени переменной, функции или класса, не заметив ее. Однако в будущем это может привести к проблемам с возможностью поиска и удобочитаемостью. Проверка правописания кода помогает обнаружить и исправить опечатки рано.

Пример JS-помощника P42

Небольшие рефакторинги могут помочь реструктурировать и очистить ваш код при его редактировании. я разработал P42 JS-помощникчто обеспечивает множество автоматизированные действия кода а также предлагает рефакторинг которые сделают ваш код более читабельным и современным.

Вы можете открыть контекстное меню с действиями кода в редакторе, нажав на значок лампочки или используя сочетание клавиш быстрого доступа (Ctrl + . на Windows и Linux и + . на Маке). Вы можете использовать кодовые действия для быстрого и безопасного внесения семантических изменений в свой код.

Предложения по рефакторингу показывают места, где вы можете упростить или модернизировать свой код. Они могут помочь вам оставаться в курсе последних идиом JavaScript и лучших практик. Подчеркивание с тремя точками указывает на то, что доступно предложение по рефакторингу.

Пример объектива с ошибкой
По умолчанию редактор VS Code указывает на наличие ошибок, предупреждений и других подсказок различными подчеркиваниями. Вам нужно навести курсор мыши на подчеркнутый участок кода, чтобы прочитать сообщения. Этот дополнительный шаг может занять время и требует использования мыши.

Объектив ошибки показывает диагностические сообщения в той же строке в редакторе, экономя ваше время и удерживая вас в потоке. Вы можете различать разные уровни сообщений, используя их цвет. Ошибки отображаются красным цветом, предупреждения — желтым, информационные сообщения — синим, а подсказки — зеленым.

В дополнение к отображению ошибок TypeScript и JavaScript, окрашивание сообщений делает Error Lens отличным дополнением к quick-lint-js (ошибки, предупреждения), Code Spell Checker (информация) и P42 JS Assistant (подсказка). Вы можете переключать отображение различных типов сообщений с помощью кнопки Error Lens: Toggle команды в палитре команд.


Резюме

Редактирование кода занимает центральное место в разработке программного обеспечения. С помощью вышеуказанных расширений Visual Studio Code вы можете расширить возможности редактирования и упростить написание высококачественного кода. Вы можете удобно установить расширения, используя Пакет расширения для редактирования JavaScript и TypeScript.