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: