vscode中vue怎么格式化代码

Posted 2023-03-09

PS:现在推荐使用vetur插件
win10崩溃，重装win7，结果sublime text插件无法安装，各种心塞，于是决定转战vscode。
与sublime text相比，vscode有不少优点：
中文输入法支持更好。在windows平台下，需要st支持中文输入需要安装各种插件，而且效果也是差强人意。
基础功能更全面。vscode自带插件管理、git、sidebar、集成终端、emmet等功能，st每次都需要自己安装，浪费时间。
但是st插件更丰富，vscode插件相对较少，vue相关插件vscode更是只有一个，而且使用起来有不少问题，并且作者已经很久没有更新了，折腾了一下午，最终可以用来编写vue项目了。
vscode关于vue插件现在只有vscode-vue一个，安装完成代码提示并没有生效，这是因为vue文件的语言模式默认为html，需要在setting.json中设置：
"files.associations":
"*.vue": "vue"


但是此时编写样式emmet插件不能正确识别，所以我后来也放弃了这种方式。
仔细思考，编写vue项目主要需要：
代码补全&代码片段
emmet正确生成html标签
emmet正确生成css、scss
代码高亮
其中2、3、4点，在html中都是可以做到的，而vue的代码补全与代码片段只需要自己编写就可以了，于是我将vue文件的语言模式还原为默认的html，在用户代码片段中加入vue文件需要的代码片段（文件-首选项-用户代码片段-html），最终效果还可以。
添加的代码片段（持续更新）：

// Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $id and $id:label and $1:label for variables. Variables with the same id are connected.
// Example:
"Print to console":
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
,
"Create vue template":
"prefix": "vuec",
"body": [
"<template>",
"</template>",
"<script>",
"export default ",
" name: \"$1:component_name\",",
" data () ",
" return ",
" ;",
" ",
"",
"</script>",
"<style lang=\"$2:css\" scoped>",
"</style>"
],
"description": "Create vue template"

参考技术A PS:现在推荐使用vetur插件
win10崩溃，重装win7，结果sublime text插件无法安装，各种心塞，于是决定转战vscode。
与sublime text相比，vscode有不少优点：
中文输入法支持更好。在windows平台下，需要st支持中文输入需要安装各种插件，而且效果也是差强人意。
基础功能更全面。vscode自带插件管理、git、sidebar、集成终端、emmet等功能，st每次都需要自己安装，浪费时间。
但是st插件更丰富，vscode插件相对较少，vue相关插件vscode更是只有一个，而且使用起来有不少问题，并且作者已经很久没有更新了，折腾了一下午，最终可以用来编写vue项目了。
vscode关于vue插件现在只有vscode-vue一个，安装完成代码提示并没有生效，这是因为vue文件的语言模式默认为html，需要在setting.json中设置：
"files.associations":
"*.vue": "vue"


但是此时编写样式emmet插件不能正确识别，所以我后来也放弃了这种方式。
仔细思考，编写vue项目主要需要：
代码补全&代码片段
emmet正确生成html标签
emmet正确生成css、scss
代码高亮
其中2、3、4点，在html中都是可以做到的，而vue的代码补全与代码片段只需要自己编写就可以了，于是我将vue文件的语言模式还原为默认的html，在用户代码片段中加入vue文件需要的代码片段（文件-首选项-用户代码片段-html），最终效果还可以。
添加的代码片段（持续更新）：

// Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $id and $id:label and $1:label for variables. Variables with the same id are connected.
// Example:
"Print to console":
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
,
"Create vue template":
"prefix": "vuec",
"body": [
"<template>",
"</template>",
"<script>",
"export default ",
" name: \"$1:component_name\",",
" data () ",
" return ",
" ;",
" ",
"",
"</script>",
"<style lang=\"$2:css\" scoped>",
"</style>"
],
"description": "Create vue template"