关于eslint+prettier+husky的配置及说明

一、关于eslint+prettier+husky

eslint、prettier和husky都是在前端开发中常用的工具，具体的应用场景如下：

• eslint：用于静态代码检查，检查JavaScript代码是否符合规范。
• prettier：代码格式化工具，可以定义代码风格规范，自动格式化代码。
• husky：Git钩子工具，可以在Git提交、推送前运行一些脚本，可以在代码提交前做一些必要的检查和处理工作。

配置eslint+prettier+husky的目的是为了提高代码的可读性、可维护性和最终的代码质量，以下是具体的配置和说明。

二、配置eslint+prettier+husky

首先，我们需要安装三个工具：eslint、prettier和husky。

npm install eslint prettier husky --save-dev

然后，我们需要在项目中创建一个.eslintrc文件，用于在VSCode编辑器中使用eslint插件时生效。

{
  "extends": ["eslint:recommended", "prettier"], // 继承eslint的推荐规则和prettier的规则
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error" // 将prettier视为一个eslint插件并报出错误
  },
  "parserOptions": {
    "ecmaVersion": 2018, // 指定使用的ECMAScript版本
    "sourceType": "module" // 指定使用的模块化标准
  },
  "env": {
    "browser": true, // 指定环境为浏览器环境
    "node": true // 指定环境为Node.js环境
  }
}

上述配置文件中，我们指定了使用eslint的推荐规则和prettier的规则，并将prettier视为一个eslint插件。同时，我们还指定了使用ES2018的语法和使用浏览器和Node环境。用户可以根据自己的情况修改这些设置。

接下来，我们需要在项目中添加一个.prettierrc文件，用于配置prettier的规则。

{
  "printWidth": 120, // 每行的最大字符数
  "tabWidth": 2, // 缩进的空格数
  "useTabs": false, // 是否使用制表符进行缩进
  "semi": true, // 是否在语句末尾添加分号
  "singleQuote": true, // 是否使用单引号
  "quoteProps": "as-needed", // 对象字面量属性的引号使用规则
  "jsxSingleQuote": true, // JSX中是否使用单引号
  "trailingComma": "none", // 是否使用行末逗号
  "bracketSpacing": true, // 对象字面量括号前后是否有空格
  "jsxBracketSameLine": false, // JSX闭合括号是否另起一行
  "arrowParens": "avoid", // 箭头函数参数是否带括号
  "rangeStart": 0, // 限制文件格式化的起始行
  "rangeEnd": Infinity, // 限制文件格式化的结束行
  "proseWrap": "preserve", // 是否换行
  "requirePragma": false, // 标记代码是否格式化
  "insertPragma": false, // 启用标记代码的打印宽度
  "overrides": [] // 自定义文件类型的规则
}

上述配置文件中，我们指定了使用单引号、不使用行末逗号等规则，用户可以根据自己的需求修改这些设置。

最后，我们需要在package.json文件中定义husky钩子的配置。

{
  "scripts": {
    // 运行eslint检测
    "lint": "eslint --fix --ext .js,.vue src/",
    // 运行prettier格式化代码
    "format": "prettier --write 'src/**/*.{js,vue,html}'",
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run format" // 在提交前运行lint和format命令
    }
  }
}

上述配置文件中，我们定义了两个脚本lint和format，用于分别运行eslint和prettier的检测和格式化。同时，我们在husky的pre-commit钩子中，同时运行lint和format命令。

三、示例说明

为了更好地理解eslint、prettier和husky的应用，下面给出两个例子进行说明。

例子一：检查Vue项目

假设我们正在开发一个Vue项目，并且需要检查代码是否符合规范。首先，我们需要在Vue项目中安装eslint、prettier和husky。

npm install eslint prettier husky --save-dev

然后，我们需要在项目中创建一个.eslintrc文件，用于设置检查规则。

{
  "extends": ["plugin:vue/vue3-recommended", "eslint:recommended", "prettier"],
  "plugins": ["vue", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  },
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true
  }
}

这里我们使用了Vue官方提供的vue3-recommended规则，并且使用了prettier规则。我们还指定了使用Babel解析器。

接着，我们需要在项目中添加一个.prettierrc文件。

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "rangeStart": 0,
  "rangeEnd": Infinity,
  "proseWrap": "preserve",
  "requirePragma": false,
  "insertPragma": false,
  "overrides": [
    {
      "files": "*.md",
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

这里我们指定了一些格式化相关的规则，并且可以针对不同类型的文件进行自定义的配置，这里我们针对Markdown文件进行了缩进规则的修改。

最后，我们需要在package.json文件中定义husky的钩子。

{
  "scripts": {
     "lint": "eslint --fix --ext .js,.vue src/",
     "format": "prettier --write 'src/**/*.{js,vue,html,css}, *.md'"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run format"
    }
  }
}

这里我们定义了pre-commit钩子，可以在每次提交代码时自动检查和格式化代码。

例子二：检查React项目

假设我们正在开发一个React项目，并且需要检查代码是否符合规范。我们可以按照如下流程进行配置。

首先，我们需要在React项目中安装eslint、prettier和husky。

npm install eslint prettier husky --save-dev

然后，我们需要在项目中创建一个.eslintrc文件，用于设置检查规则。

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "import/prefer-default-export": "off"
  },
  "globals": {
    "React": true
  }
}

这里我们使用了Airbnb提供的规则，并且使用了prettier规则。我们还针对React相关的规则进行了一些更改。

接着，我们需要在项目中添加一个.prettierrc文件。

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "rangeStart": 0,
  "rangeEnd": Infinity,
  "proseWrap": "preserve",
  "requirePragma": false,
  "insertPragma": false,
  "overrides": []
}

这里我们进行了一些格式化相关的规则设置。

最后，我们需要在package.json文件中定义husky的钩子。

{
  "scripts": {
     "lint": "eslint --fix --ext .js,.jsx src/",
     "format": "prettier --write 'src/**/*.{js,jsx,html,css}'"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run format"
    }
  }
}

这里我们定义了pre-commit钩子，可以在每次提交代码时自动检查和格式化代码。

以上就是关于eslint、prettier和husky的配置和说明。通过这些工具的合理使用，可以为我们的前端开发带来很大的便利。