快速搭建 Vite+vue3+TS+ESLint@9+Prettier+Husky@9+Commitlint 项目

之前也写过一篇类似的文章，但随着框架的更新，很多写法已经发生了改变，主要是eslint和husky,这里再重新梳理一遍。

创建项目

由于vite7对node版本选择比较高，这里我们先切换node版本nvm use 20,没有安装的先安装 nvm install 20,这里我的node版本是20.19.3。创建项目npm create vite@latest,选择vue和ts

代码规范

eslint

我们通过下面的命令可以非常简单地进行 ESLint 的初始化。

js 复制代码

npm init @eslint/config

按需选择完配置后，选择立即安装，就可一键安装相关依赖。安装成功后 ESLint 帮我们创建了 .eslint.config.js 配置文件。

我们加点配置

diff 复制代码

import js from "@eslint/js";
import { defineConfig } from "eslint/config";
import pluginVue from "eslint-plugin-vue";
import globals from "globals";
import tseslint from "typescript-eslint";

export default defineConfig([
+  {   //忽略校验文件
+    ignores: ["node_modules", "dist", "public"]
+  },
  {
    files: ["**/*.{js,mjs,cjs,ts,vue}"],
    plugins: { js },
    extends: ["js/recommended"]
  },
  { files: ["**/*.{js,mjs,cjs,ts,vue}"], languageOptions: { 
+     globals: {...globals.browser}  //配置全局变量，如{...globals.browser, wx:true}
  } },
  tseslint.configs.recommended,
  pluginVue.configs["flat/essential"],
  { files: ["**/*.vue"], languageOptions: { parserOptions: { parser: tseslint.parser } } },
+  {
+    rules: {}  //其他校验规则
+  }
]);

在 package.json 的 script 中添加命令

js 复制代码

"scripts": {
    "lint": "eslint . --ext .js,.mjs,.cjs,.ts,.vue --fix"
  },

在App.vue中添加一个未使用变量testProp

diff 复制代码

<script setup lang="ts">
   import HelloWorld from "./components/HelloWorld.vue";
+  const testProp = "sss";
</script>

运行npm run lint,报错，说明eslint配置生效

Prettier

一般 ESLint 用于检测代码风格代码规范，Prettier 用于对代码进行格式化。

安装依赖

js 复制代码

npm  i prettier -D

然后再根目录创建 prettier.config.js 配置文件

js 复制代码

export default {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  singleQuote: false,
  semi: true,
  trailingComma: "none",
  bracketSpacing: true
};

测试prettier是否生效，在 package.json 的 script 中添加命令

js 复制代码

"scripts": {
    "prettier":"prettier --write ./src/App.vue"
  },

修改App.vue代码

diff 复制代码

<script setup lang="ts">
- import HelloWorld from "./components/HelloWorld.vue";
+ import HelloWorld from "./components/HelloWorld.vue"
+
+
+
+
+
const testProp = "sss";
</script>

运行npm run prettier后,代码已经格式化，说明prettier配置有效，删除script 中的prettier测试命令

ESLint + Prettier

在eslint校验中加入Prettier格式化，安装依赖

js 复制代码

npm i eslint-config-prettier eslint-plugin-prettier -D

更改 Eslint 的配置文件 eslint.config.js, 在里面加入 Prettier 相关配置

diff 复制代码

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
+  import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
import { defineConfig } from "eslint/config";


export default defineConfig([
  { files: ["**/*.{js,mjs,cjs,ts,vue}"], plugins: { js }, extends: ["js/recommended"] },
  { files: ["**/*.{js,mjs,cjs,ts,vue}"], languageOptions: { globals: globals.browser } },
  tseslint.configs.recommended,
  pluginVue.configs["flat/essential"],
  { files: ["**/*.vue"], languageOptions: { parserOptions: { parser: tseslint.parser } } },
+  eslintPluginPrettierRecommended
]);

Husky + lint-staged

Husky

在安装Husky之前，我们先初始化一下git(有git的可以不用设置),运行git init, 然后再安装依赖

js 复制代码

npm  i husky -D

初始化husky

js 复制代码

npx husky init

完成后在package.json的scripts中会多一行命令,运行npm run prepare

运行完成后，会在项目根目录下多一个.husky文件夹

把pre-commit内容改成npm run lint后提交一次内容 git add . && git commit -m 'init',如果触发了lint校验，说明husky配置成功

lint-staged

每次提交都检测所有代码并不是一个好的决定，比如你只修改了文件 A 结果文件 B 报错了，但是文件 B 并不是你负责的模块，emmm改还是不改？

我们可以通过 lint-staged 只对暂存区的代码进行检验。

首先安装依赖

js 复制代码

npm i lint-staged -D

然后在 package.json 添加相关配置。

js 复制代码

{
   ...,
   "lint-staged": {
      "*.{ts,vue}": [
        "npm run lint",
        "prettier --write"
      ]
    }
}

并在 .husky/pre-commit 中替换 npm run lint 为 npx lint-staged。现在我们每次提交代码前都会对改动的文件进行 Lint 检查和prettier格式化。

commitlint

使用 commitlint 对提交信息进行校验。先安装依赖：

js 复制代码

npm i @commitlint/cli @commitlint/config-conventional -D

然后在根目录创建配置文件 commitlint.config.js

js 复制代码

export default {
  extends: ["@commitlint/config-conventional"]
};

然后把 commitlint 命令也添加 Husky Hook。运行命令或在.husky下新建commit-msg文件，输入--no-install commitlint -e "$HUSKY_GIT_PARAMS"

js 复制代码

echo npx '--no-install commitlint -e "$HUSKY_GIT_PARAMS"' > .husky/commit-msg

现在，运行命令git add . && git commit -m 'init'，会发现经过eslint校验和prettier格式化后，提交信息不合法被拦截导致提交失败

commitizen

安装自动化提示工具

css 复制代码

npm i commitizen cz-conventional-changelog -D

然后在 package.json 中添加命令 commit

js 复制代码

{
  "scripts": {
    "commit": "git add . && git-cz"
  },
}

初始化命令行的选项信息

csharp 复制代码

npx commitizen init cz-conventional-changelog --force

执行后会在package.json生成commitizen的配置信息

运行npm run commit，就可以快捷选择相应特性啦，按照提示一步一步下去就可以。到这一步基本就完成了.

eslint-plugin-simple-import-sort

自动修复 import 排序，墙裂推荐 墙裂推荐 墙裂推荐的插件

安装插件

js 复制代码

npm i eslint-plugin-simple-import-sort -D

在eslint.config.js中配置

diff 复制代码

import js from "@eslint/js";
import { defineConfig } from "eslint/config";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import importSort from "eslint-plugin-simple-import-sort";
import pluginVue from "eslint-plugin-vue";
import globals from "globals";
import tseslint from "typescript-eslint";

export default defineConfig([
  {
    files: ["**/*.{js,mjs,cjs,ts,vue}"],
-   plugins: { js },
+   plugins: { js, "simple-import-sort": importSort },
    extends: ["js/recommended"]
  },
  { files: ["**/*.{js,mjs,cjs,ts,vue}"], languageOptions: { globals: globals.browser } },
  tseslint.configs.recommended,
  pluginVue.configs["flat/essential"],
  { files: ["**/*.vue"], languageOptions: { parserOptions: { parser: tseslint.parser } } },
  eslintPluginPrettierRecommended,
  {
    rules: {
+      "simple-import-sort/imports": [
+       "error",
+        {
+          groups: [
+            [
+              "^vue", // vue放在首行
+              // 以字母(或数字或下划线)或"@"后面跟着字母开头的东西,通常为nodeModules引入
+              "^@?\\w",
+              "^@(/.*|$)", // 内部导入 "@/"
+              "^\\.\\.(?!/?$)", // 父级导入. 把 `..` 放在最后.
+              "^\\.\\./?$",
+              // 同级导入. 把同一个文件夹.放在最后
+              "^\\./(?=.*/)(?!/?$)",
+              "^\\.(?!/?$)",
+              "^\\./?$",
+              "^.+\\.?(css|less|scss)$", // 样式导入.
+              "^\\u0000" // 带有副作用导入，比如import 'a.css'这种.
+            ]
+          ]
+        }
+      ]
+    }
  }
]);

提交后自动修复import的排列顺序，比之前看着舒服多了，我的强迫症终于好了😏😏😏