


vscode中怎么使用.vue代码模板?下面本篇文章给大家介绍一下vscode中配置并使用.vue代码模板的方法,希望对大家有所帮助!
vscode里使用.vue代码模板
1.设置.vue模板
打开编辑器,点击文件 —— 首选项 —— 用户代码片段,会弹出来一个输入框。【推荐学习:《vscode教程》】
在输入框输入vue,回车,会打开一个vue.json文件。
在里面复制以下代码:
{ "Print to console": { "prefix": "vue", "body": [ "<!--", "* @Component: ", "* @Maintainer: ", "* @Description: ", "-->", "<template>", " <div class=\"container\">\n", " </div>", "</template>\n", "<script>", "export default {", " name: {\n", " },", " data() {", " return {\n", " }", " },", " mounted(){\n", " },", " methods: {\n", " },", " components: {\n", " }", "}", "</script>\n", "<style scoped lang=\"scss\">\n", "</style>", "$2" ], "description": "Log output to console" } }
模板内容可按自己的喜好自行修改。
然后新建一个.vue文件,输入vue然后按tab键。
2.如果第一步没有成功
如果第一步成功是最好的,万一按tab键没有成功生成模板,而是多了一个空格:
步骤一:点击文件 —— 首选项 —— 设置,修改以下设置:
"emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" }, "emmet.triggerExpansionOnTab": true
步骤二:点击编辑器右下角笑脸左边的文件类型,选择配置文件关联,输入vue然后回车。右下角的文件类型就会从html变成vue。这时再用tab键就可以成功生成模板了~
更多编程相关知识,请访问:编程学习!!
The above is the detailed content of A brief discussion on how to configure and use .vue code templates in vscode. For more information, please follow other related articles on the PHP Chinese website!

2022年了,该学会用VSCode debug了!下面本篇文章手把手带大家会习VSCode debug,希望对大家有所帮助!

本篇是VSCode配置文章,手把手教大家怎么在VSCode中配置使用 Geant4 和 Root,希望对大家有所帮助!

本篇文章扒拉一下vscode Prettier的选项,总结分享16个让你的代码变漂亮的属性,希望对大家有所帮助!

“工欲善其事,必先利其器!”,vscode作为前端开发的重要工具,其插件能大幅提升战斗力,精心收集12个插件,总有几款你还未曾拥有。

VSCode中如何开发uni-app?下面本篇文章给大家分享一下VSCode中开发uni-app的教程,这可能是最好、最详细的教程了。快来看看!

VScode中怎么开发置C/C++?怎么配置C/C++环境?下面本篇文章给大家分享一下Windows系统下VScode配置C/C++环境图文教程,希望对大家有所帮助!


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version
Visual web development tools

Notepad++7.3.1
Easy-to-use and free code editor

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
