博客

一、prettier介绍

prettier是一款代码格式化插件，插件id为：esbenp.prettier-vscode

传送门：

beautify官方文档

二、下载

下载prettier插件

三、配置vscode

如下图所示修改settings.json，设置使用esbenp.prettier-vscode这款插件作为html、css、less、js、vue的格式化工具

四、配置.prettierrc.yml

esbenp.prettier-vscode插件配置文档：https://prettier.io/docs/en/configuration.html

esbenp.prettier-vscode插件所有可选项+含义：https://prettier.io/docs/en/options.html

推荐使用.prettierrc.yml或者.prettierrc.js，因为相比于.prettierrc.json，yml和js可以添加注释，而json不行。如果.prettierrc.json使用jsonc格式保存，虽然可以添加注释，但是格式化却没效了。

下面是.prettierrc.yml的配置文件，根据需求自行更改

# 每行最多多少个字符换行
# printWidth: 100
#  tab缩进大小默认为2
tabWidth: 2
#  使用tab缩进，默认false
useTabs: false
#  使用分号 默认true
semi: false
#  使用单引号 默认false(在jsx中配置无效, 默认都是双引号)
singleQuote: false
#  行尾逗号,默认none可选 none|es5|all
#  es5 包括es5中的数组、对象
#  all 包括函数对象等所有可选
TrailingCooma: all
#  对象中的空格 默认true
#  true: { foo: bar }
#  false: {foo: bar}
bracketSpacing: true
#  JSX标签闭合位置 默认false
#  true: <button
#   className="prettier-class"
#   id="prettier-id"
#   onClick={this.handleClick}>
#   Click Here
# </button>
#  false: <button
#   className="prettier-class"
#   id="prettier-id"
#   onClick={this.handleClick}
# >
#   Click Here
# </button>
bracketSameLine: true
jsxBracketSameLine: true
#  箭头函数参数括号 默认avoid 可选 avoid| always
#  avoid 能省略括号的时候就省略 例如x => x
#  always 总是有括号
arrowParens: avoid

# endOfLine: "<lf|crlf|cr|auto>"
# "lf" – Line Feed only (\n), common on Linux and macOS as well as inside git repos
# "crlf" - Carriage Return + Line Feed characters (\r\n), common on Windows
# "cr" - Carriage Return character only (\r), used very rarely
# "auto" - Maintain existing line endings (mixed values within one file are normalised by looking at what’s used after the first line)
endOfLine: crlf

proseWrap: true