Prettier
ESLint 的 主要优势在于 代码的风格检查并给出提示 ，而在代码格式化这一块 Prettier 做的更加专业，因此我们经常将 ESLint 结合 Prettier 一起使用。
pnpm i prettier -D
安装插件
在根目录新建文件.prettierrc.cjs
// .prettierrc.cjs // @see: https://www.prettier.cn module.exports = { // 指定最大换行长度 printWidth: 130, // 缩进制表符宽度 | 空格数 tabWidth: 2, // 使用制表符而不是空格缩进行 (true：制表符，false：空格) useTabs: false, // 结尾不用分号 (true：有，false：没有) semi: true, // 使用单引号 (true：单引号，false：双引号) singleQuote: false, // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>" quoteProps: "as-needed", // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号) jsxSingleQuote: false, // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>" trailingComma: "none", // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有) bracketSpacing: true, // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行) bracketSameLine: false, // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号) arrowParens: "avoid", // 指定要使用的解析器，不需要写文件开头的 @prettier requirePragma: false, // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化 insertPragma: false, // 用于控制文本是否应该被换行以及如何进行换行 proseWrap: "preserve", // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的 htmlWhitespaceSensitivity: "css", // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式 vueIndentScriptAndStyle: false, // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>" endOfLine: "auto", // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束) rangeStart: 0, rangeEnd: Infinity, };
在vscode中安装prettier插件，安装之后我们可以右键需要进行格式化的文件然后选择prettier进行格式化。
自动化：
ctrl + shift + p打开搜索栏搜索settings.json配置文件，项目内生成.vscode文件夹，在其下的settings.json中新增配置：
{ // 设置全部语言在保存时自动格式化 "editor.formatOnSave": true // 设置特定语言在保存时自动格式化 // "[javascript]": { // "editor.formatOnSave": true // } }
Prettier格式化不生效？
项目根目录的.vscode -> settings.json文件下新增配置，告诉编辑器按照prettier配置来格式化代码。
{ "editor.formatOnSave": true, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }
每次修改了.prettierrc.cjs文件的配置，需要重启vscode，再次启动后格式化代码则会按照最新的prettier配置进行格式化。有些时候重启vscode还是无效，此时需要禁用插件在重启启用插件，再次重启vscode即可。
因为settings.json是编辑器配置，每次重启后编辑器会解析一次，中途修改配置后编辑器并不会再次解析，所以还是会按照之前解析的配置进行格式化，导致修改配置后格式化并没有同步更新。ESlint
安装
pnpm i eslint -D
安装插件
初始化eslint
npx eslint --init
安装完成后eslint会自动安装其它配套依赖：
运行后会在你的目录内创建一个eslint.config.js文件
import { defineConfig } from "eslint/config"; import globals from "globals"; import tseslint from "typescript-eslint"; import pluginVue from "eslint-plugin-vue"; export default defineConfig([ { files: ["**/*.{js,mjs,cjs,ts,vue}"] }, { files: ["**/*.{js,mjs,cjs,ts,vue}"], languageOptions: { globals: globals.browser } }, tseslint.configs.recommended, pluginVue.configs["flat/essential"], { files: ["**/*.vue"], languageOptions: { parserOptions: { parser: tseslint.parser } } }, ]);
该文件已经内置了一些常用的配置
新版的ignores不用单独创建文件，直接写在defineConfig内即可
import { defineConfig } from "eslint/config"; import globals from "globals"; import tseslint from "typescript-eslint"; import pluginVue from "eslint-plugin-vue"; import eslintConfigPrettier from "eslint-config-prettier"; // 新增 export default defineConfig([ { files: ["**/*.{js,mjs,cjs,ts,vue}"] }, // 省略其它... // 新配置中ignores直接写在defineConfig内 { ignores: [ "*.sh", "node_modules", "*.md", "*.woff", "*.ttf", ".vscode", ".idea", "dist", "/public", "/docs", ".husky", ".local", "/bin", "/src/mock/*" ] } ]);https://eslint.org/blog/2025/03/flat-config-extends-define-co...
开发阶段进行 ESLint 扫描
vite项目中需要安装vite-plugin-eslint插件来使eslint显示的提示你代码规范，开发阶段进行 ESLint 扫描，以命令行的方式展示出代码中的规范问题
pnpm i vite-plugin-eslint -D
vite.config.ts中配置
import { defineConfig } from 'vite'; import eslintPlugin from 'vite-plugin-eslint'; export default defineConfig({ plugins: [eslintPlugin()], });
重启项目，然后检查eslint配置是否生效，例如在.eslintrc.cjs中配置一个禁止定义未使用的变量，此时在项目中定义一个变量但不使用，控制台就会报错提示：
ESlint与Prettier冲突报错
代码格式上的冲突
我们在运行项目的时候，需要注意ESlint和Prettier这两个文件的配置项，有时候报错是因为这两个文件的配置项不一致导致的，例如ESlint默认缩进为4个字符，而Prettier默认缩进2个字符，报错如下：
此时需要统一两个配置文件的配置，将缩进统一改成4个字符即可。
除此之外，我们还有自动化配置，让Prettier来接管ESlint的格式化，用来覆盖 ESLint 本身的规则配置，关掉所有和 Prettier 冲突的 ESLint 的配置
将 Prettier 集成到现有的 ESLint 工具中:
pnpm install -D eslint-config-prettier
在.eslintrc.cjs文件中新增配置：
import { defineConfig } from "eslint/config"; import globals from "globals"; import tseslint from "typescript-eslint"; import pluginVue from "eslint-plugin-vue"; import eslintConfigPrettier from "eslint-config-prettier"; // 新增 export default defineConfig([ { files: ["**/*.{js,mjs,cjs,ts,vue}"] }, // 省略其它... eslintConfigPrettier ]);
格式化问题
新版本ESlint9中，不需要eslint-plugin-prettier插件做格式化替代了，如果你使用eslint-plugin-prettier反而会导致eslint报错
import { defineConfig } from "eslint/config"; import globals from "globals"; import tseslint from "typescript-eslint"; import pluginVue from "eslint-plugin-vue"; import eslintPluginPrettier from 'eslint-plugin-prettier'; // 新增 export default defineConfig([ { files: ["**/*.{js,mjs,cjs,ts,vue}"] }, // 省略其它... eslintPluginPrettier ]);
其它
在vite项目中，如果使用commenjs则文件的后缀为.cjs，如果使用js则默认是es规范。
安装ESlint和Prettire插件，配置保存自动格式化代码：
参考资料：
eslint版本9.0之后配置方法
