系统参数:
MacOS 10.12.6
Node.js: v8.2.1
yarn: 1.3.2
Prettier是代码格式化工具,支持 JavaScript, TypeScript, CSS, Less, SCSS, JSON, markdown。
Prettier可以在多个平台上使用,即可以在命令行中去格式化代码,又可以在 Sublime 和 VS Code 编辑器中去格式化。经过代码格式化,可以保证代码的风格统一与整洁清晰。
全局安装 npm 包 prettier
yarn global add prettier
sublime 包安装
package install
JsPrettier
配置按键
shift + super + p
选 Preferences: Key Bindings
这里绑定了 "super+shift+f",可以自己选择喜欢的快捷键。
[
{
"keys": ["super+shift+f"],
"command": "js_prettier"
}
]
JsPrettier 自己的配置
Sublime Text > Preferences > Package Settings > JsPrettier > Settings - User
其中
prettier_cli_path
是 prettier 的调用地址,可以在命令行用which prettier
查到node_path
是 node.js 的地址可以在命令行用which node
查到"auto_format_on_save": false
保存时格式化不开,一般手动格式化。prettier_options.printWidth : 100
每一行的预设宽度设置为100。这个宽度涉及到Prettier判断是否要把一行代码换行。这里设置 100 比较大一些,也可以设置成 80 等。prettier_options.singleQuote : true
保留单引号,不要把单引号格式化成双引号。prettier_options.trailingComma : none
对于 json 中最后一个键值对的后面,是否要加逗号(trailing comma)。这里是不要加,设置成 none。但是 Airbnb 的格式规范是最后一行JSON也要加逗号,因为这样把最后一个键值对向上移动多行,也不会造成JSON 的错误,这样代码更健壮。prettier_options.bracketSpacing : true
括号里面的空间要不要进行格式化,可以选择让 prettier 进行格式化控制,看个人喜好,如果觉得 prettier 不如自己控制好,可以设置为 false。prettier_options.parser : babylon
prettier的编译器一般是两种选择 babylon 或者 flow,这里就用默认的 babylon,babylon的强势就是格式解析。作为另外一个选择 flow,主要是做静态检查会更多。但是 flow 可能存在一些 utf8 字符的 bug (参照prettier parser, difference betweenbabylon
andflow
#1180),所以尽量使用 babylon。另外这个选项还有 typescript 和 css,当检测到是这两种文件类型是,prettier 会自动从 babylon
切换到 typescript 和 css 来做解析。
个人的 JsPrettier 代码配置如下,供参考:
{
"debug": false,
"prettier_cli_path": "/usr/local/bin/prettier",
"node_path": "/Users/pro/.nvm/versions/node/v8.2.1/bin/node",
"auto_format_on_save": false,
"prettier_options": {
"printWidth": 120,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"parser": "babylon",
"semi": true,
"requirePragma": false
}
}
另:作者 James Long 在今年从火狐出来,专心做 Prettier,匠人精神让人欣赏。他对自己的想法写在了文章中:A Prettier JavaScript Formatter, January 10, 2017。