Vite+Vue3.0配置Eslint +Prettier+GitCommit

配置 Eslint

安装eslint

# 初始化一个.eslintrc.js并自动安装相关依赖
$ npx eslint --init

---
You can also run this command directly using 'npm init @eslint/config'. 
=> To check syntax and find problems
What type of modules does your project use? 
=> JavaScript modules (import/export)
Which framework does your project use? 
=> Vue.js
Does your project use TypeScript?
=> Yes
Where does your code run?
=> Browser
What format do you want your config file to be in?
=> JavaScript
Would you like to install them now?
=> Yes

安装完成之后会自动在根目录下生成一个 .eslintrc.cjs 文件， 把下面的内容粘贴到这个文件里（此文件配置为我个人常用配置，可随自己习惯修改配置）， 相关配置项参考https://blog.csdn.net/weixin_47401153/article/details/129183343?spm=1001.2014.3001.5502

/**
 * @description Eslint 相关配置
 */
module.exports = {
  'env': {
    'browser': true,
    'es2021': true
  },
  'parser': 'vue-eslint-parser',
  'extends': [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    '@vue/eslint-config-typescript',
    'plugin:@typescript-eslint/recommended'
  ],
  'overrides': [
  ],
  'parserOptions': {
    'ecmaVersion': 'latest',
    'parser': '@typescript-eslint/parser',
    'sourceType': 'module'
  },
  'plugins': [
    'vue',
    '@typescript-eslint'
  ],
  'rules': {
    'prettier/prettier': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'vue/multi-word-component-names': 'off',
    '@typescript-eslint/no-explicit-any': 2,
    '@typescript-eslint/no-inferrable-types': 2,
    'import/prefer-default-export': 'off',
    'import/no-mutable-exports': 'off',
    'no-alert': 2,
    'quotes': [ 2, 'single' ],
    'jsx-quotes': [ 2, 'prefer-double' ],
    'no-cond-assign': 2,
    'no-const-assign': 2,
    'no-constant-condition': 2,
    'no-delete-var': 2,
    'no-dupe-keys': 2,
    'no-dupe-args': 2,
    'no-duplicate-case': 2,
    'no-else-return': 2,
    'no-eq-null': 2,
    'no-extra-parens': 2,
    'no-ex-assign': 2,
    'no-extra-boolean-cast': 2,
    'no-extra-semi': 2,
    'no-implicit-coercion': 2,
    'no-inline-comments': 2,
    'no-func-assign': 2,
    'no-irregular-whitespace': 2,
    'no-loop-func': 1,
    'no-console': 1,
    'no-multiple-empty-lines': [ 2, { 'max': 1 } ],
    'no-nested-ternary': 0,
    'no-new-func': 2,
    'no-new-object': 2,
    'no-new-require': 2,
    'no-plusplus': 2,
    'no-redeclare': 2,
    'no-script-url': 0,
    'no-throw-literal': 2,
    'no-undef': 0,
    'no-undef-init': 2,
    'no-unused-vars': 0,
    'no-useless-call': 2,
    'no-void': 2,
    'no-var': 2,
    'array-bracket-spacing': [ 2, 'always' ],
    'camelcase': 2,
    'consistent-this': [ 2, 'that' ],
    'default-case': 2,
    'eqeqeq': 2,
    'func-names': 0,
    'indent': [ 2, 2 ],
    'init-declarations': 0,
    'key-spacing': [ 0, { 'beforeColon': false, 'afterColon': true } ],
    'object-curly-spacing': [ 2, 'always' ],
    'operator-linebreak': [ 2, 'after' ],
    'id-match': 0,
    'semi': [ 2, 'never' ],
    'use-isnan': 2,
    'valid-typeof': 2,
    'no-class-assign': 2,
    'space-in-parens': 2,
    'keyword-spacing': 2,
    'space-infix-ops': 2,
    'arrow-parens': [ 'error', 'as-needed' ]
  }
}

配置 prettier

安装prettier

$ yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

在根目录创建.prettierrc.js文件， 将下面内容粘贴到文件里(具体配置项参考https://blog.csdn.net/weixin_47401153/article/details/129183343?spm=1001.2014.3001.5502)

module.exports = {
  "printWidth": 140,
  "tabWidth": 2,
  "useTabs": true,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "jsxBracketSameLine": true
}

修改package.json文件 lint 命令校验 js 文件

# 需要验证哪些文件就在后面加`,#{文件后缀}`
# 如要验证js|vue|tsx格式的文件
# 就配置为 `.js,.vue,.tsx`

{
  // ...
  "scripts": {
     "lint": "eslint --ext .js,.vue,.tsx src/",
   },
   // ...
}

• lint: 命令的名称，根据项目需要进行更改
• eslint: 运行ESLint工具的命令
• --ext .js: 选项, 用于指定ESLint检查哪些文件的扩展名，这里指定为.js表示只检查JavaScript的文件
• src/: 参数，指定要检查的文件目录，这里指定为src/表示检查项目中的src目录下的所有文件

配置GitCommit

安装 husky，lint-staged

$ yarn add husky lint-staged -D

在 package.json 中加入 prepare 脚本，每次在 yarn 安装完依赖后都会执行这个命令

$ npm set-script prepare "husky install"
$ yarn prepare

运行完yarn prepare之后会在根目录生成一个.husky目录

添加 pre-commit 钩子

$ npx husky add .husky/pre-commit "npx lint-staged"

运行完后会在.husky目录下生成一个pre-commit文件， 若没有自动生成，可手动添加

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

yarn lint

这个时候代码提交之前就会进行lint校验了

配置 commit 提交规范

安装 commitlint

$ yarn add commitlint @commitlint/config-conventional @commitlint/cli -D

新增 commit-msg 钩子

$ npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

运行完后会在 .husky 目录下新增 commit-msg 文件， 若没有生成 commit-msg 文件，可手动添加

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

npx --no-install commitlint --edit "$1"

新增 .commitlintrc.js 文件， 在根目录下创建 .commitlintrc.js 文件

/**
* feature：新功能
* update：更新某功能
* fixbug：修补某功能的bug
* refactor：重构某个功能
* optimize: 优化构建工具或运行时性能
* style：仅样式改动
* docs：仅文档新增/改动
* chore：构建过程或辅助工具的变动
*/
module.exports = {
  extends: [
    '@commitlint/config-conventional'
  ],
  rules: {
    'type-enum': [2, 'always', [
      'feature', 'update', 'fixbug', 'refactor', 'optimize', 'style', 'docs', 'chore'
    ]],
    "body-full-stop": [0,'never','.'],
    '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]
  }
};

注：commitlint相关配置项参考官方介绍