如何在.vue文件中使用html代码补全与路径提示

最新推荐文章于 2024-08-15 13:29:50 发布

一枚小白 -、

最新推荐文章于 2024-08-15 13:29:50 发布

阅读量1.5k

点赞数 2

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/yhy19/article/details/103845853

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、settings.json中配置files.associations对象

首先，依次打开“文件 --> 首选项 --> 设置”，直接搜索settings.json文件，加入以下代码，给.vue文件添加html规则

      "files.associations": {
     // "*.js":"html",
        "*.ejs":"html",
        "*.vue":"html",
      },

可以看到也出现了代码提示功能，直接按住tab键，就可以快速生成了，如下图：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一枚小白 -、

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

详解 vue-cli 的打包配置文件代码（带注释）

2401_84436095的博客

05-04

1060

前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】x,// 是否注入 html// 压缩的方式minify: {},}),// 没有指定输出文件名的文件输出的静态文件名return (前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-tBldAzXB-1714762082079)]

VUE项目目录与运行流程（VScode）

m0_64498202的博客

01-22

770

一个页面可以拆分成一个个组件，每个组件有着自己独立的结构，样式，行为。好处：便于维护，利于复用->提升开发效率。组件分类：普通组件，根组件。

参与评论您还未登录，请先登录后发表或查看评论

使用vscode时，如何在.vue文件中使用html代码补全功能

bluefish_flying的博客

03-19

4万+

使用vscode编写vue代码，刚开始点击tab是不会自动补全代码的，这个就很郁闷了。百度了半天：https://segmentfault.com/a/1190000010339485 参考这个最后解决了问题一、HTML Snippets在vscode中把这个插件下载了并且启用，然后翻阅插件的ReadMe，我们可以看到如下图得FAQ:这段代码是提示我们需要在settings.json中配置file...

开发Vue或React项目时路径别名智能提示方案

白开水的博客

02-03

348

在我们开发Vue或React项目时，每次配置完路径别名，在输入路径时都没有对应的智能提示路径，如何解决这个痛点呢？笔者通常都是使用vscode，本次使用vscode来进行演示解决，非常简单的。

VScode中vue遇到代码不提示

最新发布

m0_73052350的博客

08-15

756

vue代码提示

vscode中如何编写php代码提示,vscode编写vue代码没有代码提示

weixin_34140828的博客

03-12

1555

一、安装插件在左侧有个安装插件的按钮，点击后即可通过关键词搜索来安装插件二、插件配置文件 =》首选项=》设置=》用户设置三、插件vetur作用：代码提示，高亮配置："emmet.syntaxProfiles": {"vue-html": "html","vue": "html"}ESLint作用：代码错误检查配置："eslint.validate": ["javascript","javascri...

idea中在html页面中写Vue代码没有提示和高亮

白日梦想家

08-25

2万+

idea中在html页面中写Vue代码没有提示和高亮针对于这一问题，首先需要下载插件Vue.js, File>Setting>Plugins，在插件市场中搜索Vue.js，安装一下。有可能会出现搜索转圈圈、下载慢等问题，一般都是网络问题，可以连上手机热点，再来试试（亲测有效）第一种解决方法比较简单：在setting中找到Editor>File Types>Vue.js Template,然后点击加号，添加*.html，即.html认为vue可识别创建test.html文

vscode配置@路径提示,并解决vue文件内失效问题

qq_37359757的博客

09-25

9981

1、安装插件：Path Intellisense插件； 2. 插件设置 3.添加： "path-intellisense.mappings": { "@": "${workspaceRoot}/src" } 4.在项目package.json所在同级目录下创建文件jsconfig.json： { "compilerOptions": { "target": "ES6", "module": "commonjs", "allowSynthet

vue——vue项目创建、vue项目目录结构、vue cli的运行说明、es6导入导出语法、vue-router使用、vue项目使用bootstrap和jQuery、element-ui

kdq18486588014的博客

06-30

503

`创建一个vue项目之前，我们需要知道纯前端作为一个项目时需要node.js的支持，所以需要先安装一个node.jsnode.js中文官网下载的时候以长期支持版本为主，长期支持版本随时间会变更，此图只能参考安装时最好使用msi，这样安装完毕后会自动配置node和npm环境变量vue cli官方网以官方网安装为主，此文章安装方式再后续时间段可能不是主流安装了，安装之前请阅读下面的引用部分vue cli安装指令本文以window为主使用npm安装很慢的话，可以考虑cnpm 安装时可能会失败，或者报

单文件Vue组件的SublimeText语法高亮显示

08-08

Vue.js的单文件组件是将HTML、CSS和JavaScript集成在一个.vue文件中的方式，这样使得组件的逻辑更加清晰，易于管理和维护。Vue组件通常包含三个主要部分：模板（Template）、脚本（Script）和样式（Style）。在...

VUE3 插件的开发和使用

m0_49515138的博客

02-07

5551

传统的 Webpack 可以用来构建 npm 包文件，但按照目前更主流的技术选项，编译结果更干净更迷的当属 Rollup ，但 Rollup 需要配置很多插件功能，这对于刚接触包开发的开发者来说学习成本比较高，而 Vite 的出现则解决了这个难题，因为 Vite 的底层是基于 Rollup 来完成构建，上层则简化了很多配置上的问题，因此接下来将使用 Vite 来带领开发者入门 npm 包的开发。的新声明 (.d.ts) 文件 ts(7016)

vscode中Vue别名路径提示的实现

11-19

开发场景当使用 Vue 框架进行项目开发时，在 vue.config.js 中配置好了路径别名后，到其他页面引入组件、引入 css 、引入静态文件路径时，使用路径别名不会智能提示路径。虽然在 vscode 中安装了Path Intellisense 插件，但是并无作用。这样容易出现路径拼写错误的低能问题，同时也会造成开发效率降低解决方案在项目 package.json 所在同级目录下创建文件 jsconfig.json，来解决别名路径不提示的问题。（配置完保存文件后需要重启编辑器才能生效。而且它只能识别 .vue 和 .js结尾的文件，css文件与其他的静态文件依然没有提示，不推荐！

使用v-html解决Vue.js渲染过程中html标签不能被解析（html标签显示为字符串）

热门推荐

志远的博客

11-02

7万+

在网页中，后台传来的json数据中包含html标签，将该json数据绑定到Vue.js中对象中，对该对象进行for循环，发现数据中的html标签不能被解析，而是当作字符显示出来。问题如下所示：解决： Vue.js中提供了v-html这个指令来解决这个问题，或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象，就可以正常解析了。代码改动如下：参考资料：

vue项目中@符号没有路径提示

正一品程序员的博客

09-24

3693

1、vs-code下载“Path Intellisense”插件。 2、打开设置 - 首选项 - 搜索 Path Intellisense - 打开 settings.json ，添加 "path-intellisense.mappings": { "@": "${workspaceRoot}/src" } 3、在vue项目 package.json 所在同级目录下创建文件 jsconfig.json：,将以下代码复制粘贴即可 { "compilerOptions

新版vscode写vue补全html(js和其他都适用)

chenchen818的博客

09-15

2万+

最近在.vue文件里无法补全html代码了,网上给的各种都是老版本试用的，很难受！通过搜集各路大佬的解决办法总结出来三个最好用的办法，有参考其他人的会附链接，官方文档的就不附啦！方法一：HTML Snippets插件在vscode的插件商店中下载HTML Snippets这个插件可以看到在FAQ上已经划去了老版本的方法，那新版本怎么操作嘞根据官方文档，要改本地文件里的内容，来查找一...

VSCode vue下路径自动补全包括 @/

借人之智，完善自己

02-26

4643

vscode 路径自动补全，网上已经有很多的资料了，随便查一下就有，这里面主要记录一下我配置的时候遇到的过的一些问题，在一个地方跌倒两次了，不能再跌倒第三次了。一、安装 1、VSCode安装Path Intellisense: 打开vscode，在插件部分搜索path Intellisense，然后直接点击安装即可，如下图: 我的已经安装过过了，所以，没有安装按钮，正常的情况，点击安装即可。 2、配置路径配置文件jsconfig.json 在根目录，也就是package.json同级目录..

Vue项目中../路径./路径@/路径~@/路径的区别

weixin_44524835的博客

01-15

3788

…/ 表示父级目录下 ./ 表示当前目录下 @/ 是webpack/build/webpack.base.conf.js中配置的路径别名 ~ @/中的 ~ 代表根目录，~@即根目录下的配置为@的路径

eslint+vuter+prettier 自动格式化代码配置

weixin_34189116的博客

01-15

4055

//用户配置 { "workbench.editor.enablePreview": false, //打开文件不覆盖 "search.followSymlinks": false, //关闭rg.exe进程 "editor.minimap.enabled": false, //关闭快速预览 "liveServer.settings.donotShowInfoMsg": true, //关闭liv...

如何在sublime中安装Vue扩展

在Sublime Text中安装Vue扩展可以极大地提高开发效率，让开发者在编辑器中就能享受到诸如语法高亮、代码自动补全、组件预览、错误提示等便利功能。要在Sublime Text中安装和使用Vue扩展，我们可以按照以下步骤进行...