在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

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

相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6738 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维