Что такое Эслинт?
ESLint — это программа, которая просматривает ваш код и анализирует его на наличие потенциальных ошибок. Расширение легко настраивается, с набором встроенных опций для соответствия вашему руководству по стилю. Он может выделять ошибки, пока вы печатаете в своем редакторе, а также отображать подробный список ошибок в вашей консоли.
Чистый код в командах разработчиков с минимальными усилиями со стороны разработчиков.
Это здорово, потому что ESLint не только определяет способы сделать код лучше, но если вам не нужны или вы не согласны с определенными правилами, их можно изменить или проигнорировать (либо для строки, либо для всего файла, либо для всего файла). весь проект).
Зачем нам Prettier?
Prettier — самоуверенный форматировщик кода. Он поддерживает множество языков и легко интегрируется с большинством редакторов кода. мы также можем установить наши предпочтения в опциях. Некоторые из параметров включают ширину табуляции, конечные запятые, расстояние между скобками и т. д.
Нет необходимости писать красивый код, но с Prettier нам не о чем беспокоиться. Он автоматически форматирует код и придает ему наилучший вид.
Как настроить окружение
Прежде чем мы начнем, нам нужно иметь npm install и Code Editor(VScode)
- Загрузите расширения ESLint и Prettier в свой редактор кода (VScode).
- В корневую папку вашего проекта установите библиотеки ESLint и Prettier.
npm install -D eslint prettier3 . Прежде чем мы установим файл eslint-config-airbnb. нам требуется установить Babel и требует, чтобы в нашем проекте было несколько зависимостей Babel.
npm install -D babel-loader @babel/core @babel/preset-env babel-eslint @babel/preset-react4. Теперь установите конфиг Airbnb (eslint-config-airbnb). вы можете запустить этот ярлык, чтобы установить конфигурацию и все ее зависимости:
npx install-peerdeps --dev eslint-config-airbnb5. Установите eslint-config-prettier (отключает форматирование для ESLint) и eslint-plugin-prettier.
npm install -D eslint-config-prettier eslint-plugin-prettier6. Затем, когда все пакеты были установлены. Создайте файл .eslintrc в корневой папке вашего проекта:
.eslintrc
{
"parser": "babel-eslint",
"extends": ["airbnb", "prettier"],
"plugins": ["react", "jsx-a11y", "import", "prettier"],
"rules": { "prettier/prettier": ["error"] },
}
- мы добавили «extends»: «airbnb», как рекомендовано в документации Airbnb, добавив, что мы транспилировали мой код ES6 с помощью babel, поэтому добавили «parser»: «babel-eslint».
7. Создайте файл .prettierrc в корневом каталоге вашего проекта. Здесь вы настроите параметры форматирования. мы добавили несколько моих собственных настроек ниже, но вы можете добавить больше и прочитать больше о конфигурационном файле Prettier
.prettierrc{ "printWidth": 120, "singleQuote": true, "trailingComma": "es5" }
8. Мы рекомендуем вам использовать VSCode для редактора кода.
- Настройте свой VSCode для форматирования при сохранении.
- В настройках VSCode-›настройки-›настройки пользователя Нажмите на 3 точки в правом верхнем углу и выберите «открыть settings.json». Это откроет настройки JSON, найдет следующие значения и изменит их. Измененные значения появятся справа. Установите следующие значения
"prettier.eslintIntegration": true,
"editor.formatOnSave": true,
"editor.tabSize": 2prettier.eslintIntegration:Устанавливает более красивый приоритет над Eslint для обработки конфликтовeditor.formatOnSave:Запустить более красивое исправление при сохраненииeditor.tabSize:2 Установите размер табуляции на 2.
Мы добавили несколько дополнительных правил для переопределения Airbnb settings, которые будут вам полезны. Вы можете добавить свои собственные правила.
- мы расширили правило
react/jsx-filename-extension, чтобы оно применялось к файлам, оканчивающимся как на .js, так и на .jsx, потому что все наши файлы, содержащие JSX, заканчиваются на .js. enabled: для включения правила. 0=выкл., 1=предупреждение, 2=ошибка. По умолчанию 0.ignore: необязательный массив имени реквизита, который следует игнорировать во время проверки.
Вот как выглядит мой файл .eslintrc:
{
"parser": "babel-eslint",
"extends": ["airbnb", "prettier"],
"plugins": ["react", "jsx-a11y", "import", "prettier"],
"rules": {
"react/jsx-filename-extension": [ 1,
{ "extensions": [".js", ".jsx"] }
],
"indent": ["error", 2, { "SwitchCase": 1 }],
"linebreak-style": 0,
"eslint max-len": [0,
{ "ignoreComments": true, "tabWidth": 2 }
],
"no-console": "off",
"eslint linebreak-style": [0, "error", "windows"],
"react/button-has-type": [0, {"reset": false}],
"react/prop-types": [0,
{ "ignore": ["className", "params","location*"]}
],
"jsx-a11y/anchor-is-valid": [
"error",
{
"components": ["Link"],
"specialLink": ["to"],
"aspects": ["noHref", "invalidHref", "preferButton"]
}
],
},
"env":
{
"node": true,
"es6": true,
"browser": true
},
}Я изучил и написал вышеприведенную статью, когда работаю над приложением в ЮНИСЕФ.
Благодаря ЮНИСЕФ и приведенным ниже ссылкам.
