Почему

👉 Предотвращение совершения неверного кода. Это самый дешевый способ убедиться, что ваш код действителен.

Настраивать

  • Красивее
  • 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"
  ],
}

💰 Проверить код здесь

  • Работаете с SCSS? Отметьте здесь
  • Работаете с Styled-component? Отметьте здесь

Ресурсы

🍀 Проверьте окончательный код
🍀 Я узнал об этой настройке из репозитория static-testing-tools Кента. Я добавил Stylelint, а также перевел Husky на v6.
🍀 Работаете с TypeScript? Отметьте здесь