Последние две недели я пытался применить eslintlinting к моему проекту Node. Я нашел слишком много предложений. Большинство из них ссылаются на использование пользовательских eslint пакетов, таких как airbnb , google , standard и многих других пользовательских пакетов linting, и прикрепляют их с помощью красивого средства форматирования.
Я последовал этим предложениям, чтобы применить eslint к моему проекту узла, используя некоторые из этих пакетов.
Как только я применил их к своему проекту, они вызвали слишком много проблем eslint в моем коде, определенно, это нормально, и именно поэтому я хотел применить eslint к своему коду, чтобы повысить равенство моего кода 👌
Настоящая проблема заключалась в том, что он показывает эти проблемы, не объясняя их настоящуюпричину , он просто говорит это короткое сообщение "красивее/красивее" с непонятными предложениями по исправить решение этих проблем.
Наверняка есть какие-то настройки для решения некоторых из них, но поиск каждой проблемы займет много времени 😔
Честно говоря, я НЕ предпочитаю быть дураком в своих проектах. Я предпочитаю понимать, что происходит, и если возникнут проблемы с проектом, я буду хотя бы частично знать, как их исправить.
Долгая история! 🙂 Я просто хотел объяснить, почему я предпочитаю использовать чистые eslint правила, а не дополнительные пакеты и зависимости. 😎
Пора начинать⛳
Установить Эслинт
> npm install eslint --save-dev
or
> yarn add eslint --dev
Добавить Эслинта
Давайте сгенерируем наш файл .eslintrc.json!
Откройте свой терминал в корневой папке проекта и нажмите эту команду:
> npx eslint --init
or
> yarn run eslint --init
Эта команда предлагает несколько вариантов, выберите следующие параметры:
To check syntax and find problems- Модули JavaScript ›
commonjs - Использует ли ваш проект TypeScript Нет/Да В моем случае я не использую TypeScript ›
No - Где работает код? ›
Node - Какой формат файла конфигурации? ›
JSON - Хотите установить их сейчас с помощью npm? ›
Yes
После завершения этих параметров продвижения будет создан файл eslintrc.json со следующей конфигурацией:
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 12
},
"rules": {}
}
Мы добавим в этот файл дополнительные правила eslint. Таким образом, вы можете переопределить все содержимое этого файла следующим образом:
{
"env": {
"node": true,
"commonjs": true,
"es2021": true,
"jest": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 12
},
"rules": {
"no-console": "warn",
//* Avoid Bugs
"no-undef": "error",
"semi": "error",
"semi-spacing": "error",
//* Best Practices
"eqeqeq": "warn",
"no-invalid-this": "error",
"no-return-assign": "error",
"no-unused-expressions": ["error", { "allowTernary": true }],
"no-useless-concat": "error",
"no-useless-return": "error",
"no-constant-condition": "warn",
"no-unused-vars": ["warn", { "argsIgnorePattern": "req|res|next|__" }],
//* Enhance Readability
"indent": ["error", 2, { "SwitchCase": 1 }],
"no-mixed-spaces-and-tabs": "warn",
"space-before-blocks": "error",
"space-in-parens": "error",
"space-infix-ops": "error",
"space-unary-ops": "error",
"quotes": ["error", "single"],
//
"max-len": ["error", { "code": 200 }],
"max-lines": ["error", { "max": 500 }],
"keyword-spacing": "error",
"multiline-ternary": ["error", "never"],
"no-mixed-operators": "error",
//
"no-multiple-empty-lines": ["error", { "max": 2, "maxEOF": 1 }],
"no-whitespace-before-property": "error",
"nonblock-statement-body-position": "error",
"object-property-newline": [
"error",
{ "allowAllPropertiesOnSameLine": true }
],
//* ES6
"arrow-spacing": "error",
"no-confusing-arrow": "error",
"no-duplicate-imports": "error",
"no-var": "error",
"object-shorthand": "off",
"prefer-const": "error",
"prefer-template": "warn"
}
}
Какого хрена ты только что добавил? 🤷♀️
Успокойся, приятель!!!
мы только что добавили "jest": true к env на тот случай, если вы захотите применить модульное тестирование с помощью jest к вашему проекту узла. В секцию rules также были добавлены дополнительные правила.
Ааа, вот и все!
Дополнительные примечания
Почему такие определенные правила?!
Честно говоря, есть много других правил, которые вы можете добавить, но этих правил вполне достаточно, чтобы улучшить читабельность вашего кода и помочь вам избежать ошибок. Достаточно честно!! 🙂
Включить/выключить правило 💡
Каждое правило eslint имеет три возможных значения: off , warn , error . Таким образом, вы можете добавить правило и присвоить ему одно из этих трех значений. Также вы можете изменить значение любого из правил в предыдущем файле .eslintrc.json.
Например, одно из правил, которые у нас есть, это "semi": "error". Мы можем изменить это правило, чтобы отображалось предупреждение только в том случае, если вы забудете добавить точку с запятой ;, заменив значение error на warn, или вы даже можете отключить это правило, используя значение off .
Поиск описания правила 🔍
Вы можете найти описание правила, просто зайдите на eslint.org и найдите его. Вы увидите, для чего предназначено это правило, как оно работает в деталях и какие возможные значения оно может принимать.
Применить автоматическое исправление с помощью параметра --fix
Если вы только что добавили eslint в существующий проект, скорее всего, обнаружится много проблем с eslint, которые уже есть в вашем коде. Будет довольно сложно пройтись по всем файлам вашего проекта и исправить эти eslint вручную.
К счастью, есть замечательная команда, которую вы можете запустить, чтобы решить эти проблемы автоматически. Нажмите эту команду на своем терминале:
./node_modules/.bin/eslint --fix
Надеюсь, это решит большинство проблем.
И еще одно: вы можете изменитьлюбое из предыдущих ПРАВИЛ, чтобы они соответствовали вашим потребностям.
Надеюсь, теперь вы понимаете, как добавить eslint в проекты узлов :)
Все предыдущие правила размещены в этом репозитории, и любые другие правила, которые я найду, могут улучшить мой код узла, который я добавлю в этот репозиторий.
Счастливого Эслинта 🎉🎉✨
