下面是“vscode下的vue文件格式化问题”的完整攻略。
背景
在使用Vue.js
进行前端项目开发时,在vscode
中打开一个.vue
文件后,格式化代码时会遇到一些问题。默认情况下,vscode
只会格式化.html
和.js
部分的代码,而.vue
文件中嵌套了.html
、.css
以及.js
代码,所以需要进行一些配置才能完整格式化.vue
文件。
解决方案
安装插件
首先,在vscode
中安装vetur
插件,该插件提供了对.vue
文件的友好支持。可以在vscode
的插件商店中搜索并进行安装。
配置settings.json
接下来,打开settings.json
文件,可以通过文件 > 首选项 > 设置
或者快捷键Ctrl + ,
来打开。在该文件中添加如下配置:
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,
"editor.formatOnSave": true
上述配置含义如下:
-
"[vue]"
:指定对于.vue
文件的配置 -
"editor.defaultFormatter": "octref.vetur"
:使用vetur
作为默认格式化工具 -
"vetur.format.defaultFormatter.html": "prettier"
:在.vue
文件中,使用prettier
格式化.html
代码 -
"vetur.format.defaultFormatter.js": "prettier"
:在.vue
文件中,使用prettier
格式化.js
代码 -
"vetur.format.defaultFormatter.css": "prettier"
:在.vue
文件中,使用prettier
格式化.css
代码 -
"vetur.validation.template": false
:禁用对.vue
文件中的<template>
块语法错误进行检查 -
"vetur.validation.script": false
:禁用对.vue
文件中<script>
块的语法错误进行检查 -
"vetur.validation.style": false
:禁用对.vue
文件中<style>
块的语法错误进行检查 -
"editor.formatOnSave": true
:在保存文件时自动格式化代码
示例说明
下面以一个简单的.vue
文件为例进行说明:
<template>
<!-- 这里是Vue模板代码 -->
<div>
<p>Hello, {{ name }}!</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'world'
}
}
}
</script>
<style scoped>
p {
color: red;
}
</style>
在默认情况下,使用快捷键Shift + Alt + F
进行代码格式化,只会格式化.html
和.js
部分的代码,如下所示:
<template>
<!-- 这里是Vue模板代码 -->
<div>
<p>Hello, {{ name }}!</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'world'
}
}
}
</script>
<style scoped>
p {
color: red;
}
</style>
但是通过上述配置之后,再次使用Shift + Alt + F
进行格式化,则会将.css
部分的代码也进行格式化,结果如下所示:
<template>
<!-- 这里是Vue模板代码 -->
<div>
<p>Hello, {{ name }}!</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'world'
}
}
}
</script>
<style scoped>
p {
color: red;
}
</style>
当然,如果你想更改.html
、.js
、.css
部分的格式化配置,只需要在settings.json
文件中对应修改即可。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vscode下的vue文件格式化问题 - Python技术站