首页>>前端>>Vue->vscode快捷键生成vue模板(vscode自动生成html模板)

vscode快捷键生成vue模板(vscode自动生成html模板)

时间:2023-12-02 本站 点击:0

volar怎么快速生成vue模板

配置自定义的snippets。

通过vscode的snippets我们可以自己配置自定义的snippets,从而实现快捷生成代码片段,在VsCode里按F1,输入snippets-选择配置用户代码片段,选择后出现选择配置的界面,这里我们对Vue文件的代码片段进行配置,然后就完成了。

随着vscode以及vue的越来越普及,vetur这个名字也越来越被人熟知。vetur是一个vscode插件,用于为.vue单文件组件提供代码高亮以及语法支持。

vue VSCode 开发设置(html自动补全、eslint保存时格式化、vetur 格式化html)

File - Preference - Setting -搜索setting.json - Edit in settings.json

settings.json

方法1:File - Preference - Setting -搜索setting.json - Edit in settings.json

settings.json

Setting.json

方法2:File - Preference - 搜索框输入:files.autoSave

之后能看到 files.autoSave 的可选项有

off : 关闭自动保存(默认)

afterDelay: 延迟xx时间后保存,可在 "files.autoSaveDelay" 中配置延迟时间;

onFocusChange: 编辑器失去焦点时自动保存;

onWindowChange: 窗口失去焦点时(编辑器窗口的切换,桌面窗口的切换)自动保存;

安装 ESLint

vscode 中安装 ESLint 插件

然后配置 vscode 的 setting.json

File - Preference - User Snippers

vue.json文件,然后添加下面模板

然后新建.vue文件 ,写下vue然后Tap键就能生成什么的模板。

如果没有生成模板只是多了个空格或者生成的是vue标签的话,我们还得设置一下,打开settings.json,添加下面的设置

如果你的Setting.json文件有 "files.associations" 设置的话,请删除,因为他会和上面 emmet.syntaxProfiles 冲突。

files.associations 和 emmet.syntaxProfiles 都是设置html 标签的补全,如果是要用.vue模板补全功能的话,html标签补全我们就用 emmet.syntaxProfiles 来设置。

vue 的开发中 vscode 可装用于开发规范的插件有

Prettier :规范js

ESLint: 规范js

Vuter: 规范 .vue 文件中 template

stylus: 规范 stylus

注意:以下配置是基于接下来介绍的插件设置的,如果没有安装插件是不会生效的。

或者:

其中:

4.如果使用了stylus,那么vscode安装stylus插件,进行设置,不适用冒号双引号大括号

根目录下创建eslint规则文件 .eslintrc.js

(下面browsers 多了s 正确的为 browser )

vscode中打尖括号出现组件模板结构是哪个插件

安装vscode的插件:Vue VSCode Snippets

二、我这里默认显示是HTML代码,改成“自动检测”还是会在vue文件里面显示HTML(这个先不管)

重点:我们手动点击这里,把它设置为vue

三、开始写vb,就会有提示,我们选择第一个vbase,就会弹出vue模板了。

就不用辛辛苦苦手敲一个了…

百度看到有配置一大堆东西的,我都懵了,还好发现了这个方法。

结果如下图噢:

vue.js

vscode


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/9381.html