【搭建/全套解决方案/部署】vue3的后台管理系统--03--prettier自动格式化

133 阅读1分钟

prettier 在代码保存时,直接去符合ESlint的标准检测,进行格式自动化

官网 www.prettier.cn/

第一步 我们在VSC中安装:

Prettier

image.png

第二步 项目的根目录,创建一个文件: .prettierrc

image.png

在文件中写入

{
    "semi": false,
    "singleQuote": true,
    "trailingComma":"none"
}

第三步,点击设置

image.png

设置在保存的时候就自动格式化

image.png

第四步 把格式,打乱

image.png

此时,第一次使用时,要去选择

先右键选择,使用...格式化文档:

image.png

然后在VSC的上方,弹出一个初始化选择,你要去选择 prettier 作为格式化的插件

image.png

后续就不用了,当你保存的时候,就会自动格式化

image.png

第五步, vsc的tab默认4个空格,去设置那里改回2,ESlint默认2

image.png

然后 ESlint 与 prettier 有一个唯一的冲突: 他要求create后必须跟一个空格,而prettier没有的

image.png

此时,就可以去把这个忽略点:

.eslintrc.js文件 加上 'space-before-function-paren': 'off'

image.png

重启后,恢复正常

image.png