javascript如何实现代码格式化_工具如Prettier如何配置？-js教程-PHP中文网

javascript如何实现代码格式化_工具如Prettier如何配置？

夢幻星辰

发布： 2025-12-23 16:37:02

原创

542人浏览过

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

javascript如何实现代码格式化_工具如prettier如何配置？

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

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

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

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

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

造物云营销设计

造物云是一个在线3D营销设计平台，0基础也能做电商设计

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

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 就能同时修复代码质量 + 格式问题

以上就是javascript如何实现代码格式化_工具如Prettier如何配置？的详细内容，更多请关注php中文网其它相关文章！