在vue项目中配置eslint + lint-staged + prettier

在现有的vue项目中加入代码规范检查主要步骤如下：

项目改造

1、项目中可以先执行 npx eslint --fix看项目是否能正常运行

如果不报错可以略过此步骤，直接执行下面第二步。

如果报错为：

js 复制代码

ERROR TypeError: CLIEngine is not a constructor  
TypeError: CLIEngine is not a constructor

原因是eslint使用的版本过高，可执行下面命令重新更新依赖版本。同时把prettier、lint-staged这两个库也安装上。

js 复制代码

npm uninstall eslint

npm install [email protected] -D

npm install lint-staged -D

npm i prettier -D

2、项目根目录是否存在.eslintrc

eslintrc查找规则：.eslintrc.js>.eslintrc.json>.eslintrc>package.json

3、项目根目录是否存在.prettierrc,如果存在需要和eslint中的配置相同(下面prettier --write会使用到这里的配置)

关于prettier相关配置字段可以参考官网传送门

.prettierrc文件内容可以参考下面配置：

json 复制代码

{

    "eslintIntegration": true,

    "stylelintIntegration": true,

    "tabWidth": 4,

    "semi": true,    

    "printWidth": 200,

    "singleQuote": true,

    "bracketSpacing": true,

    "arrowParens": "avoid",

    "trailingComma": "none"

}

4、修改package.json, 增加如下配置

json 复制代码

"devDependencies": {

    ... 略

    "lint-staged": "^10.2.0",

    "prettier": "^2.8.8"

    ... 略

  }

下面这段配置加在与devDependencies同级下面即可。

json 复制代码

"gitHooks": {

    "pre-commit": "lint-staged  --allow-empty"

  },

  "lint-staged": {

    "src/**/*.{js,jsx,ts,tsx,json,less,scss,css,vue}": [

      "prettier --write",

      "eslint --fix",

      "git add ."

    ]

  }

其中[js|ts]中没有引入prettier --write，每个项目可以单独加，前提eslint、prettierrc配置需要一样，否则造成冲突，可能会导致提交不通过。

5、测试代码是否生效

提交git commit 后，出现如下内容，即为生效：

6、需要注意的问题

为了避免提交时报错，先检查先项目安装的eslint版本，如果版本高于8.x.x, 最好先降低版本到7.32.0。当然，这取决于你本地项目的node版本，因为我参与的项目80%node版本都是14.x.x以下的，所以一般与eslint的7.32.0版本进行匹配。
团队内部分项目依赖的三方库都放在CDN上面了，所以本地可能没有vue这个库的依赖，所以需要单独安装另外一个库yorkie。执行下面命令进行安装:

js 复制代码

npm install [email protected] --save-dev

gitHooks 可以在package.json中使用因为vue-cli内置了yorkie , 它是一个fork自husky的一个模块。具体可以参考文档yorkie

上面改造的步骤，可能无法覆盖所有场景，欢迎小伙伴指正纠错，感谢~。