配置vue3项目的eslint，Git提交时校验

一、安装Eslint

npm i -D eslint
1

安装必要依赖

npm i -D babel-eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue
1

二、初始化Eslint配置

npx eslint --init
1

可以自定义修改.eslintrc.js文件

module.exports = {
  root: true,
  // 环境配置
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential', // vue3基本的校验
    '@vue/standard' // 选择的代码风格
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    //关闭组件命名规则 
    "vue/multi-word-component-names":"off",
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三、排除不检查的文件夹

在项目根目录中添加 【.eslintignore】文件

node_modules
/dist
package-lock.json
1
2
3

四、配置Git提交时校验

1、 Husky安装与配置

npm i -D husky lint-staged
1

2、husky的命令进行初始化，根目录下面会出现【.husky】文件夹

npx husky install
1

3、执行添加husky脚本的命令

// 生成pre-commit文件
npx husky add .husky/pre-commit

//编辑.husky/pre-commit文件，将undefined改为npm run lint
1
2
3
4

4、配置【package.json】文件的scripts

为什么还要配置【package.json】文件，因为现在的git提交校验只在自己电脑上起作用，如果想要别人拉下来代码就能直接限制校验，则需要配置【package.json】中的【sctipts】

prepare，这个命令是在 执行 npm install之后便会执行于是我们便以下配置

{
    "husky": {
        "hooks": {
          "pre-commit": "lint-staged"
        }
      },
      "lint-staged": {
        "src/**/*.{js,jsx,vue}": [
          // 可以再添加其它lint工具，如：prettier 
          "eslint --fix",
          "git add"
        ]
      },
      "scripts": {
        "prepare": "husky install",
        "lint": "lint-staged",
      }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18