1、安装模块

全局安装 eslint、commitlint 、 check-prettier

npm install eslint commitlint check-prettier -g

本地安装

npm install eslint-config-prettier  stylelint  stylelint-config-prettier stylelint-config-standard husky  @commitlint/config-conventional -D

VSCode 安装 Eslint和Prettier插件

setting.json配置
"eslint.validate": [
    "javascript",
    "javascriptreact"
],
"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"diffEditor.ignoreTrimWhitespace": false,
"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.accessibilitySupport": "off",
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},

2、package 脚本

"scripts": {
    "start": "cross-env PORT=3100 REACT_APP_ENV=dev TEAMIND_ENV=dev node scripts/start.js",
    "start:https": "cross-env PORT=3100 REACT_APP_ENV=dev HTTPS=https TEAMIND_ENV=dev node scripts/start.js",
    "build": "GENERATE_SOURCEMAP=false node scripts/build.js && node scripts/upload.js",
    "lint": "npm run lint:fix && npm run lint:prettier && eslint --ext .js,.jsx src",
    "lint:fix": "eslint --fix --ext .js,.jsx src && npx stylelint --fix 'src/**/*.less' --syntax less",
    "lint:prettier": "check-prettier lint",
    "prettier": "node ./scripts/prettier.js",
    "prepare": "husky install && npx husky add .husky/pre-commit 'npm run lint \n npm run prettier' && npx husky add .husky/commit-msg 'npx --no-install commitlint --edit `$1`' "
},

3、增加自动化脚本

scripts/getPrettierFiles.js

const glob = require('glob')

const getPrettierFiles = () => {
  let files = []
  const jsFiles = glob.sync('src/**/*.js*', { ignore: ['**/node_modules/**', 'build/**'] })
  const tsFiles = glob.sync('src/**/*.ts*', { ignore: ['**/node_modules/**', 'build/**'] })
  const configFiles = glob.sync('config/**/*.js*', { ignore: ['**/node_modules/**', 'build/**'] })
  const scriptFiles = glob.sync('scripts/**/*.js')
  const lessFiles = glob.sync('src/**/*.less*', { ignore: ['**/node_modules/**', 'build/**'] })
  files = files.concat(jsFiles)
  files = files.concat(tsFiles)
  files = files.concat(configFiles)
  files = files.concat(scriptFiles)
  files = files.concat(lessFiles)
  if (!files.length) {
    return
  }
  return files
}

module.exports = getPrettierFiles

scripts/lint-prettier.js

/**
 * copy to https://github.com/facebook/react/blob/master/scripts/prettier/index.js
 * prettier api doc https://prettier.io/docs/en/api.html
 *----------*****--------------
 *  lint file is prettier
 *----------*****--------------
 */

 const prettier = require('prettier')
 const fs = require('fs')
 const chalk = require('chalk')
 
 const prettierConfigPath = require.resolve('../.prettierrc')
 
 const files = process.argv.slice(2)
 
 let didError = false
 
 files.forEach(file => {
   Promise.all([
     prettier.resolveConfig(file, {
       config: prettierConfigPath,
     }),
     prettier.getFileInfo(file),
   ])
     .then(resolves => {
       const [options, fileInfo] = resolves
       if (fileInfo.ignored) {
         return
       }
       const input = fs.readFileSync(file, 'utf8')
       const withParserOptions = {
         ...options,
         parser: fileInfo.inferredParser,
       }
       const output = prettier.format(input, withParserOptions)
       if (output !== input) {
         fs.writeFileSync(file, output, 'utf8')
         // console.log(chalk.green(`${file} is prettier`));
       }
     })
     .catch(e => {
       didError = true
     })
     .finally(() => {
       if (didError) {
         process.exit(1)
       }
       console.log(chalk.hex('#1890FF')('prettier success!'))
     })
 })

scripts/prettier.js

/**
 * copy to https://github.com/facebook/react/blob/master/scripts/prettier/index.js
 * prettier api doc https://prettier.io/docs/en/api.html
 *----------*****--------------
 *  prettier all js and all ts.
 *----------*****--------------
 */

 const prettier = require('prettier')
 const fs = require('fs')
 const getPrettierFiles = require('./getPrettierFiles')
 
 const prettierConfigPath = require.resolve('../.prettierrc')
 const chalk = require('chalk')
 
 let didError = false
 
 const files = getPrettierFiles()
 
 files.forEach(file => {
   const options = prettier.resolveConfig.sync(file, {
     config: prettierConfigPath,
   })
   const fileInfo = prettier.getFileInfo.sync(file)
   if (fileInfo.ignored) {
     return
   }
   try {
     const input = fs.readFileSync(file, 'utf8')
     const withParserOptions = {
       ...options,
       parser: fileInfo.inferredParser,
     }
     const output = prettier.format(input, withParserOptions)
     if (output !== input) {
       fs.writeFileSync(file, output, 'utf8')
       console.log(chalk.green(`${file} is prettier`))
     }
   } catch (e) {
     didError = true
   }
 })
 
 if (didError) {
   process.exit(1)
 }
 console.log(chalk.hex('#1890FF')('prettier success!'))

4、配置文件

.prettierrc

{
  "printWidth": 120,
  "semi": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false, 
  "singleQuote": true,
  "jsxSingleQuote":false,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

commitlint.config.js

module.exports = {
    extends: [
      '@commitlint/config-conventional'
    ],
    rules: {
      'type-enum': [2, 'always', [
        'feat', 'fix', 'refactor', 'docs', 'chore', 'style', 'revert'
       ]],
      'type-case': [0],
      'type-empty': [0],
      'scope-empty': [0],
      'scope-case': [0],
      'subject-full-stop': [0, 'never'],
      'subject-case': [0, 'never'],
      'header-max-length': [0, 'always', 72]
    }
  }

.eslintrc

{
  "parser": "babel-eslint",
  "extends": ["react-app", "prettier"],
  "plugins": [
    // ...
    "react-hooks"
  ],
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "mocha": true,
    "jest": true,
    "jasmine": true
  },
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error",
    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
    "semi": ["error", "never"],
    "eqeqeq": "off",
    "no-use-before-define": "off",
    "no-unused-vars": "off",
    "array-callback-return": "off",
    "no-throw-literal": "off"
  }
}

.stylelintrc.json

{
    "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
    "rules": {
      "no-descending-specificity": null, 
      "no-empty-source": null,
      "no-duplicate-selectors": null,
      "font-family-no-missing-generic-family-keyword": null,
      "selector-pseudo-class-no-unknown": null
    }
 }

5、安装husky

npm i husky -D 初始化 npm run  prepare

# Activate hooks
npx husky install
# or
yarn husky install

# Add hook
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
npx husky add .husky/pre-commit 'npm run prettier npm run lint'

6、 使用

配置后 先执行 npm run prepare 初始化 husky 然后按照规范提交代码即可自动执行全局格式化

7、 问题与解决

通过使用发现的问题与解决方案 问题

• prettier为全局美化代码， 多个文件的提交时， 全局格式化后，会有部分文件美化后，没有提交上去， 需要二次提交， 或者git commit --ament --no-edit
• Eslint 检查也为全局检查， 会影响提交速度 解决方案： 安装 "lint-staged" 配置package.json

 "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint",
      "npm run prettier",
      "git add"
    ],
    "*.{less,scss}": "npx stylelint --fix src/**/*.less --syntax less"
  }

修改.husky

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# npm run lint 
# npm run prettier
npx lint-staged

8、参考链接

husky： Husky - Git hooks
使用husky规范commit记录: cloud.tencent.com/developer/a…