Сочетание фронтенд-разработки с использованием eslint и prettier для проверки и форматирования кода

JavaScript спецификация кода ESLint
Сочетание фронтенд-разработки с использованием eslint и prettier для проверки и форматирования кода

Сочетание фронтенд-разработки с использованием eslint и prettier для проверки и форматирования кода

1. Проблемы и болевые точки

  • В процессе разработки проекта в команде доля времени на обслуживание кода часто больше, чем на разработку новых функций. Поэтому очень важно писать код, который соответствует стандартам кодирования команды, что может не только в значительной степени избежать основных синтаксических ошибок, но и обеспечить удобочитаемость кода.
  • Для системы управления версиями кода (svn и git или другие) проблема, вызванная несовместимостью форматов кода, является серьезной. делает невозможным проверку кода и корректуру теста.

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

(1) Проблемы со спецификацией формата кода

Стандарт спецификации формата кода может относиться к крупным основным компаниям и сообществам. Ниже приведены некоторые часто используемые основные спецификации:

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

Нет абсолютных норм, есть только подходящие нормы!

(2) Вопросы о том, зачем использовать eslint и prettier

  • красивее в основном для форматирования кода, а до того как красивее нет, используетсяeslint —fixИ редактор поставляется с форматированием кода для форматирования кода.
    • Недостатки: каждый редактор будет иметь разные форматы кода, и настройка будет более сложной.
    • prettier постепенно стал основным инструментом форматирования стиля кода в отрасли.
    • Облегчить правила проверки таких инструментов, как eslint, потому что проверка стиля кода передается тому, кто красивее, поэтому правила проверки кода могут быть более точно применены к реальной спецификации кода.
  • Является ли eslint в основном ответственным за проверку правил кода, prettier только корректирует стиль кода, стиль кода, eslint — это инструмент, который действительно проверяет, соответствует ли код спецификации.

Таким образом, два необходимы для работы.

Во-вторых, решение

Старое решение:

  • Используйте editorconfig, чтобы помочь с форматированием кода для совместимых инструментов разработки.
  • Проверить код с помощью eslint
  • использоватьeslint —fixдля исправления кода, не соответствующего правилам eslint, он автоматически изменит код в соответствии с установленными правилами (в него будут включены правила стиля кода, но правила стиля eslint не очень точны).
  • Вручную измените оставшиеся проблемные области или, когда некоторые области трудно оценить по правилам, вам необходимо изменить их вручную.

Новое решение:

  • Используйте editorconfig, чтобы помочь с форматированием кода для совместимых средств разработки.
  • Используйте eslint для проверки кода.
  • Отформатируйте код покрасивее. (Можно понять, что красивееeslint —fixУсовершенствованная версия, вместо этого используйте красивееeslint-fix)
  • Вручную измените оставшиеся проблемные области или, когда некоторые области трудно оценить по правилам, вам необходимо изменить их вручную.

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

3. Конкретная операция

Ввиду путаницы в описании онлайн-статей, это в основном для того, чтобы разобраться во всем процессе и идеях.

контур

  1. Инструменты разработки, используемые единой командой (webstorm, редактор ide)
  2. Установите eslint и prettier (узловые модули)
  3. Установите eslint и prettier (плагин для редактора ide)
  4. Настроить eslint и красивее
  5. настроить editorconfig (необязательно)
  6. Строго контролируйте, проверяйте и форматируйте код в соответствии с процессом и отправляйте код в соответствии со спецификациями и требованиями.

Еще один шаг здесь - установить eslint и prettier (плагины редактора ide), в основном для использования редактора ide для напоминаний об ошибках формата кода и обработки формата кода.Эта операция также может быть выполнена при упаковке с помощью веб-пакета, или вы можете используйте для этого gulp или npm, но здесь удобнее использовать редактор.

(1) Инструменты разработки, используемые единой командой (веб-шторм, редактор ide)

Инструменты разработки могут делать многое и являются мощным инструментом для разработки кода, но разные инструменты разработки будут иметь разные подсказки кода, форматирование кода и механизмы проверки кода.Такие различия приведут к спецификациям командного кода (разработка и проверка).Многие проблемы, так что надо унифицировать.

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

Здесь мы только опишем наиболее часто используемые инструменты разработки в индустрии фронтенда на примере webstorm.

(2) Установите eslint и prettier (модуль узла)

Значение установки этого модуля заключается в том, что, по сути, ядро ​​всего процесса находится в этом месте.Хотя средство разработки поддерживает эти два модуля, окончательная операция должна быть установлена ​​с этими двумя модулями, прежде чем ее можно будет использовать.

// 这里需要全局安装最主要的两个node 模块，主要是要让 ide 编辑器能够读取全局环境来调用这2个模块
npm install eslint prettier -g --save-dev

// 这个是为了 eslint 跟 prettier 可以联合使用
npm install --save-dev eslint-plugin-prettier
// 这个是为了让 eslint 跟 prettier 兼容，关闭 prettier 跟 eslint 冲突的rules
npm install --save-dev eslint-config-prettier

Дополнительные примечания:

  • eslint-config-красивее:
    • Этот плагин используется, если правила eslint конфликтуют с правилами prettier (в основном ненужные конфликты), например, eslint ограничивает требование одинарных кавычек, а prettier также ограничивает требование одинарных кавычек, то если вы используете eslint для водить красивее, чтобы сделать проверку кода. Если это так, он предложит 2 вида ошибок, хотя все они указывают на одну и ту же ошибку кода, в это время этот плагин отключит дополнительные ошибки.
    • Но если eslint отвечает только за обнаружение кода, а prettier отвечает только за форматирование кода, то они друг другу не мешают, то есть можно и не ставить этот плагин, а из-за различий в коллективе кадров (даже в одном и том же средстве разработки тоже есть различия версий, и есть отличия в использовании prettier и eslint) могут быть разные ситуации, поэтому лучше всего установить этот плагин.
    • У официального есть подробное введение:GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

Справочная информация модуля:Integrating with ESLint · Prettier

Кстати, давайте поговорим о других модулях eslint, которые мы обычно используем:

nam -g install babel-eslint eslint-plugin-html --save-dev
  • вавилон-эслинт:
    • Некоторый код не поддерживается eslint (поскольку Babel также отвечает за подобные вещи, переводя неподдерживаемый синтаксис js), поэтому вам нужно добавить этот плагин для обеспечения совместимости.
    • У официального есть подробное введение:GitHub.com/Вавилон/Вавилон…
  • eslint-плагин-html:
    • Чтобы eslint проверил.vueкод для файла.

(3) Установите плагин eslint и более красивый плагин webstorm и включите плагин

Для получения дополнительных методов настройки см.:WebStorm Setup · Prettier

Согласно официальному представлению, webstorm имеет два вида обработки:

  1. WebStorm 2018.1 и выше
  2. WebStorm 2017.3 и более ранние версии

Если вы используете IntelliJ IDEA, PhpStorm, PyCharm и другие IDE JetBrains, вам необходимо установить плагин prettier и плагин eslint, и webstorm установит его для вас по умолчанию, поэтому webstorm рекомендуется.

1. WebStorm 2018.1 и выше

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

Горячие клавиши:Alt-Shift-Cmd-P on macOS or Alt-Shift-Ctrl-P on Windows and Linux

Преимущества Krypton Gold King — быстрое обновление, быстрая поддержка, отсутствие взломов, беззаботность, экономия труда и денег!

2. WebStorm 2017.3 и более ранние версии

Эта версия имеет 2 случая:

  • ① режим eslint, используйтеeslint-plugin-prettierПодключаемый модуль взаимодействует с подключаемым подключаемым модулем eslint, что эквивалентно использованию модуля eslint для управления модулем красивее, а затем промежуточный драйвер полагается наeslint-plugin-prettier.

Сначала включите eslint и настройте расположение модуля eslint.По умолчанию текущий каталог будет считываться автоматически.eslint.rcconfig, затем нужно выполнить установку npmeslint-plugin-prettierЭтот плагин будет описан позже.

  • ② использовать красивее непосредственно в качестве дополнительного инструмента.

Клавиши быстрого доступа по умолчанию для двух вышеуказанных методов:Cmd/Ctrl-Shift-A(под маком естьcomm+shift+A), если вы чувствуете себя некомфортно, вы можете изменить сочетания клавиш по мере необходимости.

(3) Настройте плагин eslint и плагин prettier

1. конфигурация eslint

Правила проверки eslint через файл конфигурации.eslintrcРеализовано, но у каждого свой конфигурационный файл eslintGitHub — AlloyTeam/eslint-config-alloy: правила AlloyTeam ESLint:

Подробный справочный URL-адрес:

Однако здесь нет запутанности в том, какую конфигурацию eslint использовать, в зависимости от проекта и команды, здесь просто объяснить конфигурацию eslint, которую необходимо выполнить, и необходимы некоторые пояснения:

.eslintrcФайл конфигурации необходимо изменить, в основном для использования плагина prettier, плагина eslint-config-prettier и плагина eslint-plugin-prettier:

// 因为使用了 eslint 和 prettier，所以要加上他们
extends: [ 'eslint:recommended', 'plugin:prettier/recommended'],

// required to lint *.vue files 使用 html参数
plugins: ['html', 'prettier'],

// rules 规则就按照各家写法。

Под webstorm, в корневом каталоге проекта.eslintrcкак файл конфигурации.

2. Конфигурация красивее

Правила проверки красивее через файл конфигурации.prettierrcОднако в целом необходимо настроить лишь несколько правил: .

{
  "printWidth": 100,
  "singleQuote": true,
  "semi": false
}

Может случиться так, что после форматирования красивее будут добавлены все точки с запятой, но eslint должен удалить точку с запятой, поэтому она будет повторяться Здесь вы можете просто установить настройку точки с запятой красивее, чтобы она была такой же, как у eslint, и так по аналогии, но только в нескольких специальных местах, можно обратиться к официальной документации. У официального есть подробное введение:Configuration File · Prettier

(4) Конфигурация редактора

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

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

// 放在项目根目录的.editorconfig文件
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

Подробная ссылка:

(5) Строго контролируйте, проверяйте и форматируйте код в соответствии с процессом и отправляйте код в соответствии со спецификациями и требованиями.

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

Весь процесс проверки и форматирования кода должен быть стандартизирован следующим образом:

  1. Используйте eslint и попытайтесь решить все проблемы автоматически (у eslint есть подсказки автоисправления, вы можете использовать --fix fixes, следуйте конфигурационному файлу .eslintrc, чтобы исправить их).
  2. Отформатируйте весь код красивее.
  3. Код восстановления разницы, оставшийся после фильтрации первых двух частей из-за форматирования или других проблем, вызывающих ошибки. (Обычно первые два шага в основном решают все проблемы)
  4. Отправьте красиво отформатированный код в репозиторий.

Справочная документация:

Категории