Хватит тратить время на форматирование 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 add eslint-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 можно настроить в соответствии с вашими потребностями. Это полезные инструменты для обеспечения согласованности стандартов и стилей кодирования в команде. Они не только облегчают работу по сопровождению кода, но и сокращают процессы адаптации для новичков. Что наиболее важно, они определенно означают меньше ненужных встреч для обсуждения форматирования кода и комментариев при проверке кода! Сэкономлено больше времени, чтобы сосредоточиться на кодировании.

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

Наслаждайтесь 😃