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

Этот пример применим и к фронтенд-проектам. Такие инструменты, как PRETTIER и ESLINT, позволяют нам продвигать проект на основе определенного стандарта (или, другими словами, мы стандартизируем почерк разработчиков).

Что красивее?

Код JavaScript или других распространенных языков можно форматировать с помощью приложения под названием Prettier. Оно деконструирует код, анализирует его, а затем переформатирует в соответствии с определенными правилами и регулярной структурой.

Что делаетESLint ?

ESLint состоит из набора правил, которые показывают ошибки и предупреждения, не требуя от вас компиляции кода. Вам не следует бояться, что эти правила могут быть изменены. Они могутn создаваться по вкусу. и потребности разработчика.

Давай просто испачкаем руки

Шаг 1. Установите приложение для реагирования

Вы можете использовать инструмент create-react-app для настройки нового проекта React. Откройте терминал или командную строку и выполните следующую команду:

npx create-react-app my-app

Это создаст новый каталог с именем «my-app» с базовой настройкой для приложения React.

Перейдите в каталог проекта: Используйте следующую команду, чтобы перейти во вновь созданный каталог:

cd my-app

Запустите сервер разработки: выполните следующую команду, чтобы запустить сервер разработки:

npm start

Шаг 2. Теперь давайте установим и настроим ESLint

npm install eslint --save-dev
 or
yarn add eslint --dev

Шаг 3. Выполните следующую команду, чтобы инициализировать файл конфигурации ESLint:

npx eslint --init

ESLint задаст вам вопросы, чтобы настроить его. Вот несколько рекомендуемых ответов:

  • Как бы вы хотели настроить ESLint? Используйте популярное руководство по стилю
  • Какому руководству по стилю вы хотите следовать?Airbnb (https://github.com/airbnb/javascript)
  • Вы используете Реакт? Да
  • В каком формате вы хотите, чтобы ваш файл конфигурации был в? JavaScript

После ответов на вопросы ESLint установит необходимые пакеты и создаст файл конфигурации .eslintrc.js.

Если вы используете React 17 или более раннюю версию, прочтите этот раздел.

В React 17 и ниже импортировать React в файл необязательно. Поэтому, если у вас есть файл JSX, вы можете столкнуться со следующим сообщением:

"React" must be in scope when using JSX

чтобы решить эту проблему, добавьте это правило в свой .eslintrc.js

rules: {
"react/react-in-jsx-scope": "off"
}

Шаг 4. Теперь давайте добавим подключаемые модули ESLint:

npm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev
or
 yarn add eslint-config-prettier eslint-plugin-prettier prettier --dev

Затем откройте файл .eslintrc.js в корневом каталоге вашего проекта. Вы можете изменить его с помощью редактора кода по вашему выбору. Добавьте следующие строки в раздел extends :

extends: [
  // ... other configurations
  'plugin:react/recommended',
],

Перезапустите сервер разработки: если ваш сервер разработки работает, перезапустите его, чтобы применить изменения конфигурации ESLint.

Вот и все. ESLint настроен в вашем проекте React. продолжим устанавливать красивше в наш проект :)

Установить красивее

Шаг 1. Выполните следующую команду, чтобы установить Prettier в качестве зависимости для разработки

npm install prettier --save-dev

Шаг 2. Создайте более красивый файл конфигурации .prettierrc

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

Шаг 3: Откройте файл .prettierrc и укажите желаемые параметры более красивого форматирования. Например, вы можете установить следующую конфигурацию:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Шаг 5. Интегрируйте ESLint с Prettier

Чтобы обеспечить бесперебойную совместную работу ESLint и Prettier, вам необходимо установить подключаемый модуль ESLint для Prettier и обновить конфигурацию ESLint.

npm install eslint-plugin-prettier --save-dev

Откройте файл конфигурации .eslintrc.js и добавьте следующие строки в раздел extends:

extends: [
  // ... other configurations
  'plugin:prettier/recommended',
],

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

Последний шаг: отформатируйте код

npx prettier --write .

Эта команда форматирует все файлы в вашем проекте в соответствии с вашей более красивой конфигурацией.

Prettier теперь установлен и интегрирован в ваш проект React вместе с ESLint.

Спасибо, что нашли время прочитать! Если у вас есть какие-либо вопросы, не стесняйтесь обращаться ко мне.

электронная почта: [email protected]

LinkedIn: https://www.linkedin.com/in/sharareh-shadalo/