Frontend Academy · 课时

Prettier 与 ESLint 设置

添加 Prettier 进行自动格式化，添加 ESLint 捕获错误，配置这两个工具，并将它们集成到保存时格式化的工作流程中。

第 3 / 4 课13 个步骤

Prettier 与 ESLint 设置 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

为什么要自动化代码风格？

手动讨论代码格式会浪费团队时间。Prettier 会自动将代码格式化为统一风格。ESLint 能发现错误并强制执行最佳实践。二者结合可以消除大量代码审查意见。

安装 Prettier

将 Prettier 安装为开发依赖项，创建配置文件，并在 package.json 中添加格式化脚本。Prettier 无需配置即可运行，其默认设置很合理，但您也可以自定义这些设置。

npm install --save-dev prettier

# .prettierrc (optional config)
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

VSCode 中集成 Prettier

安装 Prettier - Code Formatter 扩展。然后将其设为 defaultFormatter，并在设置中启用 formatOnSave。现在，每次保存文件时都会运行 Prettier。

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

安装 ESLint

安装 ESLint，并使用 npm init @eslint/config 对其进行初始化。此向导会帮助您选择运行环境（浏览器或 Node）、模块系统和 TypeScript 支持。它会生成 eslint.config.js 文件。

npm install --save-dev eslint
npx eslint --init

# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.js

ESLint 配置示例

这是一个适用于浏览器 JavaScript 项目的简单 ESLint 扁平配置。规则可以是“error”、“warn”或“off”。扩展 @eslint/js recommended 等共享配置，可以建立可靠的基础规则集。

// eslint.config.js
import js from '@eslint/js';
export default [
  js.configs.recommended,
  {
    rules: {
      'no-console': 'warn',
      'no-unused-vars': 'error',
      'eqeqeq': 'error'
    }
  }
];

TypeScript ESLint

对于 TypeScript 项目，请添加 typescript-eslint，以发现 TypeScript 特有的问题：不安全的 any 使用、缺少返回类型以及误用 Promise。

npm install --save-dev typescript-eslint

// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
  ...tseslint.configs.recommended
);

Prettier 与 ESLint 协同使用

ESLint 的某些格式规则会与 Prettier 冲突。使用 eslint-config-prettier 禁用这些规则，让 Prettier 负责所有格式化工作，而 ESLint 只负责代码质量。

npm install --save-dev eslint-config-prettier

// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
  js.configs.recommended,
  prettierConfig  // disables ESLint formatting rules
];

.eslintignore 与 .prettierignore

告诉工具哪些文件需要跳过。.eslintignore 文件使用 gitignore 语法。通常需要忽略 node_modules、dist 和生成的文件。

# .eslintignore
node_modules
dist
.next
coverage

用于代码检查的 npm 脚本

将代码检查和格式化脚本添加到 package.json 中，以便持续集成环境和团队成员能够以一致的方式运行它们。

{
  "scripts": {
    "lint": "eslint src --ext .js,.ts,.tsx",
    "lint:fix": "eslint src --fix",
    "format": "prettier --write src",
    "format:check": "prettier --check src"
  }
}

用于提交前钩子的 lint-staged 与 husky

使用 husky + lint-staged，在每次 git 提交前自动只对已暂存的文件进行代码检查和格式化。这样可以防止未格式化或存在问题的代码进入代码库。

npm install --save-dev husky lint-staged
npx husky init

# package.json:
"lint-staged": {
  "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
  "*.{css,json,md}": "prettier --write"
}

使用 EditorConfig 保持基础一致性

.editorconfig 文件可在所有编辑器和集成开发环境中强制执行基本编辑器设置（缩进风格、行尾），不受插件影响。请将它与 Prettier 一起添加。

# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

快速检查

为什么在同时使用 Prettier 的 ESLint 配置中应添加 eslint-config-prettier？

在交互式课程中回答

总结：Prettier 与 ESLint

通过 VSCode 扩展，Prettier 会在保存时自动格式化代码。ESLint 会发现错误和风格违规。使用 eslint-config-prettier 避免冲突。添加 lint-staged + husky 强制执行提交前检查。统一的工具链可以消除格式争议，并在错误发布前发现它们。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 41
课程: 163

免费开始学习查看完整课程

常见问题解答

「Prettier 与 ESLint 设置」课时是免费的吗？

是的 — 「Prettier 与 ESLint 设置」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「Prettier 与 ESLint 设置」这节课中我会学到什么？

添加 Prettier 进行自动格式化，添加 ESLint 捕获错误，配置这两个工具，并将它们集成到保存时格式化的工作流程中。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「Prettier 与 ESLint 设置」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

Chrome DevTools：Elements、Console、Network
VSCode：扩展、Emmet 与快捷键
Prettier 与 ESLint 设置
浏览器兼容性与 caniuse.com

← 返回 Frontend Academy