Prettier - Code formatter插件使用（前端美化插件）

最新推荐文章于 2025-09-14 15:09:00 发布

原创最新推荐文章于 2025-09-14 15:09:00 发布 · 1.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端

一，安装

vscode直接搜索

安装完毕后

二，配置 Prettier：

安装完插件后，打开 VSCode 的设置（快捷键是 Ctrl + ,）。
在搜索框中输入 Format On Save，找到并勾选“Editor: Format On Save”选项，这样每次保存时，Prettier 会自动格式化代码。
继续在设置搜索框中输入 Default Formatter，然后将“Editor: Default Formatter”设置为 Prettier，确保 Prettier 是默认的格式化工具。

三，详细配置

在你的项目目录里面创建一个叫.prettierrc的文件，注意！！后缀前面什么名字也不要有。

把.prettierrc放到项目里面，而且要注意，如果你放入项目里面，你有一个js文件的层级比.prettierrc层级高，它是不生效的，所以要放到项目的根目录里面。

常用的配置

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 4,
  "useTabs": false,
  "trailingComma": "all",
  "bracketSpacing": false,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

第1个，semi - 是否在每行末尾加分号

第2个，singleQuote - 是否使用单引号代替双引号

第3个，tabWidth - 指定缩进的空格数。

第4个，useTabs - 是否使用 tab 缩进而不是空格。（建议优先使用tab缩进而不是空格）

第5个，trailingComma - 多行结构中是否在末尾添加逗号。

它有"none" ，“es5” ，"all"这些值（*）

例如，"none"：不在最后一项后面添加逗号。

const user = {
  name: "Alice",
  age: 25
};
const numbers = [1, 2, 3];

"es5"：在符合 ES5 标准的结构中添加逗号，比如对象和数组。函数参数等不添加逗号。

const user = {
  name: "Alice",
  age: 25,
};
const numbers = [1, 2, 3];

"all"：在所有多行结构的最后一项后面都加逗号，包括函数参数

const user = {
  name: "Alice",
  age: 25,
};

function greet(name, age,) {
  console.log(`Hello, ${name}. You are ${age} years old.`);
}

第6个，brackegetSpacing - 对象大括号 {} 内是否保留空格。

第7个，arrowParens - 箭头函数参数是否总是加括号。

第8个**endOfLine** - 指定换行符样式

值有"lf" ，“crlf” ， “cr” ，“auto”