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 -- "
配置 commit 提交规范
")/_/husky.sh"

yarn lint

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

commitlint

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

commit-msg

新增 $ npx husky add .husky/commit-msg 'npx --no-install commitlint --edit ""' 钩子

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

npx --no-install commitlint --edit ""

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

.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相关配置项参考官方介绍