Представьте, что вам нужно построить здание, и каждый месяц для его строительства нанимают нового инженера. Если каждый инженер внедрит свои методы и подходы, оно, несомненно, станет одним из худших зданий в мире и в конце концов рухнет. Однако, если все они будут следовать определенному набору принципов и стандартов, они могут предотвратить потенциальные коллапсы.
Этот пример применим и к фронтенд-проектам. Такие инструменты, как 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]
