Совершенствуйте свои навыки редактирования кода

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

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

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

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

Второй пилот GitHub

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

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

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

красивее

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

Prettier — это самоуверенный форматировщик кода, который используют многие проекты 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

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

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

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

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

P42 JS-помощник

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

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

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

Объектив ошибки

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

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

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

Краткое содержание

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