eslint+stylelint+prettier+husky+commitlint+vscode实现vue编码规范自动化管理

前言

在日常的coding编码过程中，难免会遇到其他的同事的编码并没有严格按照入职时的编码规范来严格编码，导致项目中的代码混乱无序，没有按照一定的规则规范，使得最终的整个项目不是完整的一个项目，因此，很有必要将所有的童鞋的编码习惯以及编码风格给统一起来，但又不想直接通过阅读代码的方式以及强制要求的方式要限定统一的规格！
eslint + stylelint + prettier + husky + vscode = 编码规范自动化

实现步骤(vue项目)

👇 以一个实际的vue项目来具体一步一步配置完整的编码规范项目！

手动挡方式配置

1. 安装eslint以及prettier相关配置

1	npm install eslint eslint-plugin-standard vue-eslint-parser --save-dev

🌠 这里的vue-eslint-parser 👉 主要是用于解析vue文件的，因此默认的eslint只能够处理普通的js文件！

🌠 由于eslint与prettier都能够格式化代码以及部分规则存在冲突，为避免冲突，需要安装对应的eslint-config-prettier，这个库用于解决eslint与prettier之间的冲突，关掉额外的报错(比如eslint与prettier都存在单引号的错误)！

🌠 而eslint-plugin-prettier则可以将prettier作为eslint规则来运行！
因此就有安装 👇 两个库的存在：

1	npm install eslint-config-prettier eslint-plugin-prettier --save-dev

🌟 由于是vue项目，现代项目更多的是采用ES5+以后的语法规则，但这个eslint仍然只能解析es5的相关js代码，因此需要安装对应的babel系列“套餐”，包括有babel-eslint(用于在eslint中使用babel解析的插件或者工具，将babel集成到eslint中，使得eslint可以解析最新版本的ESMAScript语法)、babel-core以及eslint-plugin-babel，后两者是babel-eslint所依赖的库

1	npm install babel-eslint babel-core eslint-plugin-babel --save-dev

🌠 由于eslint仅能够识别*.js文件，因此，需要额外配置对应的vue解析器，vue官方也提供了对应的解析器：vue-eslint-parser，对应的官网为：vue解析器官网

1	npm install eslint-plugin-vue -save-dev

⚠ 这里这里的eslint-plugin-vue对于node的版本 🈶 对应的要求，可以根据安装过程的依赖版本提示进行对应的调整！安装完成后，在对应的.eslintrc文件中配置对应的parser

module.exports = {
  // 此处隐藏一系列代码
  "parser": "vue-eslint-parser",
  "parserOptions": {
      "parser": "@babel/eslint-parser",
      "sourceType": "module"
  }
}

2. 创建对应的配置文件(以`.eslintrc.js`为例)

module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
  },
  extends: ['eslint:recommended', 'plugin:vue/essential', 'prettier'],
  plugins: ['prettier'],
  parser: 'vue-eslint-parser',
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2018,
    ecmaFeatures: {
      globalReturn: false,
      impliedStrict: false,
      jsx: false,
    },
  },
  rules: {
    'prettier/prettier': 'error',
    'no-unused-vars': 'off',
    'vue/multi-word-component-names': 'off',
    'no-useless-escape': 'warn',
    'generator-star-spacing': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //强制使用单引号
    quotes: ['error', 'single'],
    //强制不使用分号结尾
    semi: ['error', 'never'],
  },
}

3. 安装stylelint以及对应的prettier配置

1	npm install stylelint stylelint-config-prettier stylelint-config-standar --save

🤫 正常情况下安装完成后，可以直接通过npx相关命令直接运行已经在当前项目中安装的脚本程序，但是，实际情况却完全不一样：

😤 去对应的官网的github上查找了一下相关的说明介绍：

👉 因此只能根据安装依赖时的版本提示，进行对应的版本调整

🌠 调整完成后，发现 🈶 以下的一个执行结果：

这个是由于标准的stylelint只能处理*.css文件，因此需要追加对应的stylelint-less、stylelint-scss、stylelint-prettier

1	npm install stylelint-less stylelint-scss stylelint-prettier --save-dev

安装完成后，需要在对应的.stylelintrc.js相关的stylelint配置文件中进行对应的解析器配置！

module.exports = {
  "extends": ["stylelint-config-standard", "stylelint-prettier/recommended"],
  "customSyntax": "postcss-less",
  "plugins": ["stylelint-less", "stylelint-prettier"],
  "rules": {
    "prettier/prettier": true
  }
};

🌠 完成对应的配置后，再次执行对应的命令，即可看到 👇 的输出结果：

4. husky实现勾子自动检查

安装husky以及相关的勾子函数动作

1 2	npx husky-init && npm install npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

5. 安装commitlint

安装commitlint校验工具(commitlint)以及校验规则(@commitlint/config-conventional)

1	npm install commitlint @commitlint/config-conventional --save-dev

关于这个commitlint的配置与使用，具体可以参考之前已经编写过的一个文章：husky是如何实现自动化代码管理的

6. 安装changelog

😕 有观察过这个github开源的一些项目，他们所提交的代码都有对应的这个changelog，那么这个业界的changelog应该是怎样的呢？如何与网络上的大伙保持在同一个水平线上呢？关于这个changelog可以参考之前的另外一个主题：husky是如何实现自动化代码管理的

7. 安装lint-staged

假如每一次提交的代码，都需要进行eslint、stylelint、prettier、commit-msg一系列动作的话，随着代码量的逐渐增加，估计会加大每次提交代码的等待时长，因此，可以使用这个lint-staged，仅针对每次提交的代码进行这个检查动作!

1	npm install lint-staged --save-dev

🌠 新增对应的配置文件：

// lint-staged.config.js
module.exports = {
  '*.js': ['eslint --cache --fix', 'git add'],
  '*.vue': ['eslint --cache --fix', 'git add'],
}

这个lint-staged的执行过程就是根据已经匹配的文件，执行对应的脚本，将匹配到的文件与脚本做一个关联合并执行，这是什么意思呢？还是以上面 ☝ 的配置做一个对应的说明：

👉 这里假设匹配到的文件是main.js以及utils.js两个js文件，那么执行lint-staged的时候，将会是以下的过程：

遍历脚本对象/数组，与匹配到的文件进行连接：eslint --cache --fix main.js utils.js、git add main.js utils.js;
将上述形成的连接，形成两个顺序执行的命令，等待第一个执行完毕之后，继续执行下一个命令；
对于不同的文件的配置，像这里的js以及vue，则将形成对应两个并列待执行的数组命令，也就是说对js文件的处理以及对vue文件的处理过程，两者是并行的