ESLint+Prettier+stylelint+husky+lintStaged 搭建工作流的完整指南

ESLint、Prettier、stylelint、husky 和 lintStaged 都是流行的代码风格检查和格式化工具，它们可以帮助您保持代码的一致性和可读性，提高代码质量并减少错误。

在开始之前，您需要确保已经安装了 Node.js 和 npm。

1. 安装 ESLint

npm install eslint --save-dev

2. 创建 .eslintrc 文件

在项目根目录中创建一个名为 .eslintrc 的文件，并添加以下内容：

{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "rules": {
    "indent": ["error", 2],
    "semi": ["error", "always"]
  }
}

3. 安装 Prettier

npm install prettier --save-dev

4. 创建 .prettierrc 文件

在项目根目录中创建一个名为 .prettierrc 的文件，并添加以下内容：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}

5. 安装 stylelint

npm install stylelint --save-dev

6. 创建 .stylelintrc 文件

在项目根目录中创建一个名为 .stylelintrc 的文件，并添加以下内容：

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "selector-list-comma-newline-after": "always"
  }
}

7. 安装 husky

npm install husky --save-dev

8. 安装 lint-staged

npm install lint-staged --save-dev

9. 创建 .huskyrc 文件

在项目根目录中创建一个名为 .huskyrc 的文件，并添加以下内容：

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

10. 创建 .lintstagedrc 文件

在项目根目录中创建一个名为 .lintstagedrc 的文件，并添加以下内容：

{
  "*.js": ["eslint --fix", "prettier --write"],
  "*.css": ["stylelint --fix"]
}

现在，您已经成功搭建了 ESLint、Prettier、stylelint、husky 和 lintStaged 的工作流。每次您提交代码时，husky 会自动运行 lint-staged，lint-staged 会根据 .lintstagedrc 文件中的配置运行 ESLint、Prettier 和 stylelint 来检查和格式化代码。

希望这篇指南对您有所帮助。如果您有任何问题，请随时评论。