初始化项目
使用cli命令初始化一个Vue3+TS+Vite项目：
# npm |
npm create vite@latest |
# yarn |
yarn create vite |
# pnpm |
pnpm create vite |
注：后续演示使用pnpm包管理器。
按下图选择配置：
配置ESLint
1、安装ESLint
执行cli命令安装和初始化ESLint：
# npm |
npx eslint --init |
# yarn |
yarn dlx eslint --init |
# pnpm |
pnpx eslint --init |
执行命令后，会询问详细配置信息，根据实际需要进行配置：
What do you want to lint? 你想检查什么文件？
选择
JavaScriptHow would you like to use ESLint? 你希望 ESLint 做什么？
选择
To check syntax and find problems，语法+潜在bug检查What type of modules does your project use? 你的项目用什么模块化？
选择
JavaScript modules (import/export)，使用ES模块Which framework does your project use? 你的项目用什么框架？
选择
Vue.jsDoes your project use TypeScript? 你的项目用TypeScript吗？
选择
YesWhere does your code run? 你的代码运行在哪里？
空格选择
Browser和Node，浏览器 + Node 环境都支持Which language do you want your configuration file be written in? 你的 ESLint 配置文件想用什么语言写？
选择
TypeScriptJiti is required for Node.js <24.3.0 to read TypeScript configuration files. 低版本 Node 不能直接读 TS 格式的 ESLint 配置，需要安装一个工具：
jitiWould you like to add Jiti as a devDependency? 你要安装 jiti 吗？
选择
YesThe config requires following dependencies 你的配置需要这些依赖
eslint, @eslint/js, globals, typescript-eslint, eslint-plugin-vue, jitiWould you like to install them now? 现在安装吗？
选择
YesWhich package manager do you want to use? 用什么包管理器？
选择
pnpm最终配置如下：
2、eslint.config.ts 配置文件
安装完依赖后，项目根目录会出现eslint.config.ts配置文件。
- 可以在选项中增加
rules属性，添加自定义格式规则。 - 不过后面使用Prettier的话，这里就不用配置了。
- 这里为了演示，添加规则semi：强制语句末尾添加分号，否则警告。
// 导入 ESLint 官方的 JavaScript 核心规则 |
import js from "@eslint/js"; |
// 导入全局变量定义（浏览器/Node.js 内置变量） |
import globals from "globals"; |
// 导入 TypeScript ESLint 插件（支持检查 TS 代码） |
import tseslint from "typescript-eslint"; |
// 导入 Vue ESLint 插件（支持检查 .vue 文件） |
import pluginVue from "eslint-plugin-vue"; |
// ESLint 9 扁平配置的工具函数（类型提示+规范配置格式） |
import { defineConfig } from "eslint/config"; |
export default defineConfig([ |
{ |
// 匹配检查的文件：JS、TS、Vue 全部文件 |
files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], |
// 启用 ESLint 官方 JS 插件 |
plugins: { js }, |
// 继承 ESLint 官方推荐的 JS 规则（基础语法检查） |
extends: ["js/recommended"], |
// 全局变量配置：同时支持浏览器 + Node.js 全局变量 |
// 比如 window、document、process、require 不会报未定义 |
languageOptions: { globals: { ...globals.browser, ...globals.node } }, |
// 可以在这里增加rules属性，添加自定义格式规则，使用Prettier的话，这里就不用配置 |
rules: { |
semi: ["warn", "always"], // 必须在语句末尾加分号，否则警告 |
}, |
}, |
// 继承 TypeScript-ESLint 官方推荐规则 |
tseslint.configs.recommended, |
// 继承 Vue 官方核心必备规则（扁平配置专用） |
pluginVue.configs["flat/essential"], |
{ |
// 只对 .vue 文件生效 |
files: ["**/*.vue"], |
// 让 Vue 文件中的 <script lang="ts"> 支持 TypeScript 解析 |
languageOptions: { parserOptions: { parser: tseslint.parser } }, |
}, |
]); |
3、package.json 文件增加命令
在package.json的scripts中，增加两个脚本命令：
"lint": "eslint", |
"lint:fix": "eslint --fix" |
"lint": "eslint"：对整个项目进行ESLint检查，不修改代码。"lint:fix": "eslint --fix"：扫描代码，自动修复所有 ESLint 能自动修复的问题
到这里，已经可以使用命令行对代码进行代码质量检查、自动修复代码：
# 代码质量检查 |
pnpm lint |
# 自动修复代码 |
pnpm lint:fix |
配置Prettier
1、安装依赖
安装3个开发依赖：prettier、eslint-config-prettier、eslint-plugin-prettier。
pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D |
- prettier：核心代码格式化工具，自动格式化代码，统一代码风格。
- eslint-config-prettier：关闭 ESLint 与 Prettier 冲突的规则。
- eslint-plugin-prettier：把 Prettier 变成 ESLint 的一条规则，让 Prettier 的格式化能力集成到 ESLint 里。
2、修改 eslint.config.ts 文件
引入eslint-config-prettier、eslint-plugin-prettier两个插件。
// ...... |
// 导入 Prettier 的 ESLint 配置（关闭与 Prettier 冲突的规则） |
import eslintConfigPrettier from "eslint-config-prettier/flat"; |
// 导入 Prettier 的 ESLint 插件（将 Prettier 作为 ESLint 规则运行，显示格式问题） |
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended"; |
export default defineConfig([ |
// ......, |
// 必须放在其他规则后面！ |
eslintConfigPrettier, |
eslintPluginPrettierRecommended, |
]); |
❗
注意：必须放在所有其他规则的最后面，因为后面的配置会覆盖前面的配置。
3、配置 .prettierrc 文件
在根目录新建.prettierrc文件或者终端执行命令：
node --eval "fs.writeFileSync('.prettierrc','{}\n')" |
在.prettierrc文件中进行代码风格规则配置，比如
{ |
"singleQuote": true, |
"tabWidth": 2, |
"semi": false |
} |
配置后，就能：
- 修复语法错误（ESLint）
- 修复格式错误（Prettier）
4、使用
现在，你可以使用ESLint，对代码进行格式和语法的检查与修复。
# 代码质量检查 |
pnpm lint |
# 自动修复代码 |
pnpm lint:fix |
VSCODE插件
推荐安装ESLint、Prettier。
ESLint 插件
读取项目里的eslint配置文件，实时：
- 标红 / 波浪线提示代码语法、规范、格式错误
- 保存时自动执行
eslint --fix修复代码 - 识别你项目安装的
eslint依赖，走项目本地配置
Prettier 插件
读取项目 .prettierrc，单纯做代码格式化：引号、分号、缩进、换行等。
VSCODE配置保存自动格式化代码
打开VSCODE设置面板，搜索format
- Format On Save：勾选，保存时自动格式化代码
- Default Formatter：选择
Prettier - Code formatter
这样每次保存代码后，VSCODE都会根据Prettier规则自动格式化代码。
.prettierrc 推荐配置
{ |
"printWidth": 120, |
"tabWidth": 2, |
"useTabs": false, |
"semi": true, |
"singleQuote": true, |
"quoteProps": "as-needed", |
"jsxSingleQuote": false, |
"trailingComma": "es5", |
"bracketSpacing": true, |
"bracketSameLine": false, |
"jsxBracketSameLine": false, |
"arrowParens": "always", |
"requirePragma": false, |
"insertPragma": false, |
"proseWrap": "preserve", |
"htmlWhitespaceSensitivity": "css", |
"vueIndentScriptAndStyle": true, |
"endOfLine": "lf" |
} |
