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

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

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

1. Eslint

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

你可能看见的问题

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，

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

{"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）安装依赖

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

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

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

（3）修改eslint.config.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"}},// 集成prettierprettierRecommended
]);

（4）下载vscode插件Prettier - Code formatter
（5）vscode中设置保存自动修复代码

3. husky

（1）安装依赖

npm install husky lint-staged -D

（2）修改package.json

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

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

npx husky init

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

npx lint-staged

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

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

（5）配置commit信息校验

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

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

npx commitlint --edit $1