在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 eslint@7.32.0 -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、需要注意的问题

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

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

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

相关推荐
知识分享小能手3 分钟前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言21 分钟前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友2 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手2 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿2 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜052 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau3 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123453 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw03 小时前
Flutter基础(前端教程③-跳转)
前端·flutter