项目采用 vue3 + typescript + vite，所以需要自己配置 eslint、prettier、husky。

Eslint Prettier

安装

eslint

yarn add eslint --dev

eslint 插件

yarn add eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier --dev

typescript parser

yarn add @typescript-eslint/parser --dev

prettier

yarn add prettier -D

解决 eslint 和 prettier 冲突

yarn add eslint-config-prettier --dev

.eslintrc.js 配置

root

默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。为了将 ESLint 限制到一个特定的项目，在项目根目录下的 package.json 或 .eslintrc.* 里设置 "root": true。ESLint 一旦发现配置文件中有 "root": true，就会停止在父级目录中寻找。

env

运行环境配置。

1. browser: true,
2. node: true,
3. es2021: true // 启用2021中的全局变量

parse

指定eslint解析器。默认使用Espree

由于 Vue 中的单文件组件不是纯 JavaScript，所以不能使用默认解析器，需要引入vue-eslint-parser解析器生成增强的 AST。这个解析器可以对vue文件的<template>进行 lint。

vue文件生成的AST

该解析器的parserOptions与ESLint的默认解析器 espree 支持相同的配置属性。

parserOptions

parse 解析器的配置项。

1. parse: 使用parserOptions.parser属性来指定自定义解析器来解析<script>标签。
2. ecmaVersion：可选值（number | 'latest'）通过该选项指定想要使用的es版本，默认设置2018，该选项只启用语法，不自动启用该版本下的全局变量，需要在env选项中配置
3. sourceType ："script" (默认) 或 "module"（如果代码是 ECMAScript 模块)
4. ecmaFeatures ：值是对象，表示想使用的额外的语言特性:
   1. globalReturn - 允许在全局作用域下使用 return 语句
   2. impliedStrict - 启用全局 strict mode
   3. jsx - 启用 jsx

{
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "@typescript-eslint/parser",
        "sourceType": "module",
         "jsx": true
    }
}

plugins

属性值组成方式
在配置文件里配置插件时，使用plugins 关键字来存放插件名字的列表。

1. 插件名称可以省略 eslint-plugin-前缀

extends

指定代码规范的。值是字符串或字符串数组

属性值格式：

1. 来自插件中的规则，组成方式：

   1. plugin:
   2. 包名 (省略了前缀，比如，vue)
   3. /
   4. 配置名称 (比如 recommended)
      比如: plugin:vue/vue3-recommended，表示eslint-plugin-vue插件配置对象上configs字段上的'vue3-recommended'的值
      
      image.png

2. eslint-config- 前缀的独立模块，可以省略前缀
   比如：eslint-config-prettier

完整配置如下：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true
  },
  parser: 'vue-eslint-parser',
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'prettier'
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  plugins: ['vue', '@typescript-eslint', 'prettier'],
  rules: {
    'no-var': 'error',
    allowEmptyCatch: 'off',
    'prettier/prettier': 'error',
    'prefer-const': 'error',
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    'no-empty': ['error', { allowEmptyCatch: true }],
    'vue/no-unused-vars': [
      'error',
      {
        ignorePattern: '^_'
      }
    ],
    'vue/multi-word-component-names': 'off',
    'vue/no-parsing-error': [
      'error',
      {
        'control-character-reference': false
      }
    ],
    'vue/no-v-html': 'off'
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }
}

.eslintignore文件

node_modules
dist
types
.vscode
.husky
*.woff
*.ttf
*.sh
*.scss
*.css
*.svg

.prettierrc.js 配置

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

package.json 配置

{
  "script": {
   "lint": "eslint 'src/**/*.{ts{,x},vue}' --fix",
    "prettier": "prettier --write ."
  }
}

huksy配置

方式一：自动初始化husky

npx husky-init && yarn   

执行 npx husky-init 命令后会在项目根目录下生成.husky目录，同时在package.json 的scripts中增加 "prepare": "husky install"、devDependencies中增加 husky 依赖，然后执行 yarn 安装node_modules，安装完成后会自动执行 husky install。

prepare 命令是package.json的scripts中默认支持的脚本，它会在两种情况下运行：1. npm publish命令前；2. 不带参数的npm install执行之后

方式二：手动初始化

1. 安装

yarn add husky --dev

2. 启用 Git hooks

执行

husky install

package.json增加命令：

在package.json增加脚本，这样会在node-modules安装完之后自动执行 husky install 。

这么做是因为git提交到远程仓库时会忽略.husky下的_文件（这样是合理的，该目录下的husky.sh文件的作用是.husky目录为git hooks所在的目录。）所以该脚本设置了在安装了node_modules之后去生成.husky目录并指定git hooks所在的目录。

scripts: {
  "prepare": "husky install"
}

3. 增加 pre-commit

npx husky add .husky/pre-commit ""

4. 修改 .husky/pre-commit 内容

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

yarn lint

yarn prettier

commit-msg配置

安装 commitlint 并配置 commitlint-config.js

yarn add @commitlint/{cli,config-conventional} --dev
echo "module.exports = { extends: ['@commitlint/config-conventional'] }" > commitlint.config.js

增加 commit-msg hook 文件

yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

Editorconfig

.editorconfig 配置

root = true

[*]

charset = utf-8
indent_size = 2
indent_style = space
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
indent_style = tab

文档

1. eslint
2. prettier
3. husky
4. commitlint
5. vue-eslint-parser
6. eslint-plugin-vue
7. typescript-eslint
8. prettier/eslint-config-prettier