Vite4+Vue3+TypeScript 配置 eslint+prettier+husky+lint-staged

Node版本

ESLint 8.x，Node版本要求：^12.22.0, ^14.17.0, or >=16.0.0

Vite 4.x，Node版本要求：14.18+, 16+

因此Node版本最低要求为 14.18

eslint

安装：

npm install eslint eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

里面包括eslint的vue插件，eslint的prettier插件，typescript解析器，typescript规则，prettier规则。

.eslintrc

创建.eslintrc文件，注意不要用js后缀，否则vscode的eslint插件无法工作。

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "parser": "@typescript-eslint/parser"
  },
  "plugins": ["vue", "@typescript-eslint"],
  "rules": {
    // 允许使用 any 类型
    "@typescript-eslint/no-explicit-any": "off"
  }
}

.eslintignore

忽略某些不需要检查的文件和目录。

build/*.js
src/assets/*
public/*
dist/*

.gitattributes

主要处理文件换行问题。

git默认提交时，把Windows的crlf换行改为linux的lf，而在检出时把lf再换回crlf。

使用该文件可以禁止这种替换行为。

* text=auto eol=lf

*.{cmd,[cC][mM][dD]} text eol=crlf
*.{bat,[bB][aA][tT]} text eol=crlf

*.sh text eol=lf

# Archives
*.7z filter=lfs diff=lfs merge=lfs -text
*.br filter=lfs diff=lfs merge=lfs -text
*.gz filter=lfs diff=lfs merge=lfs -text
*.tar filter=lfs diff=lfs merge=lfs -text
*.zip filter=lfs diff=lfs merge=lfs -text

# Documents
*.pdf filter=lfs diff=lfs merge=lfs -text

# Images
*.gif filter=lfs diff=lfs merge=lfs -text
*.ico filter=lfs diff=lfs merge=lfs -text
*.jpg filter=lfs diff=lfs merge=lfs -text
*.pdf filter=lfs diff=lfs merge=lfs -text
*.png filter=lfs diff=lfs merge=lfs -text
*.psd filter=lfs diff=lfs merge=lfs -text
*.webp filter=lfs diff=lfs merge=lfs -text

# Fonts
*.woff2 filter=lfs diff=lfs merge=lfs -text

# Other
*.exe filter=lfs diff=lfs merge=lfs -text

prettier

格式化代码的插件。

安装：

npm install prettier --save-dev

在package.json中增加以下配置：

{
  "prettier": {
    "printWidth": 180,
    "singleQuote": true,
    "trailingComma": "all",
    "arrowParens": "always"
  }
}

.editorconfig

统一定义编辑器的行为。使之与prettier的行为一致。

root = true

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

[*.{js,jsx,ts,tsx,vue,hbs}]
max_line_length = 180

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

lint-staged

lint-staged能够让lint只检测暂存区的文件，配合husky使用效果非常好。

npm install lint-staged --save-dev

在package.json中增加以下配置，定义哪些文件需要做哪些处理：

{
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.vue": [
      "eslint --fix",
      "prettier --write"
    ],
    "{!(package)*.json,.!(browserslist)*rc}": [
      "prettier --write--parser json"
    ],
    "package.json": [
      "prettier --write"
    ],
    "*.{scss,html}": [
      "prettier --write"
    ],
    "*.md": [
      "prettier --write"
    ]
  }
}

并增加以下代码：

{
  "scripts": {
     "lint-staged": "lint-staged",
  }
}

husky

在代码提交前，对文件进行处理可以避免提交不符合规范的代码。

安装

npm install husky --save-dev

激活

为了在执行npm install时，自动激活husky，需要在package.json文件中增加以下代码：

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

执行以下代码可以达到同样目的（对npm版本有要求）：

npm pkg set scripts.prepare="husky install"

之后运行激活代码：

npm run prepare

创建hook

创建hook，在git提交前执行之前定义的lint-staged命令。

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

这段代码在Windows中无法执行，可以改为：

node node_modules/.bin/husky add .husky/pre-commit "lint-staged"

然后提交：

git add .husky/pre-commit