85 Вспомогательные средства кода JavaScript для Visual Studio Code

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

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

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

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

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

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

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

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

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

Помощники кода для React

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

  • Добавьте {…} к атрибуту JSX: Добавить {...} к буквальному значению строки атрибута JSX.
  • Свернуть тег JSX: Преобразование пустого тега JSX в самозакрывающийся тег.
  • Развернуть тег JSX: Развернуть самозакрывающийся тег JSX.
  • Извлечь компонент функции React: Извлечение элемента или фрагмента JSX в компонент функции React.
  • Удалить {…} из атрибута JSX: Удалить {...} из значения выражения атрибута JSX, содержащего строковый литерал.
  • Удалить ненужный фрагмент JSX: Замените JSX-фрагменты <></>, которые содержат только один дочерний элемент, на этот дочерний элемент.
  • Окружите <>…</>: Обернуть JSX-элементы в JSX-фрагмент <>...</>.

Помощники кода для логических выражений

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

  • Преобразовать цепочку сравнения строк в array.includes: Замените цепочки || value === 'aString' и && value !== 'aString' на array.includes().
  • Преобразование в необязательные цепочки: Заменяйте различные защитные выражения необязательным оператором цепочки (?.).
  • Оператор Flip: Поменяйте местами левый и правый операнды и обновите оператор, если это необходимо.
  • Инвертировать условие: Отрицание условия if-выражения или условного выражения и замена его содержимого.
  • Подтянуть отрицание: Переместить оператор not (!) из двоичного выражения.
  • Сдвинуть отрицание вниз: Вставьте оператор not (!) в выражение и сведите его на нет.
  • Удалить двойное отрицание: Удалите двойное отрицание (!!) из выражения.
  • Упростить двоичное выражение: Замените двоичное выражение более простым эквивалентным выражением.
  • Использовать == нулевое сравнение: Замените различные проверки nullish на == null.

Помощники кода для ветвящихся выражений

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

  • Преобразовать && в оператор if: Преобразуйте условие && aFunction(); и подобные выражения в операторы if.
  • Преобразование условного выражения в if-else: Преобразование условного выражения в оператор if-else.
  • Преобразование if-else в условное выражение: Преобразуйте выражение возврата или присвоения ifelse в условное выражение.
  • Преобразование 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 в ifelse с оператором возврата на внешний уровень отступа.
  • Разделить повторяющееся условие на вложенные if-else: Разделите повторяющееся подусловие, которое полностью покрывается, на вложенные if-else.
  • Разделять оператор if: Разделите условие оператора if на || или &&, когда это возможно.

Помощники кода для массивов и циклов

JavaScript имеет несколько способов определения циклов и множество методов массивов, которые работают со всем массивом. JavaScript Assistant предоставляет несколько действий для преобразования между различными типами циклов 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 с переменной index.

Помощники кода для функций и методов

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

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

Помощники кода для строк и шаблонных литералов

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

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

Помощники кода для переменных

  • Преобразование let в const: Замените объявления let, не имеющие переназначения, на объявления const.
  • Преобразовать в деструктурирующее присваивание: Преобразуйте объявление переменной, которая обращается к свойству объекта, в деструктурирующее присваивание.
  • Извлечь переменную: Извлечь одно или несколько вхождений выражения в переменную const.
  • Инлайн-возврат: Преобразование присваивания переменной в оператор return.
  • Lift default into parameter: Заменить выражения присвоения значений по умолчанию значениями параметров по умолчанию.
  • Объединить с предшествующим деструктурирующим присваиванием: Объединить деструктурирующее назначение объекта с его предшествующим родственником.
  • Объединить объявление и инициализацию переменной: Преобразовать начальное присвоение переменной в инициализатор ее объявления.
  • Переместить инициализацию поля в конструктор: Перемещает присвоение начального значения поля в конструктор класса.
  • Переместить инициализацию в объявление поля: Перемещает присвоение начального значения поля в объявление поля.
  • Переместить параметр в IIFE/IIAF: Переместить параметр немедленно вызываемых функциональных выражений (IIFEs) или немедленно вызываемых стрелочных функций (IIAFs) в тело функции.
  • Удалить неиспользуемую переменную: Удалить переменную, которая не читается и не записывается.
  • Преобразовать var в let или const: Замените var переменными let и const.
  • Разделить последовательность объявления переменных: Преобразуйте объявления с несколькими переменными в отдельные объявления для каждой переменной.
  • Разделить объявление и инициализацию переменной: Отделите инициализацию переменной от ее объявления.
  • Использовать нулевую коалесценцию в выражении значения по умолчанию: Замените выражение значения по умолчанию выражением с оператором коалесценции nullish (??).

Помощники кода для преобразования синтаксиса

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

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

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

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

  • Добавить числовой разделитель: Повышение читабельности длинных чисел и необычных форматов чисел путем добавления разделителей с подчеркиванием.
  • Свернуть свойство объекта в сокращение: Сокращайте свойства объектов, когда имя свойства совпадает со значением свойства.
  • Преобразовать .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.
  • Использовать nullish coalescence в выражении значения по умолчанию: Замените выражение значения по умолчанию выражением с оператором коалесценции nullish (??).
  • Используйте string.endsWith(): string.endsWith() проверяет, заканчивается ли строка другой строкой.
  • Используйте string.startsWith(): string.startsWith() проверяет, начинается ли строка с другой строки.
  • Конкатенация объединенных строк: Слияние строк и шаблонных литералов в один шаблонный литерал или строку.

Модернизации Lodash

С появлением различных помощников для коллекций и нового синтаксиса в 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 на arrow Function: Замените _.noop на () => undefined.
  • Замените _.some на array.some: Замените Lodash _.some на array.some.

Очистка кода

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

  • Удалить console.log: Удалить утверждение console.log.
  • Удалить двойное отрицание: Удалите выражения с двойным отрицанием (!!).
  • Удалить пустой блок else: Удалить пустой блок ‘else’ из оператора ‘if’.
  • Удалить пустой блок if: Удаляет пустой блок ‘if’ из оператора ‘if’. Заменяет его на блок ‘else’, если он доступен.
  • Удалить IIFE/IIAF: Удалите немедленно вызываемые функциональные выражения (IIFE) и немедленно вызываемые стрелочные функции (IIAF) без параметров.
  • Удалите избыточные else if: Удалите лишние условия else-if и недостижимые операторы else.
  • Удалите лишнее условное выражение: Замените условное выражение его условием или результатом.
  • Удалить ненужное else: Поднимите содержимое else в ifelse с оператором возврата на внешний уровень отступа.
  • Удалите ненужное выражение: Удалите оператор выражения, который не имеет побочных эффектов.
  • Удалить ненужный JSX-фрагмент: Замените JSX-фрагменты <></>, которые содержат только один дочерний фрагмент, на этот дочерний фрагмент.
  • Удалите ненужный литерал шаблона: Упростите шаблонный литерал с одним внутренним выражением без префикса или суффикса.
  • Удалить неиспользуемую переменную: Удалите переменную, которая не читается и не записывается.
  • Заменить void 0 на undefined: Замените void 0 и другие константные выражения void на undefined.
  • Упростить двоичное выражение: Замените двоичное выражение более простым эквивалентным выражением.

Другие вспомогательные функции кода

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

Заключение

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

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

Оцените статью
Procodings.ru
Добавить комментарий