vue3+TS项目配置Eslint+prettier+husky语法校验

本文配置了Eslint+prettier+husky。其中ESLint 负责代码质量检查，Prettier 负责代码格式统一，Husky 通过 Git 钩子在提交时自动执行检查与格式化，三者结合确保代码规范、风格一致且无低级错误。

1. Eslint

（1）在项目中执行npx eslint --init

你可能看见的问题

shell 复制代码

What do you want to lint?	 >> JavaScript
How would you like to use ESLint?	>> 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  √ Node	(空格多选)
Which language do you want your configuration file be written in? 	>>JavaScript
Would you like to install them now? >> Yes
Which package manager do you want to use?	>> npm

（2）修改生成的eslint.config.js，

ts 复制代码

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

export default defineConfig([
  {
    // 需要校验的文件
    files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"],
    plugins: { js },
    extends: ["js/recommended"],
    languageOptions: { globals: { ...globals.browser, ...globals.node } }
  },
  tseslint.configs.recommended,
  pluginVue.configs["flat/essential"],
  {
    // vue 文件中的ts语法校验
    files: ["**/*.vue"],
    languageOptions: { parserOptions: { parser: tseslint.parser } }
  },
  {
    // 忽略校验
    ignores: [".css", "*.d.ts", "**/node_modules/**"]
  },
  {
    // 自定义eslint校验规则
    rules: {
      "no-console": "warn"
    }
  }
]);

（3）修改package.json中的scripts

json 复制代码

{
	"scripts": {
	    "dev": "vite",
	    "build": "vue-tsc -b && vite build",
	    "preview": "vite preview",
	    "lint": "eslint",
	    "lint:fix": "eslint --fix --quiet",
	  }
}

（4）vscode中下载ESlint插件

2. Prettier

（1）安装依赖

sh 复制代码

npm install prettier eslint-plugin-prettier eslint-config-prettier -D

（2）项目根目录（与vite.config.ts同级）新建文件prettier.config.js

js 复制代码

export default {
  singleQuote: false, // 使用单引号
  semi: true, // 末尾使用分号
  trailingComma: "none", // 使用尾随逗号
  printWidth: 120, // 每行代码的长度
  tabWidth: 2, // 缩进宽度
  useTabs: false, // 使用制表符缩进
  endOfLine: "auto"
};

（3）修改eslint.config.js

js 复制代码

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

export default defineConfig([
  {
    // 需要校验的文件
    files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"],
    plugins: { js },
    extends: ["js/recommended"],
    languageOptions: { globals: { ...globals.browser, ...globals.node } }
  },
  tseslint.configs.recommended,
  pluginVue.configs["flat/essential"],
  {
    // vue 文件中的ts语法校验
    files: ["**/*.vue"],
    languageOptions: { parserOptions: { parser: tseslint.parser } }
  },
  {
    // 忽略校验
    ignores: [".css", "*.d.ts", "**/node_modules/**"]
  },
  {
    // 自定义eslint校验规则
    rules: {
      "no-console": "warn"
    }
  },
  // 集成prettier
  prettierRecommended
]);

（4）下载vscode插件Prettier - Code formatter

（5）vscode中设置保存自动修复代码

3. husky

（1）安装依赖

sh 复制代码

npm install husky lint-staged -D

（2）修改package.json

json 复制代码

{
	"scripts":{...},
	"lint-staged": {
        "src/**/*.{js,cjs,ts,vue}": [
            "npm run lint:fix"
        ],
        "src/**/*.{html,json,css,scss}": [
            "npx prettier --write"
        ]
    }
}

（3）初始化husky，会生成一个.husky的文件夹

sh 复制代码

npx husky init

修改文件夹中的pre-commit文件

复制代码

npx lint-staged

（4）新建文件commitlint.config.cjs（与vite.config.ts同级）

cjs 复制代码

module.exports = {
  extends: ["@commitlint/config-conventional"]
};

（5）配置commit信息校验

sh 复制代码

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

（6）在pre-commit同级创建commit-msg文件，并修改文件内容

复制代码

npx commitlint --edit $1