git提交程式碼時自動遵照eslint+prettier規範格式化程式碼

一、環境準備

1、node  6.10+

2、npm 3.10+

二、所需依賴包

1、@vue/cli-plugin-eslint    注入vue-cli-service lint 命令

2、@vue/eslint-config-prettier   設定一些不必要的或者是與prettier衝突的lint選項

3、eslint  eslint-loader  babel-eslint       Eslint的三個外掛用於規範的約束

4、husky  用於git執行指令碼

5、lint-staged  用於配置git指令碼方法

三、配置prettier 如果是新專案，在cli生成專案時選Yes即可（跳過第三條），如果是老專案，當時並沒有選擇這項功能那麼請接著看：

1、安裝依賴

npm install prettier -g

2、在根目錄下新建 .prettierrc檔案並輸入以下內容（當然你也可以自行配置）：

{
    "printWidth": 150,
    "singleQuote": true,
    "trailingComma": "none",
    "semi": true,
    "tabWidth": 4,
    "useTabs": false,
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "always",
    "proseWrap": "preserve",
    "overrides": [
        {
            "files": [
                "*.json",
                ".eslintrc",
                ".tslintrc",
                ".prettierrc",
                ".tern-project"
            ],
            "options": {
                "parser": "json",
                "tabWidth": 4
            }
        },
        {
            "files": "*.{css,sass,scss,less}",
            "options": {
                "parser": "css",
                "tabWidth": 4
            }
        },
        {
            "files": "*.ts",
            "options": {
                "parser": "typescript"
            }
        },
        {
            "files": "*.vue",
            "options": {
                "parser": "vue"
            }
        },
        {
            "files": "*.md",
            "options": {
                "parser": "markdown"
            }
        }
    ]
}
 

3、在package.json的 （可有可無，下面會有更好的方法）

"scripts": {

    "format": "prettier --write \"**/*.{js,css,md}\"", //npm run format格式化命令

},

四、配置Eslint 如果是新專案，在cli生成專案時選Yes即可（跳過第四條，如果是老專案，當時並沒有選擇這項功能那麼請接著看：

1、安裝上述有關Eslint的依賴包

2、根目錄下新建 .eslintrc.js檔案或者 .eslintrc.josn檔案都可以，本文采用.eslintrc.js。建立完成之後新增如下程式碼：

module.exports = {

    root: true,  //此項是用來告訴eslint找當前配置檔案不能往父級查詢

    env: {

        node: true   //指定指令碼執行環境

    },

    extends: ['plugin:vue/essential', '@vue/prettier'],  //擴充套件配置規則 這裡使用prettier

    rules: { //自定義規則，當規則與prettier衝突時以下面為準，規則還有很多，暫不列舉

        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',

        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

        'no-undef': 'off',//未定義變數

        'no-unused-vars':'off',//定義了但未使用的變數

        'no-redeclare':'off',//重複宣告的變數

        'no-empty': 'off',//塊語句中的內容不能為空

    },

    parserOptions: {

       //EsLint預設使用esprima做指令碼解析，可以切換成babel-eslint解析等主流的解析方式

        parser: 'babel-eslint'

    }

};
 

3、在webpack.base.conf.js的rules裡新增如下：

{

   test: /\.(js|vue)$/,

   loader: ['babel-loader','eslint-loader'],

  include:[resolve('src'),resolve('test'),resolve('node_modules/webpack-dev-server/client')]

},

4、在package.json的

"scripts": {

    "lint": "vue-cli-service lint", //建立npm run lint 命令

},

5、至此Eslint 已全部配置完成，可以npm start 控制檯會提示各種error和warring的資訊，根據資訊你可以清楚的看到那些程式碼是不符合規範要求的，然後執行npm run lint會幫你修復部分程式碼，未能自動修復部分，請自行手動修復，或者移除該規則。

五、配置git指令碼

1、安裝依賴

注：在安裝lint-staged的時候會出現如下錯誤：

D:\ztemapgit\ZtMapUI>npm install lint-staged -D
npm ERR! Unexpected end of JSON input while parsing near '...ectories":{},"dist":{'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\DELL\AppData\Roaming\npm-cache\_logs\2018-10-10T08_00_39_403Z-debug.log

解決：執行指令如下：

npm cache clean --force

2、配置 package.json的

"scripts": {

    "precommit": "lint-staged"

  },
"lint-staged": {

    "linters": {

      "src/**/*.js": [  //路徑規則（譯：src下面的所有js檔案，可自行配置）

        "vue-cli-service lint",

        "git add"

      ],

      "src/**/*.vue": [

      "vue-cli-service lint",

      "git add"

      ]

    }

  },//git提交程式碼的時候就會根據vue-cli-service lint指令進行修改程式碼

注：除了安裝依賴的時候會因為環境或者網路問題出現錯誤外，其他的按照步驟進行，應該會很順利