eslint+husky+lint-staged 配置webpack项目,制定前端代码规范

webpack项目中制订前端代码规范

所谓规范，其实就是大家约定一些东西,并去遵守它。

1. 安装eslint

yarn add eslint -D 
或者 
npm install eslint -D

2. #### 初始化eslint，详细步骤如下

yarn run eslint --init
或者
npm run eslint --init

此时命令行会给出相应的选项，我这里选择是第三个，检查语法并发现问题，强制代码风格。

选择Javascript模块(es模块)。

选择项目使用的框架，因为我的项目框架是React，所有这里选择的是React。

项目是否使用Typescript，我这里选择的是。

选择代码的运行环境，我这里选择是Browser，也就是浏览器。

选择项目代码风格，直接选择流行的风格，当然，如果你想自定义，那选其它的吧 。我这里直接选择的Standard，

有关Standard,请移步这里，Standard官方文档

选择配置文件类型，给出了三个选项，js,yaml,json，我这里选择json

最后会提示是否安装以上选择配置所需的依赖，直接安装即可。 完成配置后项目根目录会生成.eslintrc文件，文件内容如下：

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "standard"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    //  这里配置默认为空，以下配置是为了解决提示React未被使用所配
    "rules": {
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": [
            "error"
        ]
    }
}

3. 安装webpack的eslint插件

如果是webpack5

yarn add eslint-webpack-plugin -D
或者
npm install eslint-webpack-plugin -D

如果是webpack4

yarn add eslint-webpack-plugin@2 -D
或者
npm install eslint-webpack-plugin@2 -D

最简单够用配置如下，此插件的作用是当我们写了不符合Standard规范的代码时，webpack会编译失败并提示

const ESLintPlugin = require('eslint-webpack-plugin')

new ESLintPlugin({
  context: './src', // 检查目录
  extensions: ['js', 'jsx', 'ts', 'tsx'] // 文件扩展
}),

编译失败时

4. 安装husky，lint-staged

yarn add husky lint-staged -D
或者
npm install husky lint-staged -D

最新版的husky推荐使用如下命令初始化

npx husky-init && npm install // 使用npm初始化
npx husky-init && yarn // 使用yarn 1.x版本初始化
yarn dlx husky-init --yarn2 && yarn // 使用yarn 2版本初始化

初始化后根目录会生成.husky文件夹，我们重点关注里面的pre-commit文件， 默认生成的内容如下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm test

引用官方的描述如下： 它将设置 husky，修改 package.json 并创建一个您可以编辑的示例预提交挂钩。默认情况下，它会在您提交时运行 npm test。

下来是配置lint-staged，以pre-commit为例：

修改pre-commit文件内容为

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

package.json中添加

  "lint-staged": {
    "src/**/*.{js,jsx,tsx,ts}": "eslint --fix"
  },

这样，当我们提交commit前，eslint会校验代码，校验不通过会阻止本次commit 例如：声明了一个变量，但未使用时

当然，husky也提供了其它的钩子，请移步husky官网

5. 关于Standard

借用官网的话

本工具通过以下三种方式为你（及你的团队）节省大量时间：

• 无须配置。  史上最便捷的统一代码风格的方式，轻松拥有。
• 自动代码格式化。  只需运行 standard --fix 从此和脏乱差的代码说再见。
• 提前发现风格及程序问题。  减少代码审查过程中反反复复的修改过程，节约时间。

无须犹豫。再也不用维护 .eslintrc, .jshintrc, or .jscsrc 。开箱即用

当然，我们没有直接使用Standard，而是使用的eslint-config-standard

6. 通过以上配置，我们约定了最基本的代码规范

• 所有脚本请遵循eslint配置中约定的代码风格
• husky+lint-staged在提交时强制风格

参考文档

eslint standard husky eslint-webpack-plugin lint-staged