git提交代码自动格式化

                                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指令进行修改代码

 

注：除了安装依赖的时候会因为环境或者网络问题出现错误外，其他的按照步骤进行，应该会很顺利

推荐：node版本跟新太快，可能经常会在老项目与新项目中不停的切换node版本，nvm工具可以实现多版本的node切换，详见：https://blog.youkuaiyun.com/ttxxsir/article/details/82733913