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

一，安装

vscode直接搜索
安装完毕后
二，配置 Prettier：

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

三 ，详细配置

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

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

1. {
2.   "semi": false,
3.   "singleQuote": true,
4.   "tabWidth": 4,
5.   "useTabs": false,
6.   "trailingComma": "all",
7.   "bracketSpacing": false,
8.   "arrowParens": "avoid",
9.   "endOfLine": "lf"
10. }

复制代码

第1个，semi - 是否在每行末了加分号
第2个，singleQuote - 是否使用单引号代替双引号
第3个，tabWidth - 指定缩进的空格数。
第4个，useTabs - 是否使用 tab 缩进而不是空格。（发起优先使用tab缩进 而不是空格）
第5个，trailingComma - 多行布局中是否在末了添加逗号。
它有"none" ， "es5"  ，"all"这些值（*）
比方，"none"：不在最后一项后面添加逗号。

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

复制代码

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

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

复制代码

"all"：在全部多行布局的最后一项后面都加逗号，包括函数参数

1. const user = {
2.   name: "Alice",
3.   age: 25,
4. };
6. function greet(name, age,) {
7.   console.log(`Hello, ${name}. You are ${age} years old.`);
8. }

复制代码

第6个，brackegetSpacing - 对象大括号 {} 内是否保存空格。
第7个，arrowParens - 箭头函数参数是否总是加括号。
第8个endOfLine - 指定换行符样式
值有"lf" ， "crlf" ， "cr" ，"auto"


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。