vue简易微前端项目搭建（四）：统一代码风格（EditorConfig + Eslint + Stylelint + Prettier）

github传送门：
1、h5主项目
2、项目脚手架
3、子项目模板

系列文章传送门：
vue简易微前端项目搭建（一）：项目背景及简介
vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
vue简易微前端项目搭建（三）：webpack相关配置
vue简易微前端项目搭建（四）：统一代码风格（EditorConfig + Eslint + Stylelint + Prettier）

---

1、概述

统一代码风格包括编辑器基本配置、代码校验及格式化工具，强烈建议尝试配置下，特别是eslint起初可能不习惯，三五天时间就适应了，能帮助避免很多低级错误，另外对于团队开发也很重要。
先介绍下这里需要用到的三个工具：

• editorconfig 统一编辑器基本配置
• eslint js校验工具，ts对应的则是tslint。
• stylelint css校验工具，也支持less等css预处理器。
• prettier 代码格式化工具，主要用于格式化html部分的代码格式化，一般写代码习惯好就不需要这个，可配置项很少，有点鸡肋吧，但有总比没有强，虽然我配置后从来没用到过。。。

2、editorconfig

• 对于vscode，需要安装扩展：EditorConfig for VS Code
• 然后项目根目录添加文件 .editorconfig

# https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = crlf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

3、eslint

（1）安装依赖包

npm i @vue/cli-plugin-eslint @vue/eslint-config-standard babel-eslint eslint eslint-plugin-html eslint-plugin-vue -D

（2）添加项目配置文件

• 项目根目录添加 eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  globals: {
    _czc: true
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
}

globals里添加全局变量，比如友盟插件需要的_czc，添加后可以直接调用_czc.push()，当然了，你不怕麻烦可以不配置，但要通过window对象调用，window._czc.push()

• .eslintignore
  配置忽略校验的文件或目录

public
dist

（3）配置vscode

• 安装扩展eslint
• 设置文件 settings.json里添加配置

"eslint.validate": [
  "javascript",
  "javascriptreact", 
  "vue-html",
  "vue"
],
"eslint.options": {
  "plugins": ["html"]
},
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll.stylelint": true
}

4、stylelint

（1）安装依赖包

npm i stylelint stylelint-config-standard stylelint-declaration-block-no-ignored-properties -D

（2）添加项目配置文件

• 项目根目录添加 .stylelintrc.js

module.exports = {
  extends: ['stylelint-config-standard'],
  plugins: ['stylelint-declaration-block-no-ignored-properties'],
  rules: {
    'plugin/declaration-block-no-ignored-properties': true,
    'rule-empty-line-before': null,
    'font-family-no-missing-generic-family-keyword': null,
    'no-descending-specificity': null,
    'color-hex-case': null,
    'no-empty-source': null,
    'block-no-empty': null,
    "selector-pseudo-class-no-unknown": [true,
      { "ignorePseudoClasses": ["global"] }
    ]
  },
  ignoreFiles: [
    'node_modules/**/*',
    'public/**/*',
    'dist/**/*',
    '**/*.js',
    '**/*.jsx',
    '**/*.tsx',
    '**/*.ts'
  ],
}

（3）配置vscode

• 安装扩展stylelint
• 设置文件 settings.json里添加配置

"css.validate": false,
"less.validate": false,
"scss.validate": false,

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll.stylelint": true
}

5、prettier

（1）添加项目配置文件

• 项目根目录添加 .prettierrc.js

module.exports = {
  'eslintIntegration': true,
  'stylelintIntegration': true,
  'tabWidth': 2,
  'singleQuote': true,
  'semi': false,
  'printWidth': 120
}

（2）配置vscode

• vscode添加扩展：Prettier
• 设置文件 settings.json里添加配置

"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "eslintIntegration": true,
    "singleQuote": true,
    "semi": true
  }
}

6、代码提交强制校验

说实话，我感觉引入了这些校验如果不强制就等于没做，总会有人偷懒，所以还是要约束一下。
通过lint-staged实现，在git commit命令运行时先校验lint是否通过，未通过则不予提交。

（1）安装依赖包

npm i lint-staged -D

（2）配置package.json

• script里添加命令lint 和 stylelint：

"scripts": {
   "lint": "vue-cli-service lint",
   "stylelint": "stylelint --config .stylelintrc.js **/*.{vue,html,css,less,scss}"
 }

• 添加 lint-staged 相关配置：

"gitHooks": {
   "pre-commit": "lint-staged"
 },
 "lint-staged": {
   "*.{js,vue}": [
     "npm run lint",
     "git add"
   ],
   "*.{vue,html,css,less,scss}": [
     "npm run stylelint",
     "git add"
   ]
 }

需要注意，强制校验相关的控制文件都是在.git文件夹内，如果不小心删除了这个文件夹，需要重新安装 lint-staged 依赖包才能生效。