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

推荐订阅源

F
Full Disclosure
V
Vulnerabilities – Threatpost
Attack and Defense Labs
Attack and Defense Labs
N
News and Events Feed by Topic
SecWiki News
SecWiki News
S
Security @ Cisco Blogs
Schneier on Security
Schneier on Security
B
Blog
TaoSecurity Blog
TaoSecurity Blog
The Last Watchdog
The Last Watchdog
H
Hacker News: Front Page
Hacker News - Newest:
Hacker News - Newest: "LLM"
博客园_首页
D
Docker
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Y
Y Combinator Blog
W
WeLiveSecurity
N
News and Events Feed by Topic
F
Fortinet All Blogs
PCI Perspectives
PCI Perspectives
WordPress大学
WordPress大学
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
www.infosecurity-magazine.com
www.infosecurity-magazine.com
Recent Announcements
Recent Announcements
Forbes - Security
Forbes - Security
T
Tailwind CSS Blog
Hacker News: Ask HN
Hacker News: Ask HN
爱范儿
爱范儿
腾讯CDC
Last Week in AI
Last Week in AI
月光博客
月光博客
C
Cybersecurity and Infrastructure Security Agency CISA
P
Proofpoint News Feed
Help Net Security
Help Net Security
V
V2EX
C
Cyber Attacks, Cyber Crime and Cyber Security
C
CXSECURITY Database RSS Feed - CXSecurity.com
H
Heimdal Security Blog
L
LINUX DO - 最新话题
GbyAI
GbyAI
The Hacker News
The Hacker News
罗磊的独立博客
S
SegmentFault 最新的问题
H
Hackread – Cybersecurity News, Data Breaches, AI and More
博客园 - 【当耐特】
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
V2EX - 技术
V2EX - 技术
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
O
OpenAI News
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻

博客园 - 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)  评论()    收藏  举报