先说点儿背景，别把我当老师

说起 ESLint 和 Prettier，hen多小伙伴dou跟我一样，一听到这俩词就脑子嗡嗡响。

哈哈，我也是这么想的。

不过别急，咱慢慢聊，先从Zui基础的概念说起。

ESLint 是干嘛的？

简单来说它是代码质量守门员。

它会帮你检查变量未定义、函数参数太多之类的潜在坑。

你写 JavaScript、TypeScript、Vue…只要配好规则，它就Neng给你挑出“红灯”。

说实话，这玩意儿省了不少 Debug 的时间。

Prettier 又是啥子玩意儿？

Prettier geng像是代码美化师。

它不管对错，只负责把代码排版得漂漂亮亮。

比如统一单引号双引号、行宽、缩进……全dou按你设定的风格来。

那种“我写得乱七八糟，你却还Neng读懂”的感觉，简直让人感动到哭。

为啥要把两者一起用？

有人会问：“两套工具一起搞，会不会冲突啊？”

其实啊，它们本来就是分工合作的好搭档。

ESLint 检查“对不对”，Prettier 整理“长得好kan”。

Ru果只用 ESLint，你可Neng还得手动改格式；只用 Prettier，又抓不到潜在错误。

所以把它们组合起来代码既安全又优雅，简直是程序员的福音。

怎么让 ESLint 和 Prettier “和谐相处”？ 第一步：装插件

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier

这几个包一个负责检查，一个负责格式化，还有两个专门帮它们打好配合关系。

第二步：配置 .eslintrc.js

module.exports = {
  env: { browser: true, es2021: true },
  extends: ,
  plugins: ,
  rules: {
    'prettier/prettier': 'error', // 把 prettier 当成错误来报
    // 其它自定义规则…
  },
};

.prettierrc 配置文件示例

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "semi": false
}

第三步：VS Code 插件同步开启

装上 ESLint 与 Prettier 插件，记得把 “Format on Save” 打开。

这样每次保存时VS Code 会先跑 ESLint 报错，再让 Prettier 把代码排好版。

自动化：Git Hook + Husky + lint-staged 的完美组合

P.S. 我这段话里有个小插曲——下面这段文字正是你给我的示例，我直接搬进去啦：

提交前自动检查是通过 Husky 和 lint-staged 实现的。Husky 负责接管 Git hook，比如 pre-commit；

在控制台手动执行指令：比如 npm run lint 实际执行的是 eslint .，ESLint 会读取项目根目录下的 eslint.config.js，加载对应规则，比如 Antfu 的 ESLint 配置，用来检查 Vue、TypeScript、JavaScript 等文件。

面试中常见问法：

lint-staged 负责读取本次Yi经 git add 到暂存区的文件，在 package.json 中添加需要校验的文件类型：

项目里 ESLint 和 Prettier 主要通过两种方式生效：一种是手动执行 npm scripts，另一种是提交前通过 Git hooks 自动触发。

Prettier 类似，npm run format 实际执行的是 prettier . --write，它会读取 .prettierrc 和 .prettierignore, 按照统一规则格式化文件

git commit 触发

Eslint+Prettier 在 CI 中跑一遍也不错哦

Linter 在 CI里跑一遍，Ke以提前拦截错误，让 PR geng干净利落。

随机插播：为什么百度不收录我的博客？

Aha，这个问题经常被问到，我也曾迷惑过几次。

站点没有 robots.txt 正确放行或者误封了爬虫；

Sitemap 没生成或没有提交到搜索平台；

Lighthouse 打分低，被判定为低质量内容；

A标签链接太少或者内部链接结构混乱；还有就是服务器响应慢——这点Zui致命！

说实话，Ru果想让百度收录，就要确保以上几点dou OK，再加点原创、有价值的内容——咱们现在写的这篇文章，就是符合 SEO 要求的大范本啦！哈哈，你懂的~

Eslint 与 Prettier 真正合作时的小坑儿提醒

一定要装 eslint-config-prettier, 不然两边规则会冲突导致“格式化后又报错”。

.eslintignore 与 .prettierignore 要保持一致，否则有些文件会被一个忽略而另一个检查。

NPM script 中顺序别搞反——先 lint 再 format geng安全。

If you use TypeScript, 别忘了装 @typescript-eslint/parser/@typescript-eslint/eslint-plugin.

The “no‑undef” rule 有时候会把全局变量给踹掉，这时候Ke以在 .eslintrc 加入 "env": {"node": true}.

end note—老友提醒一下哈~

#咱就是说用了这个组合以后你再也不用纠结于“代码到底该怎么写”这种小事儿了。

#真的，一键保存后一切dou整齐划一，好像魔法一样。哈哈！

#Ru果还有疑问，就去翻翻官方文档吧——虽然官方文档有点枯燥，但里面藏着所有细节。你懂的~

本文约字，希望Neng帮你快速上手 ESLint + Prettier 的协同工作！祝编码愉快～ 🚀​

---