一,安装
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"