# Prettier格式化

官方文档

之前看了官方文档,在vscode全局配置文件setting.json中修改使不同语言使用不同格式化插件

"[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
"[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

1
2
3
4
5
6

这样虽然解决了问题,但是很麻烦

# 1. 单个项目配置

我的prettierrc配置 (opens new window)

prettier官方给出了针对不同项目配置prettier的方法:

在项目根目录建立.prettierrc文件

{
    "semi": false,
    "overrides": [
        {
            "files": "*.test.js",
            "options": {
                "semi": true
            }
        },
        {
            "files": ["*.html", "legacy/**/*.js"],
            "options": {
                "tabWidth": 4
            }
        },
        {
            "files": ["*.css"],
            "options": {
                "tabWidth": 2
            }
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

从上面可以看出,.prettierrc文件对不同格式的文件自定义了不同的tabWidth值,而tabWidth就是缩进的空格数,这样做可以方便地配置不同格式下prettier的选项,但是对我来说还不够,因为每建一个项目就要建一个这个文件(我有时候会忘记).于是我想弄成全局配置.

# 2. 全局配置

官方文档在扩展设置一栏中给了一个prettier.configPath

prettier.configPath 提供Prettier的配置文件的自定义路径。

注意，如果设置了该值，将始终使用该值，并且本地配置文件将被忽略。全局默认值的一个更好的选择是将~/.prettierrc文件放在主目录中。

在setting.json中配置如下:

//指定全局全局配置文件
"prettier.configPath": "***\\.prettierrc",

1
2

.prettierrc就是上面写的配置文件,只要在setting.json中指定配置文件,就会应用到全局

需要注意的是,如果设置了这个选项,那你项目目录的.prettierrc文件就会失效.

# prettier设置详解

prettier给出了如下设置选项

prettier.arrowParens	//在单独的箭头函数周围加上()	默认always
prettier.bracketSpacing	//在对象{}之间加上空格
prettier.endOfLine		//换行，LF(unix)还是CRLF(Windows)
prettier.htmlWhitespaceSensitivity
prettier.insertPragma
prettier.jsxBracketSameLine	//在jsx中把'>' 是否单独放一行 //已弃用
prettier.bracketSameLine // 代替"jsxBracketSameLine"
prettier.jsxSingleQuote	//jsx中使用单引号
prettier.printWidth
prettier.proseWrap
prettier.quoteProps
prettier.requirePragma // 单文件控制是否使用prettier格式化
prettier.semi	//行末分号
prettier.singleQuote	//使用单引号而不是双引号
prettier.tabWidth	//tab的宽度
prettier.trailingComma	//尾随逗号 <es5|none|all>
prettier.useTabs   //使用制表符代替空格缩进
prettier.vueIndentScriptAndStyle //是否缩进Vue文件中的代码<script>和<style>标记
prettier.embeddedLanguageFormatting

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# prettier推荐配置

https://gist.github.com/fncheng/ff998ff899cdae09798fbe1afdc4c8a5

# requirePragma

在文件头添加

/**
 * @prettier
 */

或者
/**
 * @format
 */
来控制 文件是否被prettier格式化
如果未添加文件头，则该文件不会被格式化

1
2
3
4
5
6
7
8
9
10

# 小程序wxml格式化

微信开发者工具setting.json添加如下代码

"html.format.wrapLineLength": 80,
"wxml.format.wrapLineLength": 80,
"[wxml]": {
    "editor.defaultFormatter": "wechat.miniprogram.wxml-language-features"
}

1
2
3
4
5

# EditorConfig配置

https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties

root = true

[*]
# 字符集
charset = utf-8
# 缩进风格，类似于useTabs
indent_style = space
# 缩进大小
indent_size = 2
end_of_line = lf
max_line_length = 80
# 是否删除行尾的空格
trim_trailing_whitespace = true
# 是否在文件的最后插入一个空行
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

indent_style = sapce 等同于 prettier.useTabs=false

个人用配置

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
tab_width = 2
end_of_line = lf
max_line_length = 80
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

1
2
3
4
5
6
7
8
9
10
11
12
13

← User-Agent Switcher and Manager vscode更新特性 →