git commit 设置 eslint + pretter 格式化校验,导出报告

系统版本

node 版本: v14.17.5
npm 版本: 6.14.14
vue-cli 版本: @vue/cli 4.5.19

目录

系统版本

1. 新建一个 vue2.X 空项目

2. 安装插件 eslint ,并初始化 eslint 配置,根目录生成 .eslintrc 配置文件

3. 测试 eslint 配置

4. 安装 husky、lint-staged

5. 在package.json 加入hushy、lint-staged配置

6. 新建git 仓库测试一下


1. 新建一个 vue2.X 空项目

vue create git-commit-eslint-demo 

cd git-commit-eslint-demo

2. 安装插件 eslint ,并初始化 eslint 配置,根目录生成 .eslintrc 配置文件

npm i eslint@8.40.0 -D
npx eslint --init

 

3.测试 eslint 配置

3.1 在.eslintrc 的 rules 中加入"quotes": ["error", "single"], 不允许使用双引号

3.2 在 package.json scrtipt 中加入 "lint": "eslint src" 

3.3  在main.js 中加入  console.log("hello world"),触发eslint

 

3.4 然后终端运行 npm run lint ,eslint 提示报错,证明eslint 安装成功 

4. 安装 husky、lint-staged 、prettier

husky: husky是一个给 git 增加 hooks 工具

lint-staged:  一个在 git 暂存文件上(也就是被 git add 的文件)运行已配置的 linter(或其他)任务。lint-staged 总是将所有暂存文件的列表传递给任务

npm i husky@4.3.8 lint-staged@9.5.0 prettier -D

 4.1 在package.json scripts 新增脚本  "prepare": "husky install"

 4.2 生成 .husky 文件夹(当前文件夹)

npm run prepare 

4.3 .生成 pre-commit 文件,并修改  npx lint-staged

 npx husky add .husky/pre-commit

5. 在package.json 加入hushy、lint-staged配置

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "eslint src",
    "prepare": "husky install"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "prettier --write",
      "eslint"
    ]
  },

6. 新建git 仓库测试一下

git init 
git add .
git commit -m "测试"

7.导出报告(eslint-plugin-html)

npm i eslint-plugin-html@7.1.0 -D

7.1 添加导出命名

"lint": "eslint src --format html --no-color --output-file report.html"

7.2 运行 npm run lint 测试

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值