在VS Code中用Prettier统一代码风格需四步：安装官方Prettier插件；设为默认格式化工具并启用保存时自动格式化；项目根目录建.prettierrc自定义规则；配合eslint-config-prettier避免与ESLint冲突。
在VS Code中用Prettier统一代码风格，核心是装对插件、配好规则、设为默认格式化工具——不复杂，但容易忽略关键细节。
打开VS Code扩展市场（Ctrl+Shift+X），搜索“Prettier – Code formatter”，安装由Esben Petersen发布的官方插件（图标是蓝色P加白色箭头）。安装后无需重启，但建议关闭再打开一个JS/TS/HTML文件，确认右下角状态栏出现“Prettier”标识。如果没显示，可能被其他格式化工具（如Beautify）抢占了优先级，需手动指定。
按 Ctrl+, 打开设置，搜索“default formatter”，点击“Edit in settings.json”。在 JSON 中添加或修改：
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": { "editor.formatOnSave": true },
"[typescript]": { "editor.formatOnSave": true },
"[html]": { "editor.formatOnSave": true },
"[css]": { "editor.formatOnSave": true },
"[json]": { "editor.formatOnSave": true }
这样保存时自动格式化，且针对不同语言启用对应支持。
项目根目录新建 .prettierrc 文件，用JSON或YAML写个性化规则，比如：
SeoShop网店系统全站纯静态html生成更符合搜索引擎优化，并修改了以前许多js代码，取消了连接地址的js代码更换为纯div+css格式，并且所有文件可自定义url和文件名，自定义内部连接，自定义外部连接，等多个符合SEO搜索引擎优化的设置，让您的网店更容易让搜索引擎收录. 简单易用 极速网店真正做到以人为本、以用户体验为中心，能使您快速搭建网上购物网站。后台管理操作简单，一目了然，没有夹杂多
0
VS Code会自动读取该文件，比全局设置更灵活，也便于团队协同。
如果同时用了ESLint，别让两者打架：关掉ESLint的自动修复（"eslint.autoFixOnSave": false），改用 eslint-config-prettier 关闭所有和Prettier重叠的规则。只需在项目中运行：
npm install --save-dev eslint-config-prettier
并在 .eslintrc.js 的 extends 数组末尾加上 'prettier' 即可。
基本上就这些。装好、设默认、配规则、避冲突——代码风格就稳了。
以上就是使用Prettier插件统一VS Code中的代码风格的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
667
收藏
