JavaScript Academy · 课时

使用 ESLint 进行代码检查；使用 Prettier 格式化

Q: 「使用 ESLint 进行代码检查；使用 Prettier 格式化」这节课中我会学到什么？

使用 ESLint 发现常见问题，使用 Prettier 自动格式化。保持配置精简，并通过 npm 脚本运行 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 ESLint 发现常见问题，使用 Prettier 自动格式化。保持配置精简，并通过 npm 脚本运行

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

为什么要检查与格式化

目标：让代码保持整洁和一致。

ESLint → 发现问题
Prettier → 格式化代码
配置保持简洁；通过 npm 脚本运行
采用适合初学者的默认设置

ESLint：发现问题

ESLint 强制执行规则，以发现错误并改进代码风格；这里我们模拟几项简单的检查。

// Tiny "lint" demo: simple checks on a string of code
const sample = "const x=1; console.log(x)";

function lint(code) {
  const issues = [];
  if (code.includes("console.log")) {
    issues.push("no-console: avoid console.log in production code");
  }
  if (code.includes("=1;")) {
    issues.push("spacing: add spaces around = for readability");
  }
  if (!code.trim().endsWith(";")) {
    issues.push("semi: missing semicolon");
  }
  return issues;
}

console.log("lint issues:", lint(sample));

Prettier：保持布局一致

Prettier 专注于自动格式化，让每个人都使用相同的布局，无需争论。

// Tiny "format" demo: normalize spaces and add semicolon
function format(code) {
  // Very naive formatting just for demo
  const spaced = code.replaceAll("=1;", " = 1;");
  const withSemi = spaced.trim().endsWith(";") ? spaced.trim() : spaced.trim() + ";";
  return withSemi;
}

const ugly = "const x=1\nconsole.log( x )";
console.log("formatted:", format(ugly));

简洁的 ESLint 配置

从 eslint:recommended 开始，然后添加一两条规则。对于初学者来说，配置应保持简洁。

// Example .eslintrc.json (printed lines)
const eslintrc = [
  "{",
  "  \"env\": { \"es2022\": true, \"node\": true },",
  "  \"extends\": [\"eslint:recommended\"],",
  "  \"rules\": {",
  "    \"no-console\": \"warn\",",
  "    \"semi\": [\"error\", \"always\"]",
  "  }",
  "}"
];

for (const l of eslintrc) console.log(l);

简洁的 Prettier 与脚本

添加简单的 format 和 lint 脚本，让团队可以轻松运行它们。

// Example .prettierrc (printed lines)
const prettierrc = [
  "{",
  "  \"semi\": true,",
  "  \"singleQuote\": true,",
  "  \"tabWidth\": 2",
  "}"
];

for (const l of prettierrc) console.log(l);

// Example npm scripts (printed)
const scripts = [
  "\"scripts\": {",
  "  \"lint\": \"eslint .\",",
  "  \"format\": \"prettier --write .\"",
  "}"
];

for (const l of scripts) console.log(l);

日常工作流程

提示：

在提交前运行 format。
让 ESLint 规则保持少量且清晰。
使用 eslint:recommended 和简洁的 .prettierrc。
添加类似 npm run fix 的快捷脚本来自动修复。

Prettier 与 ESLint 测验

快速检查：格式化工具。

回顾

回顾：使用 ESLint 发现问题，使用 Prettier 格式化代码。让配置保持简洁，并通过 npm 脚本运行两者，从而实现顺畅的团队工作流程。

常见问题解答

「使用 ESLint 进行代码检查；使用 Prettier 格式化」课时是免费的吗？

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

「使用 ESLint 进行代码检查；使用 Prettier 格式化」这节课中我会学到什么？

使用 ESLint 发现常见问题，使用 Prettier 自动格式化。保持配置精简，并通过 npm 脚本运行你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「使用 ESLint 进行代码检查；使用 Prettier 格式化」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy