步驟

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規則配置