85 помощников по коду JavaScript для Visual Studio Code

Программирование на JavaScript в таких редакторах, как Visual Studio Code, обычно требует большого количества ручного редактирования текста с редкими сочетаниями клавиш для копирования и вставки или изменениями с несколькими курсорами.

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

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

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

• Рефакторинг ядра
• Вспомогательный код для React
• Вспомогательный код для логических выражений
• Вспомогательный код для операторов ветвления
• Помощь в коде для массивов и циклов
• Вспомогательный код для функций и методов
• Вспомогательный код для строк и литералов шаблонов
• Вспомогательный код для переменных
• Вспомогательный код для преобразования синтаксиса
• Модернизация JavaScript
• Модернизации Лодаша
• Чистка кода
• Другие вспомогательные коды

Вспомогательные коды, принадлежащие к нескольким категориям, появляются несколько раз.

Основные рефакторинги

Visual Study Code уже содержит базовые рефакторинги, такие как Rename и Extract Function. Помощник JavaScript добавляет дополнительные рефакторинги или расширенные функции, такие как проверка безопасности:

• Извлечь выделенный текст в переменную: извлечь выделенный текст (включая выражения из литералов шаблона) в переменную const.

• Извлечь переменную: извлечь одно или несколько вхождений выражения в переменную const.

• Встроенный возврат: преобразование присваивания переменной в оператор return.
• Встроенная переменная: вставьте значение переменной в ее ссылки.

Вспомогательный код для React

В React компоненты часто содержат JSX, расширение синтаксиса для JavaScript. Помощник JavaScript предоставляет помощники по коду, упрощающие работу с JSX и React:

• Добавить {…} в атрибут JSX: добавьте {...} в строковое значение атрибута JSX.
• Свернуть тег JSX: преобразование пустого тега JSX в самозакрывающийся тег.
• Расширить тег JSX: развернуть самозакрывающийся тег JSX.
• Извлечь функциональный компонент React: извлечь элемент или фрагмент JSX в функциональный компонент React.

• Удалить {…} из атрибута JSX: удалить {...} из значения выражения атрибута JSX, которое содержит строковый литерал.
• Удалить ненужный фрагмент JSX: заменить фрагменты JSX <></>, которые содержат только один дочерний элемент, этим дочерним элементом.
• Surround with ‹›…‹/›: элементы JSX заключены во фрагмент JSX <>...</>.

Вспомогательный код для логических выражений

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

• Преобразовать цепочку сравнения строк в array.includes: заменить цепочки || value === 'aString' и && value !== 'aString' на array.includes().

• Преобразовать в необязательную цепочку: замените различные защитные выражения необязательным оператором цепочки (?.).
• Перевернуть оператор: поменяйте местами левый и правый операнды и при необходимости обновите оператор.
• Инвертировать условие: отменить условие оператора if или условного выражения и поменять местами его содержимое.

• Поднять отрицание: удалить оператор не (!) из двоичного выражения.
• Отменить отрицание: вставить оператор не (!) в выражение и инвертировать его.
• Удалить двойное отрицание: удалить выражения с двойным отрицанием (!!).
• Упростить двоичное выражение: заменить двоичное выражение более простым эквивалентным выражением.
• Использовать сравнение == с нулевым значением: замените различные нулевые проверки на == null.

Вспомогательный код для операторов ветвления

Операторы ветвления, такие как if-else и switch, являются центральными элементами многих программ. Их реструктуризация может повысить читабельность ваших программ, часто в сочетании с рефакторингом их условий:

• Преобразовать && в оператор if: Преобразовать condition && aFunction(); и подобные операторы выражений в операторы if.
• Преобразовать условное выражение в оператор if-else: преобразовать условное выражение в оператор if-else.
• Преобразовать if-else в условное выражение: преобразование if-else выражения возврата или присваивания в условное выражение.
• Преобразовать if-else в switch: преобразовать цепочку операторов if-else со сравнениями на равенство в оператор switch.

• Объединить вложенные операторы if внутри else в else-if: вложенные одиночные операторы if внутри блоков else можно объединить в операторы else if.
• Объединить вложенные операторы if: объединить два вложенных оператора if без дополнительных операций в один оператор if, используя && для объединения условий.
• Переместить повторяющийся первый оператор из блока if-else: переместить первый оператор, который появляется в блоках if и else, из оператора if-else.

• Переместить повторяющийся последний оператор из оператора if-else: удалить последний оператор, который появляется в блоках if и else, из оператора if-else.
• Удалить пустой блок else: удалить пустой блок else из оператора if.
• Удалить пустой блок if: удалить пустой блок if из инструкции if. Заменяет его блоком else, когда он доступен.
• Удалить лишнее else if: удалить лишние условия else-if и недостижимые операторы else.
• Удалить ненужное условное выражение: заменить условное выражение его условием или его результатом.
• Удалить ненужное else: поднимите содержимое else if-else с помощью оператора return на уровень внешнего отступа.
• Отделить повторяющееся условие во вложенное if-else: отделить повторяющееся подусловие, которое полностью покрыто, во вложенное if-else.
• Разделить оператор if: разделить условие оператора if на || или &&, если это возможно.

Вспомогательный код для массивов и циклов

В JavaScript есть несколько способов определения циклов и множество методов массива, которые работают со всем массивом. Помощник JavaScript предоставляет несколько кодовых действий для преобразования между различными типами циклов for и для преобразования в более идиоматические методы массива, такие как array.includes().

• Преобразовать array.indexOf() в array.includes(): заменить array.indexOf() проверок на array.includes().
• Преобразовать цепочку сравнения строк в array.includes: заменить цепочки || value === 'aString' и && value !== 'aString' на array.includes().
• Преобразовать цикл в .forEach: заменить обычные циклы for на циклы .forEach().
• Преобразовать цикл в for..of: заменить обычные циклы for и anArray.forEach циклами for...of.

• Преобразовать цикл в for: замените for..of на обычный цикл for с индексной переменной.

Вспомогательный код для функций и методов

Функции и методы являются важными строительными блоками любой нетривиальной программы. Следующие действия кода упрощают работу с функциями, методами и их параметрами:

• Добавить {…} в стрелочную функцию: преобразование тела выражения стрелочной функции в тело блока.
• Преобразовать функцию в стрелочную функцию: замена функциональных выражений стрелочными функциями, более краткий синтаксис.

• Преобразовать функцию в метод объекта: преобразование присвоений свойств с функциями в объявления методов.
• Преобразовать именованную функцию в функциональное выражение: Преобразует именованную функцию в константное объявление с функциональным выражением.
• Поднять значения по умолчанию в параметр: заменить выражения присвоения значений по умолчанию значениями параметров по умолчанию.

• Поместить параметр в IIFE/IIAF: поместить параметр немедленно вызываемого функционального выражения (IIFE) или немедленно вызываемой стрелочной функции (IIAF) в тело функции.
• Удалить {…} из стрелочной функции: преобразовать тело стрелочного функционального блока в тело выражения.
• Удалить IIFE/IIAF: удалить немедленно вызываемые функциональные выражения (IIFE) и немедленно вызываемые стрелочные функции (IIAF) без параметров.

Вспомогательный код для строк и шаблонных литералов

Работа с текстом стала более мощной с введением литералов шаблонов в JavaScript. Помощник JavaScript предлагает несколько кодовых действий, которые помогут вам работать с текстом, будь то строки или литералы шаблонов:

• Преобразовать цепочку сравнения строк в array.includes: заменить цепочки || value === 'aString' и && value !== 'aString' на array.includes().
• Преобразовать строку в литерал шаблона: Преобразование строки в литерал базового шаблона без выражений.
• Преобразовать литерал шаблона в строку: преобразовать литерал простого шаблона без выражений в строку.
• Извлечь выделенный текст в переменную: извлечь выделенный текст (включая выражения из литералов шаблона) в переменную const.
• Встроить в шаблон: встроить строку или базовый литерал шаблона во внешний литерал шаблона.

• Удалить ненужный литерал шаблона: упростите литерал шаблона с помощью одного внутреннего выражения без префикса или суффикса.
• Использовать string.endsWith(): string.endsWith() проверяет, заканчивается ли строка другой строкой.
• Использовать string.startsWith(): string.startsWith() проверяет, начинается ли строка с другой строки.
• Объединить конкатенацию строк: объединить строку и литерал шаблона в один литерал или строку шаблона.

Вспомогательный код для переменных

• Преобразовать let в const: заменить объявления let, которые не имеют переназначения, объявлениями const.
• Преобразовать в деструктурирующее присваивание: преобразование объявления переменной, которая обращается к свойству объекта, в деструктурирующее присваивание.

• Извлечь переменную: извлечь одно или несколько вхождений выражения в переменную const.
• Встроенный возврат: преобразование присваивания переменной в оператор return.
• Поднять значения по умолчанию в параметр: заменить выражения присвоения значений по умолчанию значениями параметров по умолчанию.
• Объединить в предыдущее назначение деструктурирования: объединить назначение деструктурирования объекта с его предыдущим одноуровневым.
• Объединить объявление переменной и инициализацию: преобразовать начальное назначение переменной в ее инициализатор объявления.
• Переместить инициализацию поля в конструктор: перемещает назначение начального значения поля в конструктор класса.

• Переместить инициализацию в объявление поля: перемещает назначение начального значения поля в объявление поля.
• Поместить параметр в IIFE/IIAF: поместить параметр немедленно вызываемого функционального выражения (IIFE) или немедленно вызываемой стрелочной функции (IIAF) в тело функции.
• Удалить неиспользуемую переменную: удалить переменную, которая не читается и не записывается.
• Преобразовать var в let или const: замените var переменными let и const блочной области.
• Разделить последовательность объявлений переменных: преобразование объявлений с несколькими переменными в отдельные объявления для каждой переменной.
• Разделить объявление и инициализацию переменной: отделить инициализацию переменной от ее объявления.
• Использовать нулевое объединение в выражении по умолчанию: заменить выражение значения по умолчанию выражениями оператора объединения с нулевым значением (??).

Вспомогательный код для преобразования синтаксиса

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

• Добавить {…} в стрелочную функцию: преобразование тела выражения стрелочной функции в тело блока.
• Добавить {…} в атрибут JSX: добавьте {…} в строковое значение атрибута JSX.
• Добавить числовой разделитель: улучшите читаемость длинных чисел и необычных форматов чисел, добавив разделители подчеркивания.
• Свернуть тег JSX: преобразование пустого тега JSX в самозакрывающийся тег.

• Свернуть свойство объекта в сокращенную форму: сократить свойства объекта, если имя свойства совпадает со значением свойства.
• Преобразовать доступ к свойству в точечную нотацию: преобразовать доступ к свойству скобочной нотации o['a'] в доступ к свойству точечной нотации o.a.
• Преобразовать доступ к свойству в скобочную нотацию: преобразовать доступ к свойству точечной нотации o.a в доступ к свойству скобочной нотации o['a'].
• Расширить тег JSX: развернуть самозакрывающийся тег JSX.
• Расширить сокращенное свойство: расширить сокращенное свойство объекта (например, { a }) до обычного свойства (например, { a: a }).
• Объединить объявление переменной и инициализацию: преобразовать начальное назначение переменной в ее инициализатор объявления.
• Вытащить оператор из присваивания: переместить оператор из присваивания в двоичное выражение.
• Вставить оператор в присваивание: переместите оператор из бинарного выражения в оператор присваивания, например, +=.

• Удалить {…} из стрелочной функции: преобразовать тело стрелочного функционального блока в тело выражения.
• Удалить {…} из атрибута JSX: удалить {…} из значения выражения атрибута JSX, которое содержит строковый литерал.

Модернизация JavaScript

Экосистема Javascript быстро развивается. Тем не менее, трудно поддерживать кодовые базы в актуальном состоянии с помощью новых функций JavaScript, а кодмоды не всегда подходят из-за их значительного оттока и потенциальных поломок. Помощник JavaScript поддерживает как массовый рефакторинг кода, подобный codemod, так и более гибкую модернизацию кода для следующих обновлений:

• Добавить числовой разделитель: улучшите читаемость длинных чисел и необычных форматов чисел, добавив разделители подчеркивания.
• Свернуть свойство объекта в сокращенную форму: сократить свойства объекта, если имя свойства совпадает со значением свойства.
• Преобразовать .apply() в синтаксис распространения: заменить вызовы .apply() оператором распространения ....
• Преобразовать array.indexOf() в array.includes(): заменить array.indexOf() проверок на array.includes().

• Преобразовать цепочку сравнения строк в array.includes: заменить цепочки || value === 'aString' и && value !== 'aString' на array.includes().
• Преобразовать функцию в стрелочную функцию: замена функциональных выражений стрелочными функциями, более краткий синтаксис.
• Преобразовать функцию в метод объекта: преобразование присвоений свойств с функциями в объявления методов.
• Преобразовать цикл в for..of: заменить обычные циклы for и циклы anArray.forEach на циклы for...of.
• Преобразовать Math.pow в оператор возведения в степень: используйте оператор возведения в степень ** вместо Math.pow().

• Преобразовать строку в литерал шаблона: Преобразование строки в литерал базового шаблона без выражений.
• Преобразовать в деструктурирующее присваивание: преобразование объявления переменной, которая обращается к свойству объекта, в деструктурирующее присваивание.
• Преобразовать в необязательную цепочку: замените различные защитные выражения необязательным оператором цепочки (?.).
• Поднять значения по умолчанию в параметр: заменить выражения присвоения значений по умолчанию значениями параметров по умолчанию.
• Преобразовать var в let или const: замените var переменными let и const блочной области.

• Заменить void 0 на undefined: заменить void 0 и другие постоянные выражения void на undefined.
• Использовать == сравнение с нулевым значением: замените различные нулевые проверки на == null.
• Использовать нулевое объединение в выражении по умолчанию: заменить выражение значения по умолчанию выражениями оператора объединения (??) с нулевым значением.

• Использовать string.endsWith(): string.endsWith() проверяет, заканчивается ли строка другой строкой.
• Использовать string.startsWith(): string.startsWith() проверяет, начинается ли строка с другой строки.
• Объединить конкатенацию строк: объединить строку и литерал шаблона в один литерал или строку шаблона.

Модернизация Лодаша

С введением различных помощников для коллекций и нового синтаксиса в ES6 и более поздних версиях JavaScript некоторые функции Lodash стали несколько избыточными.

• Заменить _.every на array.every: заменить Lodash _.every на array.every.
• Заменить _.filter на array.filter: заменить Lodash _.filter на array.filter.

• Замените _.each и _.forEach на array.forEach: замените Lodash _.each и _.forEach на array.forEach.
• Заменить _.map на array.map: заменить Lodash _.map на array.map.
• Заменить _.noop функцией стрелки: заменить _.noop на () => undefined.
• Заменить _.some на array.some: заменить Lodash _.some на array.some.

Очистка кода

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

• Удалить console.log: удалить оператор console.log.
• Удалить двойное отрицание: удалить выражения двойного отрицания (!!).
• Удалить пустой блок else: удалить пустой блок else из оператора if.
• Удалить пустой блок if: удалить пустой блок if из инструкции if. Заменяет его блоком else, когда он доступен.
• Удалить IIFE/IIAF: удалить немедленно вызываемые функциональные выражения (IIFE) и немедленно вызываемые стрелочные функции (IIAF) без параметров.
• Удалить лишнее else if: удалить лишние условия else-if и недостижимые операторы else.
• Удалить ненужное условное выражение: заменить условное выражение его условием или его результатом.
• Удалить ненужное else: поднимите содержимое else if-else с помощью оператора return на уровень внешнего отступа.

• Удалить ненужное выражение-выражение: удалить выражение-выражение, которое не имеет побочных эффектов.
• Удалить ненужный фрагмент JSX: заменить фрагменты JSX <></>, которые содержат только один дочерний элемент, этим дочерним элементом.
• Удалить ненужный литерал шаблона: упростите литерал шаблона с помощью одного внутреннего выражения без префикса или суффикса.
• Удалить неиспользуемую переменную: удалить переменную, которая не читается и не записывается.
• Заменить void 0 на undefined: заменить void 0 и другие постоянные выражения void на undefined.

• Упростить двоичное выражение: заменить двоичное выражение более простым эквивалентным выражением.

Другие помощники по коду

• Вставить console.log для переменной: по возможности вставьте оператор console.log для выбранной переменной.
• Обернуть try…catch: окружить последовательность операторов блоком try…catch.

Заключение

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

💡 Если вы хотите попробовать JavaScript Assistant, вы можете найти его на Visual Studio Code marketplace.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.