Хватит тратить время на форматирование JavaScript, пусть ваши инструменты справятся с этим автоматически
Признаюсь, раньше я был из тех программистов, которые заботились о стандартах кодирования, может быть, даже чересчур. Однажды я спорил о точках с запятой, как будто они имеют большое значение. Оглядываясь назад, я чувствую себя глупо.
Дело в том, что на самом деле это не имеет значения, если ваша команда согласовала общие правила, применяя те же правила и руководства по стилю к вашему коду. Желательно, чтобы это происходило автоматически, чтобы у вас было меньше головной боли с форматированием и больше времени на собственное кодирование!
Мощный дуэт
Мы воспользуемся двумя популярными инструментами для проверки и форматирования исходного кода.
- ESLint - самый популярный JavaScript-линтер, который анализирует код на предмет распространенных ошибок, включая нестандартное форматирование и возможные ошибки.
- Prettier - придирчивый редактор кода. Он поддерживает множество языков и интегрируется с большинством редакторов кода. Вы можете установить свои собственные правила или просто использовать настройки по умолчанию без дополнительной настройки.
Оба инструмента имеют функцию автоматического исправления, позволяющую исправить форматирование вашего кода.
В этом случае мы собираемся использовать Prettier для этой функции (например: max-len, no-mixed-space-and-tabs, keyword-spacing, comma-style и т. Д.). Это означает, что мы будем использовать только функции качества кода ESLint. Это те, которые применяют (передовые) методы кодирования и стремятся уменьшить количество ошибок и некорректного кода (например: no-unused-vars, no-extra-bind, no-implicit-globals, предпочтение-обещание). -reject-errors »… и т. д.).
Начало работы
Установите Prettier и расширения:
yarn add prettier prettier-eslint prettier-eslint-cli -D
Установите eslint-config-prettier (отключает форматирование для ESLint) и eslint-plugin-prettier (разрешает ESLint запускать Prettier):
yarn addeslint-config-prettier
eslint-plugin-prettier-D
Затем в .eslintrc.json
добавьте следующий массив «extends» в вашу конфигурацию, убедившись, что он помещен последним в массиве extends
. Это гарантирует, что он переопределяет все другие конфигурации.
{ "extends": ["prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": ["error"] }, }
Если вы хотите установить свои собственные правила форматирования, создайте файл .prettierrc
в корневом каталоге вашего проекта. Например:
{ "printWidth": 80, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "jsxBracketSameLine": false, "parser": "babel", "semi": true }
Вот и все. Вы готовы использовать Prettier и ESLint в своем проекте.
Бонусные функции Prettier
- Использование в редакторах кода - большинство редакторов кода имеют встроенную поддержку Prettier. Вы можете запускать его каждый раз при сохранении. Например: в WebStorm нажмите Alt + Shift + Cmd + P, чтобы быстро отформатировать код.
- Запуск как обработчик перед фиксацией - просто добавьте конфигурацию в
package.json
:
{ "husky": { "hooks": { "pre-commit": "
npm run prettier" } } }
Вывод
Prettier и ESLint можно настроить в соответствии с вашими потребностями. Это полезные инструменты для обеспечения согласованности стандартов и стилей кодирования в команде. Они не только облегчают работу по сопровождению кода, но и сокращают процессы адаптации для новичков. Что наиболее важно, они определенно означают меньше ненужных встреч для обсуждения форматирования кода и комментариев при проверке кода! Сэкономлено больше времени, чтобы сосредоточиться на кодировании.
Если вы еще не пробовали, я настоятельно рекомендую вам попробовать!
Наслаждайтесь 😃