如题:用了另一个插件叫Prettier ESlint
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210121150808194.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDU0MTUwMQ==,size_16,color_FFFFFF,t_70)
保存之前
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210121150845465.png)
- 这里是.vue 文件的 template 页面布局
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210121151038474.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDU0MTUwMQ==,size_16,color_FFFFFF,t_70)
- 这里是.vue 文件的 style css样式
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210121151230523.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDU0MTUwMQ==,size_16,color_FFFFFF,t_70)
保存之后
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210121150906279.png)
- template 标签结果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210121151331498.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDU0MTUwMQ==,size_16,color_FFFFFF,t_70)
- style 标签结果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210121151401429.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDU0MTUwMQ==,size_16,color_FFFFFF,t_70)
项目运行结果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210121152348449.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDU0MTUwMQ==,size_16,color_FFFFFF,t_70)
setting.json中的配置
"vetur.format.defaultFormatter.js": "prettier-eslint",
"[vue]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false,
}
},
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
设置中的调整
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210121152654208.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDU0MTUwMQ==,size_16,color_FFFFFF,t_70)
- 默认是prettier 我改成了这个选项,有没有影响我也不清楚,我就是把自己动过的地方都列出来了,各位大佬可以自己调试!
我的完整配置
- 为了以防有其他配置有影响我这边把我自己的完整配置贴出来
{
"background.useDefault": false,
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"right": "0",
"bottom": "0",
"z-index": "99999",
"width": "40%",
"background-position": "bottom",
"background-size": "100%",
"background-repeat": "no-repeat",
"opacity": 0.2
},
"background.customImages": [
"file:///D:/bgc/2.png",
"file:///D:/bgc/3.png"
],
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"[vue]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"workbench.iconTheme": "vscode-icons",
"px2vw.width": 1536,
"px2rem.rootFontSize": 24,
"window.zoomLevel": 1,
"editor.tabSize": 2,
"editor.wordWrapColumn": 100,
"breadcrumbs.enabled": true,
"prettier.singleQuote": true,
"editor.renderControlCharacters": true,
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false,
}
},
"workbench.colorTheme": "Atom One Dark",
"workbench.activityBar.visible": true,
"eslint.alwaysShowStatus": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"vetur.format.defaultFormatter.js": "prettier-eslint",
}
我只尝试了js文件和vue文件的效果,对于其他的请自行 调试