Vue3学习（四）集成eslint&git

步骤

1、安装eslint

npm i eslint --save-dev

2、新建.eslintrc文件

文件内容如下：

{
    "extends": ["plugin:vue/recommended", "prettier"], // 是一个 npm 包，它输出一个配置对象。要确保这个包安装在 ESLint 能请求到的目录下
    "env": {
        "browser": true
    },
    "rules": {
        "linebreak-style": ["error", "unix"], // 强制使用一致的换行风格
        "semi": ["error", "always"], // 要求或禁止使用分号代替 ASI
        "max-len": [1], // 强制一行的最大长度
        "max-params": [2, 10], // 强制函数定义中最多允许的参数数量
        "dot-notation":1, // 强制尽可能地使用点号
        "no-nested-ternary": [1], // 尽量不用嵌套的三元表达式
        "no-self-compare": 1, // 禁止自身比较
        "no-use-before-define": 0, // 禁止在变量定义之前使用它们
        "no-unused-vars": 0, // 禁止出现未使用过的变量
        "indent": ["error", 4], // 强制使用一致的缩进
        "eqeqeq": [1], // 要求使用 === 和 !==
        "object-curly-spacing": ["error", "always"],  // 对象{} 两侧空格
        "space-infix-ops": ["error", { "int32Hint": false }], // 操作符空格 a + b
        "comma-spacing": ["error", { "before": false, "after": true }], // 逗号后空格
        "arrow-spacing": ["error", { "before": true, "after": true }], // 箭头函数两侧空格
        "key-spacing": ["error", { "beforeColon": false,  "afterColon": true }], // key value中间的空格
        // 强制在注释中 // 或 /* 使用一致的空格
        "spaced-comment": ["error", "always", {
            "block": {
                "exceptions": ["*"],
                "balanced": true
            }
        }],

        "vue/attribute-hyphenation": [2, "always", { "ignore": ["custom-prop"] }], // 属性用连字符号连接
        "vue/mustache-interpolation-spacing": [2, "always"],    // template {{ data }}空格
        "vue/space-infix-ops": ["error", {"int32Hint": false}], // template 操作符空格
        "vue/object-curly-spacing": ["error", "always"],  // template 对象{} 两侧空格
        "vue/eqeqeq": "error",  // template 全等
        "vue/no-parsing-error": [0], // 指令、mustaches、html标签中的一些错误
        "vue/valid-v-if": [1], // 检查每一个v-if指令是否是有效的
        "vue/html-self-closing": [0],
        "vue/component-name-in-template-casing": ["error", "kebab-case", { // my-component
            "registeredComponentsOnly": false, // 如果为真，则只检查已注册的组件。如果为假，则全部检查
            "ignores": []
        }],
        "vue/name-property-casing": ["error", "PascalCase"], // 组件名MyComponent export default { name: 'MyComponent'}
        "vue/prop-name-casing": ["error", "camelCase"], // 在声明 prop 的时候，其命名应该始终使用小驼峰myProp，而在模板和 JSX 中应该始终使用my-prop
        "vue/require-prop-types": "error", // props定义尽量详细,包含类型
        "vue/require-v-for-key": "error", // 给v-for设置键值，与key结合使用
        "vue/no-use-v-if-with-v-for": ["error", { // 不要把 v-if 和 v-for 用在同一个元素上
            "allowUsingIterationVar": false
        }],
        "vue/v-bind-style": ["error", "shorthand"], // 指令缩写使用：
        "vue/v-on-style": ["error", "shorthand"], // 指令缩写使用@

        "@typescript-eslint/no-unused-vars": "warn",   // fix类型引用还提示never used
        "@typescript-eslint/type-annotation-spacing": ["error", { "before": false, "after": true }], // 类型前空格 test: Test = {};
        // 类型 大驼峰
        "@typescript-eslint/naming-convention": [
            "error",
            {
            "selector": "typeLike",
            "format": ["PascalCase"]
            }
        ]

    },
    "parserOptions": { // 解析器选项
        "parser": "@typescript-eslint/parser", // 使用的解析器，ESLint 默认使用Espree作为其解析器
        "ecmaVersion": 2017, // 指定你想要使用的 ECMAScript 版本
        "sourceType": "module"
    },
    "globals": {
        "_i18n": true
    },
    "plugins": ["prettier", "promise", "vue", "@typescript-eslint"] // ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。
}

3、安装依赖包

1、根据parserOptions选项安装解析器

npm i @typescript-eslint/parser --save-dev

2、根据plugins选项安装插件

npm i eslint-plugin-prettier eslint-plugin-promise eslint-plugin-vue @typescript-eslint/eslint-plugin --save-dev

3、根据extends选项安装扩展

npm i eslint-config-prettier --save-dev

4、安装prettier-eslint-cli

nom i prettier-eslint-cli --save-dev

4、新建.eslintignore文件

内容如下：

/node_modules
/package-lock.json
.DS_Store

5、新建eslint.sh文件

内容如下：

filesCheckedByEslint=`git diff-index --cached HEAD --name-only --diff-filter ACMR | grep -v mockData | grep -v dep | egrep '(.js|.vue|.jsx|.ts)$'`

if [ "$filesCheckedByEslint" ];then
    ./node_modules/eslint/bin/eslint.js --fix $filesCheckedByEslint
else
    echo 'there is no js files to eslint check!'
fi

6、配置package.json文件

安装pre-commit

npm i pre-commit --save-dev 

配置内容如下：

  "scripts": {
    "eslint": "sh eslint.sh"
  },
  "pre-commit": [
    "eslint"
  ]

注意

在eslint的规则选择上可以参考：

官网：风格指南

Vue风格指南总结及对应ESLint规则配置

rules中的规则：https://cn.eslint.org/docs/rules/

vue相关的规则：https://eslint.vuejs.org/rules/

在git提交使用eslint校验可以参考：

ESLint学习（四）如何在提交时检查代码