初始化项目使用cli命令初始化一个Vue3TSVite项目# npmnpm create vitelatest# yarnyarn create vite# pnpmpnpm create vite注后续演示使用pnpm包管理器。按下图选择配置配置ESLint1、安装ESLint执行cli命令安装和初始化ESLint# npmnpx eslint --init# yarnyarn dlx eslint --init# pnpmpnpx 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 langts 支持 TypeScript 解析languageOptions: { parserOptions: { parser: tseslint.parser } },},]);3、package.json 文件增加命令在package.json的scripts中增加两个脚本命令lint: eslint,lint:fix: eslint --fixlint: eslint对整个项目进行ESLint检查不修改代码。lint:fix: eslint --fix扫描代码自动修复所有 ESLint 能自动修复的问题到这里已经可以使用命令行对代码进行代码质量检查、自动修复代码# 代码质量检查pnpm lint# 自动修复代码pnpm lint:fix配置Prettier1、安装依赖安装3个开发依赖prettier、eslint-config-prettier、eslint-plugin-prettier。pnpm add prettier eslint-config-prettier eslint-plugin-prettier -Dprettier核心代码格式化工具自动格式化代码统一代码风格。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修复格式错误Prettier4、使用现在你可以使用ESLint对代码进行格式和语法的检查与修复。# 代码质量检查pnpm lint# 自动修复代码pnpm lint:fixVSCODE插件推荐安装ESLint、Prettier。ESLint 插件读取项目里的eslint配置文件实时标红 / 波浪线提示代码语法、规范、格式错误保存时自动执行eslint --fix修复代码识别你项目安装的eslint依赖走项目本地配置Prettier 插件读取项目 .prettierrc单纯做代码格式化引号、分号、缩进、换行等。VSCODE配置保存自动格式化代码打开VSCODE设置面板搜索formatFormat 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}