Vue3 + Vite + TS 项目引入 Eslint + Pritter

一、ESLint 简介

ESLint 是一款 JavaScript 和相关语言（如 TypeScript、Vue 等）的静态代码分析工具，主要用于发现代码中的问题，并帮助开发者遵循代码规范。

主要功能

• 语法检查：识别语法错误（如漏掉的括号、未定义的变量等）。
• 代码质量检测：帮助发现潜在的逻辑问题（如未处理的 Promise）。
• 规范代码风格：支持团队定义统一的代码风格（如是否使用分号、缩进方式等）。
• 可扩展性强：支持多种插件（如 eslint-plugin-vue、eslint-plugin-react 等）和规则自定义。

适用场景

• 项目开发：保障团队代码风格一致，减少错误。
• 代码审查：辅助检测潜在问题，提升代码质量。

常用的 Eslint 配置项

二、Pritter 简介

Prettier 是一款专注于代码格式化的工具，它以无争议的方式对代码进行排版处理，确保代码风格的一致性。Prettier 不关注语法问题，而是专注于代码的外观。

主要功能

• 格式化代码：自动调整代码的缩进、换行、空格等，使代码美观一致。
• 支持多语言：不仅支持 JavaScript，还支持 HTML、CSS、JSON 等多种语言。
• 集成方便：可以与编辑器（如 VS Code）、ESLint 等工具无缝结合。

适用场景

• 团队合作：确保团队代码格式一致。
• 提高效率：避免开发者因代码样式问题耗费时间。

常用的 Prettier 配置项

配置项	描述	默认值
semi	是否在语句末尾添加分号。	true
singleQuote	使用单引号还是双引号。	false
tabWidth	每个缩进级别的空格数。	2
trailingComma	多行末尾是否添加逗号：none、es5（支持的语法）、all（所有地方）	es5
printWidth	每行代码的最大字符数，超过时会自动换行。	80
bracketSpacing	对象字面量中的括号之间是否加空格。	true
jsxBracketSameLine	JSX 中 > 是否与最后一行的属性放在同一行。	false
arrowParens	箭头函数参数周围是否总是加上圆括号。always（总是加括号），avoid（只有有多个参数时才加括号）	always
proseWrap	处理 Markdown 文本时是否换行。	preserve
htmlWhitespaceSensitivity	是否对 HTML 的空白符敏感。css（CSS 控制）、strict（严格敏感）、ignore（忽略空格）	css
endOfLine	设置行尾字符，支持：lf、crlf、cr、auto。	auto
quoteProps	对对象属性名使用引号的规则，支持：as-needed、consistent、preserve	as-needed
overrides	针对特定文件的配置覆盖。	[]

三、Vue3 + Vite + TS 项目引入 Eslint + Pritter

1. 安装 ESLint

使用以下命令安装 ESLint 及其相关依赖：

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

• eslint：核心 ESLint 工具。
• eslint-plugin-vue：针对 Vue 文件的 ESLint 插件。
• @typescript-eslint/parser：支持 TypeScript 的解析器。
• @typescript-eslint/eslint-plugin：提供 TypeScript 相关规则。

2. 初始化 ESLint 配置

// .eslintrc.cjs
module.exports = {root: true, // 表示该配置是根配置env: {browser: true,es2021: true,node: true,},extends: ["eslint:recommended", // ESLint 推荐规则"plugin:vue/vue3-recommended", // Vue3 推荐规则"plugin:@typescript-eslint/recommended", // TypeScript 推荐规则"standard",],parser: "vue-eslint-parser", // Vue 文件解析器parserOptions: {parser: "@typescript-eslint/parser", // TypeScript 解析器ecmaVersion: "latest",sourceType: "module",},plugins: ["vue", "@typescript-eslint"],rules: {// 可根据需要调整规则'simple-import-sort/imports': 'error', // 自动排序 JavaScript 或 TypeScript 文件中的导入语句'simple-import-sort/exports': 'error', // 自动排序 JavaScript 或 TypeScript 文件中的导出语句'vue/multi-word-component-names': 0, // 避免使用单个词作为 Vue 组件的名称'@typescript-eslint/no-explicit-any': 0, // 防止在 TypeScript 代码中使用 any 类型'space-before-function-paren': 0, // 控制函数定义或函数表达式括号前的空格'no-use-before-define': 0, // 禁止在变量、函数或类定义之前使用它们'import/no-absolute-path': 0, // 禁止使用绝对路径导入模块'@typescript-eslint/no-non-null-assertion': 0, // 禁止在代码中使用 非空断言操作符（!）camelcase: 0, // 使用驼峰命名参数'@typescript-eslint/no-unused-vars': 'warn', // 检查并报告那些在代码中声明但未被使用的变量、函数参数、导入等'func-call-spacing': 0, // 控制在函数调用时，函数名称与括号之间是否应该有空格'@typescript-eslint/no-this-alias': ['error',{allowDestructuring: false,allowedNames: ['self']}], // 禁止在 TypeScript 中使用 this 的别名// 禁用重复声明检测, ts 会强制执行这个规则// 如果不禁用这个规则, 会导致 ts 函数重载的时候报错'no-redeclare': 0},
};

3. 在 Vite 项目中启用 ESLint

安装 vite-plugin-eslint，将 ESLint 集成到 Vite 的开发流程中：

npm install vite-plugin-eslint --save-dev

修改 vite.config.ts 文件：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import eslint from "vite-plugin-eslint";export default defineConfig({plugins: [vue(),eslint({exclude: ['**/node_modules/**'] // 排除所有 node_modules 文件夹之外的文件都进行 eslint 检查}),],
});

4. 在 VS Code 中启用 ESLint

1. 安装 ESLint 插件：

   在 VS Code 的扩展市场搜索并安装 ESLint 插件。

5. 集成 Prettier

1. 安装 Prettier 及其 ESLint 插件：

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

2. 在 .eslintrc.js 文件中添加 Prettier：

extends: ["prettier" // 关闭 ESLint 中与 Prettier 冲突的规则
],
plugins: ["prettier" // 将 Prettier 的格式化规则作为 ESLint 的规则使用
],

3. 配置 .prettierrc 文件：

{"singleQuote": true,"semi": false,"trailingComma": "none","arrowParens": "avoid","useTabs": false,"tabWidth": 2,"bracketSpacing": true,"rangeStart": 0,"htmlWhitespaceSensitivity": "css","proseWrap": "preserve"
}

6. 在 VS Code 中启用 Prettier 自动修复

1. 打开 VS Code 设置（Ctrl + , 或 ⌘ + ,），搜索 Format On Save，并启用。
2. 或在 .vscode/settings.json 中添加：

{"editor.formatOnSave": true,
}

3. 保存文件后会以 .prettierrc 文件中设置的规则对代码就行格式修正

7. 可选优化：集成 eslint-plugin-simple-import-sort

协同开发时为了避免 import 顺序不一致导致的冲突，需要对 import 文件引入顺序进行默认排序，通过 simple-import-sort 可以实现报错和修复。

1. 安装 eslint-plugin-simple-import-sort 插件：

npm install eslint-plugin-simple-import-sort --save-dev

2. 在 .eslintrc.js 文件中添加 eslint-plugin-simple-import-sort：

plugins: ["simple-import-sort"
],rules: {'simple-import-sort/imports': 'error','simple-import-sort/exports': 'error',
}

7. 插件版本

过新的版本可能会导致出错

"devDependencies": {"@typescript-eslint/eslint-plugin": "^5.60.0","@typescript-eslint/parser": "^5.60.0","eslint": "^7.32.0","eslint-config-prettier": "^8.8.0","eslint-config-standard": "^17.1.0","eslint-plugin-prettier": "^4.2.1","eslint-plugin-simple-import-sort": "^10.0.0","eslint-plugin-vue": "^9.15.1","prettier": "^3.3.3","vite-plugin-eslint": "^1.8.1","vue-eslint-parser": "^9.3.1"
},

四、最佳实践

ESLint 负责代码质量检测。
Prettier 负责代码格式化。
通过 eslint-config-prettier 解决两者规则冲突，确保工具间协同工作。