VSCode .vue 文件 html css 无智能提示

简介: VSCode .vue 文件 html css 无智能提示

在 VSCode v1.15.1 版本之后,.vue 文件输入 html css 不会智能提示,


那么需要通过 VSCode 插件安装 HTML Snippets 或者 vetur 插件。


然后找到 VSCode 设置里面的 settings.json, 直接搜索这个文件即可。


打开 settings.json 配置

{
    "workbench.sideBar.location": "left",
    "window.zoomLevel": -1,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "emmet.triggerExpansionOnTab": true
}

我这边打开之后默认是上面这样的


然后添加配置:


{
   "emmet.triggerExpansionOnTab": true,
   "emmet.includeLanguages": {
       "vue-html":"html",
       "vue":"html"
    },
    "files.associations": {
       "*.vue": "html"
    }
}

最终显示:


{
    "workbench.sideBar.location": "left",
     "window.zoomLevel": -1,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "vue-html":"html",
        "vue":"html"
    },
    "files.associations": {
        "*.vue": "html"
    } 
}

安装插件且配置好之后就可以去 .vue 文件中编写 html css 了且都会带智能提示。


补充:还有个问题就是在使用 VSCode 创建了 .vue 文件之后,Vue 的插件,比如 vue,vue-beautify,vue-color,VueHelper,vertur 等等,可能会在 .vue 文件中使用无效,那么你需要修改一下 VSCode 右下角的文件类型。


image.png


它显示的类型竟然是 html,那么你需要点击它,在弹出的框中修改为 Vue 即可。


相关文章
|
10天前
|
XML 前端开发 数据格式
BeautifulSoup 是一个 Python 库,用于从 HTML 和 XML 文件中提取数据
【5月更文挑战第10天】BeautifulSoup 是 Python 的一个库,用于解析 HTML 和 XML 文件,即使在格式不规范的情况下也能有效工作。通过创建 BeautifulSoup 对象并使用方法如 find_all 和 get,可以方便地提取和查找文档中的信息。以下是一段示例代码,展示如何安装库、解析 HTML 数据以及打印段落、链接和特定类名的元素。BeautifulSoup 还支持更复杂的查询和文档修改功能。
29 1
尚硅谷html5+css3(4)浮动
尚硅谷html5+css3(4)浮动
|
1天前
|
前端开发
尚硅谷html5+css3(3)布局
尚硅谷html5+css3(3)布局
|
1天前
|
缓存 前端开发 JavaScript
尚硅谷html5+css3(2)CSS5基本知识
尚硅谷html5+css3(2)CSS5基本知识
|
1天前
|
移动开发 搜索推荐 HTML5
尚硅谷html5+css3(1)html相关知识
尚硅谷html5+css3(1)html相关知识
|
3天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
5 1
|
10天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
23 0
HTML5/CSS3粒子效果进度条代码
|
JavaScript 索引
VUE文件的创建
第一步创建完VUE 项目之后 可以根据自己的需求 创建自己的文件目录(下图是我的文件目录,当然每个人的创建目录的风格也是不同的所以不做严格的规范) 模块文生成    components文件夹下创建  模块文件名字.
778 0
|
1天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
7 1
|
1天前
|
JavaScript 前端开发 Java
JavaSE精选-Vue
JavaSE精选-Vue
7 1