项目集成eslint,prettier

vue: 2.6.X

node: 12.x.x

vscode ctrl+Shift+p → 打开用户设置 → 工作区点击右上角图标，转为JSON格式

{
  // 将prettier设置为默认格式化程序(在编辑器中有可能被其他Formatter占用，所以将prettier设置为默认Formatter)
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 保存时自动格式化 (根据根目录下‘.prettierrc文件配置项’)
  "editor.formatOnSave": true,
  // Enable per-language
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  // 为ESLint启用“保存时自动修复”，并且仍然具有格式和快速修复功能
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  }
}

安装依赖

npm install -D eslint eslint-config-prettier eslint-plugin-prettier prettier

根目录增加 .eslintrc 文件

{
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
  },
  env: {
    browser: true,
  },
  extends: [
    // <https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention>
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // <https://github.com/standard/standard/blob/master/docs/RULES-en.md>
    // 'standard'
    'plugin:prettier/recommended',
  ],
  // required to lint *.vue files
  plugins: ['vue'],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
}

根目录增加 .prettierrc 文件

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "arrowParens": "avoid",
  "useTabs": false,
  "bracketSpacing": true
}

package.json文件修改：

"scripts": {
	...
	"lint": "eslint --fix --ext .js,.vue src/views/test",
}

增加git提交校验

安装依赖husky

npm install -D husky

npm husky instal

在package中增加
"scripts": {
	...
	"prepare": "husky install"
}

创建pre-commit文件（钩子）

**mac**
npx husky add .husky/pre-commit "npm test"

**windows**
npx husky add .husky/pre-commit 
**windows** pre-commit文件内容修改为：
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run lint
git add .

创建commit-msg文件（钩子）

**windows**
npx husky add .husky/commit-msg

文件内容修改为：
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no -- commitlint --edit $1

遇到的问题：

自动保存时代码样式会依据.prettierrc文件内的设置自动修复，但是没有红色下划线的提示。

原因： prettier依赖版本冲突，降级解决

vue2.x项目集成eslint,prettier,husky

项目集成eslint,prettier