Почему
👉 Предотвращение совершения неверного кода. Это самый дешевый способ убедиться, что ваш код действителен.
Настраивать
- Красивее
- Eslint
- StyleLint
- Возможность проверки кода локально
- Автоматический запуск проверки кода с помощью Husky и lint-staged
🛠 1. Красивее
- Сделайте стиль кода проекта более последовательным
- Прекратить спор о стилях кодирования между разработчиками
🐨 Зависимости
npm install -D prettier
🐨 Конфигурация
Попробуйте Playground и скопируйте предпочитаемый вами конфиг, нажав кнопку Copy config JSON
. Затем вставьте его в .prettierrc.json
{
"arrowParens": "always",
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": false,
"singleQuote": false,
"tabWidth": 4,
"trailingComma": "es5",
"useTabs": false,
"vueIndentScriptAndStyle": false
}
🐨 Скрипты
Добавить в package.json
"scripts": {
"prettier": "prettier --ignore-path .gitignore \"**/*.+(ts|tsx|js|jsx|json|css|md|mdx|html)\"",
"format": "npm run prettier -- --write",
"check-format": "npm run prettier -- --list-different",
}
Чтобы исключить файлы из форматирования, создайте .prettierignore
файл в корне вашего проекта или вы можете использовать --ignore-path
для игнорирования файлов, перечисленных в gitignore docs
💰 Проверить код здесь
Проверьте, как включить автоформатирование при сохранении с помощью prettier
⚒️ 2. ESLint
- Проанализируйте свой код, чтобы быстро найти проблемы
- Исправить автоматически
- Вы можете настроить ESLint так, чтобы он работал именно так, как вам нужно.
🐨 Зависимости
npm install -D eslint eslint-config-prettier eslint-plugin-react
🐨 Конфигурация
Поместите в .eslintrc
{
"parserOptions": {
"ecmaVersion": 2021,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"extends": ["eslint:recommended", "eslint-config-prettier", "plugin:react/recommended"],
"rules": {
"no-unused-vars": ["error", {}],
},
"plugins": [
"react"
],
"env": {
"browser": true
}
}
Проверить список правил Eslint здесь
Обратите внимание:
- Мы используем eslint-config-prettier, чтобы отключить все правила, которые не нужны или могут конфликтовать с Prettier.
- Не стесняйтесь удалять eslint-plugin-react, если вы не используете React.
🐨 Скрипт
Добавьте это в package.json
"scripts": {
"lint": "eslint --ignore-path .gitignore \"**/*.+(js|jsx)\"",
}
💰 Проверить код здесь
Смотрите отзывы eslint в вашем редакторе:
❓️ QA:
🙋♂️ Различия между eslint
и prettier
?
- Используйте prettier для форматирования и линтеры для поиска ошибок.
- Отметьте Prettier vs. Linters
🙋♂️ Различия между extends
и plugins
?
Extends
: существующий набор предопределенных правилPlugins
: предоставляет набор новых правил- Отметьте stackoverflow
🛡 3. Проверить скрипт
Теперь Эслинт и Приттье готовы. Мы добавляем скрипт, который работает красивее и lint для проверки нашего кода.
🐨 Скрипт
Добавить в package.json
"scripts": {
"validate": "npm run check-format & npm run lint"
}
Мы можем запускать все эти скрипты параллельно, используя npm-run-all
🐨 Зависимости
npm install -D npm-run-all
🐨 Сценарий обновления
"scripts": {
"validate": "npm-run-all --parallel lint check-format"
}
💰 Проверить код здесь
🔭 4. Хаски
- Мы не хотим запускать сценарий проверки
npm run validate
вручную перед фиксацией кода. - Husky помогает нам автоматически запускать скрипт перед фиксацией кода.
🐨 Зависимости
npm install -D husky
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npm run validate"
Обычно мы говорим, что пожалуйста, автоматически запускайте npm run validate
перед каждой фиксацией.
Попробуйте нарушить стиль вашего кода, а затем зафиксируйте файлы!
💰 Проверить код здесь
🔬 5. Lint-staged
Выполнение проверки линта и стиля для всего проекта выполняется медленно, вам нужно только линтовать файлы, которые будут зафиксированы.
🐨 Зависимости
npm install -D lint-staged
🐨 Конфигурация
Добавить в package.json
"lint-staged": {
"**/*.+(js|jsx)": [
"eslint"
],
"**/*.+(ts|tsx|js|jsx|json|css|md|mdx|html)": [
"prettier --write",
"git add"
]
}
🐨 Обновить сценарий предварительной фиксации Husky
npx husky set .husky/pre-commit "npx lint-staged"
Попробуйте нарушить стиль вашего кода, а затем зафиксируйте файлы!
💰 Проверить код здесь
🎁 6. Stylelint (Бонус)
Это похоже на Eslint, но для вашего css.
🐨 Зависимости
npm install -D stylelint stylelint-config-standard stylelint-config-prettier
🐨 Конфигурация
Добавить в .stylelintrc.json
{
"extends": [
"stylelint-config-standard",
"stylelint-config-prettier"
]
}
Мы используем stylelint-config-prettier, чтобы отключить все правила, которые не нужны или могут конфликтовать с Prettier.
🐨 Скрипт
"scripts": {
"lint:css": "stylelint --ignore-path .gitignore --fix \"**/*.css\""
},
🐨 Постепенное обновление
"lint-staged": {
// other configs ...
"**/*.css": [
"stylelint --fix"
],
}
💰 Проверить код здесь
Ресурсы
🍀 Проверьте окончательный код
🍀 Я узнал об этой настройке из репозитория static-testing-tools Кента. Я добавил Stylelint, а также перевел Husky на v6.
🍀 Работаете с TypeScript? Отметьте здесь