Step 1: 安装包

npm i -D eslint eslint-config-prettier eslint-plugin-prettier prettier husky lint-staged babel-eslint

Step 2: 配置.eslintrc.js

{
...
  extends: [
  ....
    'prettier'
],
  plugins: [
...
'prettier'
],
parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
    ecmaVersion: 2015,
  },
rules: {
'prettier/prettier': ['error'],
}
}

Step 3: 配置package.json

"lint-staged": {
    "!(*test).js": "eslint --fix",
    "*.json": "prettier --write"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "npm test"
    }
  },

Step 4: 新增prettier配置文件

在根目录中新增prettier.config.js, 相关配置api参考：https://prettier.io/docs/en/configuration.html

module.exports = {
    trailingComma: 'es5',
    tabWidth: 2,
    semi: false,
    singleQuote: true,
  }

Step 5: test prettier

在某个js文件中修改tab设置为4，假设路径为./test.js

npx eslint --fix ./test.js

正常执行后tab 从4变为2，否则没有生效。