惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

T
Troy Hunt's Blog
GbyAI
GbyAI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
月光博客
月光博客
Engineering at Meta
Engineering at Meta
The Register - Security
The Register - Security
阮一峰的网络日志
阮一峰的网络日志
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
F
Fortinet All Blogs
博客园 - 司徒正美
博客园 - 聂微东
T
Tailwind CSS Blog
MyScale Blog
MyScale Blog
Microsoft Security Blog
Microsoft Security Blog
Jina AI
Jina AI
A
About on SuperTechFans
Y
Y Combinator Blog
N
Netflix TechBlog - Medium
V
V2EX
I
InfoQ
WordPress大学
WordPress大学
小众软件
小众软件
The Cloudflare Blog
Recent Announcements
Recent Announcements
U
Unit 42
The Last Watchdog
The Last Watchdog
P
Palo Alto Networks Blog
Vercel News
Vercel News
罗磊的独立博客
H
Hackread – Cybersecurity News, Data Breaches, AI and More
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
M
MIT News - Artificial intelligence
Project Zero
Project Zero
美团技术团队
L
LangChain Blog
S
Security @ Cisco Blogs
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Last Week in AI
Last Week in AI
W
WeLiveSecurity
S
Securelist
H
Hacker News: Front Page
K
Kaspersky official blog
Martin Fowler
Martin Fowler
Know Your Adversary
Know Your Adversary
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
J
Java Code Geeks
P
Proofpoint News Feed
有赞技术团队
有赞技术团队
Google Online Security Blog
Google Online Security Blog
D
DataBreaches.Net

博客园 - HorseShoe2016

Ethereum 学习笔记 ---- Solidity 数据位置(Calldata, Memory, Storage)编码与布局全解析 vscode 禁用警告提示音 浏览器加载 HTML 页面并执行 Javascript 的流程图 Ethereum学习笔记 ---- 多重继承中的 C3线性化算法 Ethereum学习笔记 ---- 使用 Remix 调试功能理解 bytes 在 memory 中的布局 Ethereum学习笔记 ---- 通过 Event 学习《合约ABI规范》 Javascript: Blob, File/FileReader, ArrayBuffer, ReadableStream, Response 转换方法 vscode 无法调试 golang testify suite 中的单个 test 的解决办法 纯js实现 vue 组件 与 vue 单文件组件对比 一个简单的 indexedDB 应用示例 html 元素的 onEvent 与 addEventListener vue3 defineComponent: 使用纯 Javascript 定义组件 vue3 动态编译组件失败:Component provided template option but runtime compilation is not supported in this build of Vue Javascript Object 中,isExtensible/isSealed/isFrozen 的对比 mini-vue: 响应式数据的实现 手写Promise Python 安装依赖包,出现 ssl.SSLCertVerificationError 的问题,解决方法 CentOS7 源码编译安装 Python 3.8.10,开启 SSL 功能 Protocol Buffer Go (proto3) - macos 搭建 protocol buffer 环境 + Encoding 实验
vscode vue 插件与 emmet、tailwind css 插件冲突的解决方案
HorseShoe2016 · 2023-09-23 · via 博客园 - HorseShoe2016

今天使用 vscode 开发 nuxt3 项目,发现在 vue 文件中,emmet 提示功能不可用。
emmet 提示功能,如下图所示:

百度、google一阵子,发现是个全球性存在的问题,是 vue 插件 volar 导致的 vscode 自带的 emmet 提示功能不可用。

如果在vscode中不安装 vue 插件,那么想要在vue文件中启用 emmet 功能,需要在 user settings.json 中添加如下配置:

"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"emmet.showExpandedAbbreviation": "always",
"emmet.includeLanguages": {
    "vue-html": "html",
    "vue":"html",
},

可以参考: Emmet in Visual Studio Code


调试一阵子,发现如果安装了 volar (Vue Language Features(Volar)TypeScript Vue Plugin(Volar))、vetur 等 vue 相关的插件,就会导致 emmet 提示功能不可用;但是如果在 settings.json 中添加了如上配置,在编辑 vue 文件时,输入 div.class#id>p 这样一段字符串后,再按下 tab 键,依然可以插入

<div class="class" id="id">
    <p></p>
</div>

不过终归使用体验上不太方便;而如果禁用或者卸载 volar 等 vue 插件,又会导致 *.vue 文件没有 vue 语法高亮显示,也不方便。
就保持 volar 安装上,并且 emmet 提示内容不显示,就这么将就着用了。

然后又安装 Tailwind CSS IntelliSense 插件,发现 volar 也导致 tailwind 的提示无法显示。
不能忍了~

于是想到,可能 volar 、vetur 等 vue 插件使用了某些 vue 的内核组件,导致了 emmet 、tailwind css 的提示内容无法显示。
而自己知道还有一款 vue 插件 vuter,或许使用了不同的内核。于是禁用 volar 等 vue 相关插件,重新安装了 vuter 插件 ---- 这下 vue 文件高亮显示emmet 提示tailwind css 提示 就都可用了。


不过,禁用 TypeScript Vue Plugin(Volar) 后,会导致 nuxt.config.tsapp.config.ts 中出现如下图所示的错误提示:

这种错误提示并不影响项目的开发、编译。

posted on 2023-09-23 21:38  HorseShoe2016  阅读(1361)  评论()    收藏  举报