项目采用 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
运行环境配置。
- browser: true,
- node: true,
- es2021: true // 启用2021中的全局变量
parse
指定eslint解析器。默认使用Espree
由于 Vue 中的单文件组件不是纯 JavaScript，所以不能使用默认解析器，需要引入vue-eslint-parser解析器生成增强的 AST。这个解析器可以对vue文件的<template>进行 lint。
该解析器的parserOptions与ESLint的默认解析器 espree 支持相同的配置属性。
parserOptions
parse 解析器的配置项。
- parse: 使用
parserOptions.parser属性来指定自定义解析器来解析<script>标签。 - ecmaVersion：可选值（number | 'latest'）通过该选项指定想要使用的es版本，默认设置2018，该选项只启用语法，不自动启用该版本下的全局变量，需要在env选项中配置
-
sourceType："script"(默认) 或"module"（如果代码是 ECMAScript 模块) -
ecmaFeatures：值是对象，表示想使用的额外的语言特性:-
globalReturn- 允许在全局作用域下使用return语句 -
impliedStrict- 启用全局 strict mode -
jsx- 启用 jsx
-
{
"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"sourceType": "module",
"jsx": true
}
}
plugins
属性值组成方式
在配置文件里配置插件时，使用plugins 关键字来存放插件名字的列表。
- 插件名称可以省略
eslint-plugin-前缀
extends
指定代码规范的。值是字符串或字符串数组
属性值格式：
-
来自插件中的规则，组成方式：
plugin:- 包名 (省略了前缀，比如，
vue) /- 配置名称 (比如
recommended)
比如:plugin:vue/vue3-recommended，表示eslint-plugin-vue插件配置对象上configs字段上的'vue3-recommended'的值
image.png
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
