При программировании мы часто редактируем текст напрямую для достижения наших целей. Такое ручное редактирование может быть медленным и подверженным ошибкам. В случае изменений, сохраняющих поведение (рефакторинг), автоматизация может сэкономить ваше время, обеспечить правильное выполнение преобразования и предупредить о возможных сбоях. Вы можете более прямо сообщить о своем намерении, например, «Я хочу извлечь это выражение в переменную», и позволить машине разобраться в деталях.
Я написал расширение для Visual Studio Code под названием P42 JavaScript Assistant, которое добавляет 60 автоматизированных рефакторингов, быстрых исправлений и очисток для JavaScript и TypeScript, чтобы сделать вашу жизнь проще. В этом сообщении блога представлен обзор различных действий кода и их категорий. Но сначала, вот пример того, как работает P42, чтобы дать вам представление о том, как он может вам помочь:
Основные рефакторинги
Visual Study Code уже содержит базовые рефакторинги, такие как Rename и Extract Function. P42 добавляет дополнительные рефакторинги или расширенные функции, такие как проверка безопасности.
- Извлечь переменную
- Извлечь подстроку в переменную
- Встроенная переменная
- Встроить в шаблон
- Встроенный возврат
Рефакторинг React и быстрые исправления
В React компоненты часто содержат JSX, расширение синтаксиса для JavaScript. P42 предоставляет кодовые действия, упрощающие работу с JSX и React:
- Извлечение функционального компонента React
- Добавить {…} в атрибут JSX и Удалить {…} из атрибута JSX
- Свернуть элемент JSX и Развернуть элемент JSX
- Окружить ‹›…‹/› и Удалить лишнее ‹›…‹/›
Модернизация ECMAScript
Экосистема Javascript быстро развивается благодаря отличной работе TC39. Тем не менее, трудно поддерживать кодовые базы в актуальном состоянии с помощью новых функций JavaScript, а кодмоды не всегда подходят из-за их значительного оттока и потенциальных поломок. P42 поддерживает как массовый рефакторинг кода, подобный codemod, так и более гибкую модернизацию кода для следующих обновлений:
ES2015
- Свернуть свойство объекта в стенографию
- Преобразовать .apply() для использования расширенного синтаксиса
- Преобразовать функцию в стрелочную функцию
- Преобразование функции в метод объекта
- Преобразовать цикл в For…Of
- Преобразовать Var в Let и Const
- Поднять значение по умолчанию в параметр
- Использовать String.startsWith() и Использовать String.endsWith()
- Использовать литерал шаблона
ES2016
ES2020
ES2021
Действия для логических выражений
Булеву логику может быть сложно читать, особенно по мере усложнения выражений. P42 предоставляет несколько рефакторингов, которые могут помочь вам упростить и разделить логические выражения, чтобы сделать их более понятными:
- Оператор переворота
- Инвертировать состояние
- Отрицание подтягивания и Отвержение прижимания
- Упростить двоичное выражение
- Удалить двойное отрицание
- Использовать сравнение == null
- Извлечь переменную
- Использовать необязательную цепочку
Действия для операторов If-Else
Операторы if-else являются центральным элементом многих программ. Их реструктуризация может повысить читабельность ваших программ, часто в сочетании с рефакторингом их условий:
- Поднимите заявление из условия «если-иначе
- Объединить вложенные операторы if
- Объединить вложенные If внутри Else в Else-If
- Отдельное условие во вложенное если
- Удалить пустой блок «Если» и Удалить пустой блок «Еще»
- Удалить лишнее
- Преобразовать If-Else в Guard Clause
- Преобразовать условное выражение в условное выражение и Преобразовать условное выражение в условное выражение
- Преобразовать If-Else в Switch
Преобразование синтаксиса
Часто раздражает внесение небольших синтаксических изменений при редактировании текста. Часто требуется отредактировать более одной позиции, и код ломается во время редактирования, что приводит к неправильным ошибкам и автозаполнениям, которые мешают. Вы можете выполнить следующие преобразования синтаксиса с помощью одного быстрого исправления P42:
- Добавить {…} в функцию стрелки и Удалить {…} из функции стрелки
- Добавить {…} в атрибут JSX и Удалить {…} из атрибута JSX
- Свернуть элемент JSX и Развернуть элемент JSX
- Свернуть свойство объекта в стенографию и Расширить сокращенное свойство
- Преобразовать доступ к свойствам в точечную нотацию и Преобразовать доступ к свойствам в скобочную нотацию
- Объявление разделенной переменной
Преобразование языковых элементов
Иногда вы хотите переключиться на элемент языка, который лучше подходит для того, что вы делаете. Например, цикл for..of более лаконичен и во многих ситуациях может заменить обычный цикл for.
- Преобразовать условное выражение в условное выражение и Преобразовать условное выражение в условное выражение
- Преобразовать функцию в стрелочную функцию и Преобразовать функцию в метод объекта
- Преобразовать If-Else в Switch
- Преобразовать цикл в For…Of и Преобразовать цикл в ForEach
- Перевести оператора в назначение и Вытащить оператора из назначения
- Преобразовать Var в Let и Const и Преобразовать Let в Const
Очистка кода
Очистка кода удаляет ненужный код. Такой код может быть получен в результате оттока кода, например, путем применения других рефакторингов, добавления новых функций или исправления ошибок. P42 показывает подсказки и автоматизирует очистку для следующих ситуаций:
- Удалить двойное отрицание
- Удалить пустой блок «Если» и Удалить пустой блок «Еще»
- Удалить лишнее
- Удалить ненужное условное выражение
- Удалить ненужное выражение
- Удалить ненужный фрагмент JSX
- Удалить ненужный литерал шаблона
- Упростить двоичное выражение
Другие действия
Если вы сочтете эти рефакторинги и действия полезными, вы можете установить P42 JavaScript Assistant из магазина VS Code.
Чтобы получить отзывы и обновления, вы можете найти P42 в Twitter или ЛинкедИн.
Ваше здоровье!
