背景

发现有QOA 前端vue代码格式混乱，考虑到是多人协作的项目，引入代码检查工具可以统一项目风格，提高代码质量，避免不同开发IDE格式化引起的代码混乱

调研

现在社区内流行用通过hook commit 然后统一对代码进行格式化，再者本地进行eslit校验，修改好后再允许提交

工具集：

commit钩子：husky
代码格式化：prettier
缓存区验证：lint-staged
lint验证： eslint

集成步骤

1.安装相关包

npm install --save-dev babel-eslint eslint eslint-plugin-prettier eslint-config-prettier prettier
npm install --save-dev eslint-plugin-vue
npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
npm install lint-staged@8.1.7 --save–dev (此处安装8.1.7版本由于最新版本的 lint-staged 要求的node版本与本地开发版本不一致，为了保持开发与线上开发环境一致，因此降级安装 lint-staged)
npm install prettier --save--dev
npm install --save-dev lint-staged husky

2.安装ide相关代码格式化工具

vue：

安装vetur
安装eslint
安装prettier

3. 配置eslint，在项目根目录下创建.eslintrc.js 并书写相关配置

4. 配置prettier,在项目根目录下创建.prettierrc.json并书写相关配置

5.书写package.json 中 script中加入以下内容

"scripts": {
    "lint": "eslint --ext .js,.vue ./;exit 0",
    "lint:fix": "eslint --fix --ext .js,.vue ./;exit 0",
    "eslint-check": "eslint --print-config . | eslint-config-prettier-check",
	"format": "git add . && lint-staged",
}

6.再在package.json 中加入以下内容

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "prettier --write",
      "eslint --fix"
    ]
  }

7.配置本地IDE环境校验规则（以vscode 为例，在settings.json中加入以下代码）

"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "htmlWhitespaceSensitivity": "ignore",
    "semi": false,
    "singleQuote": true,
    "printWidth": 120
  }
},
"vetur.format.defaultFormatter.html": "prettier",
"vetur.validation.template": false,

"eslint.autoFixOnSave": true,
"eslint.validate": [
  "javascript",
  "javascriptreact",
   {
     "language": "vue",
     "autoFix": true
   }
],


"prettier.disableLanguages": [],
"prettier.eslintIntegration": true,

以上关于集成代码检查工具流基本操作完毕，有兴趣的同学可以研究下集成stylelint进入自己的ide

代码检查工作流

背景

调研

集成步骤

各个npm包说明

相关链接