Prettier 是主流 JavaScript 代码格式化工具，开箱即用且支持精细配置；推荐项目本地安装，通过配置文件（如 .prettierrc.js）或命令行统一风格，并与 ESLint 协同实现质量与格式双修复。

JavaScript 代码格式化主要靠工具自动完成，Prettier 是目前最主流的选择——它不依赖代码语义，只做“强制统一风格”的事，开箱即用但支持精细配置。

安装与基础使用

Prettier 可以全局或项目本地安装。推荐在项目中本地安装，避免团队成员版本不一致：

• 运行 npm install --save-dev prettier 添加为开发依赖
• 通过 npx prettier --write src/**/*.js 格式化所有 JS 文件
• 加 --check 参数（如 npx prettier --check src/*.js）可仅检查是否符合规范，适合 CI 验证

配置文件怎么写

Prettier 支持多种配置方式，优先级从高到低：命令行参数 > .prettierrc.js（或 .prettierrc.json/.yml） > package.json 中的 "prettier" 字段。推荐用 .prettierrc.js，便于写注释和逻辑：

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

• 常见配置项包括：semi: true（是否加分号）、singleQuote: true（单引号）、tabWidth: 2、trailingComma: 'es5'（对象/数组末尾逗号）、printWidth: 80（行宽）
• 注意：eslint-config-prettier 要配合 ESLint 使用，它会关闭所有与 Prettier 冲突的 ESLint 规则，避免重复报错

编辑器集成（以 VS Code 为例）

装好插件后，关键是要设为“保存时自动格式化”且指定 Prettier 为默认 JS 格式化工具：

立即学习“Java免费学习笔记（深入）”；

• 安装官方插件 Prettier - Code formatter
• 在 VS Code 设置中搜索 format on save，勾选启用
• 右键文件 → Format Document With… → 选择 Prettier 并设为默认
• 也可在工作区设置 .vscode/settings.json 中固定："editor.defaultFormatter": "esbenp.prettier-vscode"

与 ESLint 协同工作

Prettier 处理“怎么排版”，ESLint 处理“怎么写才安全合理”。两者不是替代关系，而是分工合作：

• 安装：npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier
• ESLint 配置（.eslintrc.js）中加入：
  extends: ['eslint:recommended', 'plugin:prettier/recommended']
  其中 plugin:prettier/recommended 已内置 eslint-config-prettier，自动禁用冲突规则
• 这样 ESLint 的 --fix 就能同时修复代码质量 + 格式问题