记一次 vs code 配置 Prettier 代码自动格式化-天真的小窝

Prettier 是一个很有好用的前端代码格式化工具,合理设置之后保存文件就自动格式化代码,再配上 vs code 的自动保存代码简直不要太爽…

Prettier 官网配置文档:https://prettier.io/docs/en/options.html?url=bin.zmide.com

Prettier vs code 插件下载地址:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

打开 vs code 进入插件面板,直接搜索 Prettier 也可以快捷安装 第一个就是

安装之后进入 vs code 的设置添加两条关于 Prettier 的设置

"prettier.requireConfig": true,
"editor.formatOnSave": true

然后在项目根目录下添加一个 Prettier 的配置文件: .prettierrc.js

这里备份一下我的配置文件吧

module.exports = {
	semi: false, // 行位是否使用分号,默认为true
	trailingComma: 'es5', // 是否使用尾逗号,有三个可选值"<none|es5|all>"
	singleQuote: true, // 字符串是否使用单引号,默认为false,使用双引号
	printWidth: 160, // 一行的字符数,如果超过会进行换行,默认为80
	tabWidth: 4, // 一个tab代表几个空格数
	useTabs: true, // 启用tab缩进
	bracketSpacing: true, // 对象大括号直接是否有空格,默认为true,效果:{ foo: bar }
}

现在就配置好了,尝试修改一个文件看看效果,如果不满意的话参考官方配置文档修改就好了,不过如果是团队的话建议协商一起定制格式化规则避免代码冲突和异常改动