解决VSCode中Auto-Close-Tag插件配置冲突的思路

雨婷吖_6779

雨婷吖_6779

2026-08-24

246人浏览

原创

auto close tag没反应需先禁用vscode内置html.autoclosingtag并全窗口重启;script/style不闭合须启用sublimetextmode;vue/jsx需配置activationonlanguage支持;光标错乱应关闭formatontype并设固定tabsize。

解决vscode中auto-close-tag插件配置冲突的思路

Auto Close Tag没反应?先关掉 VSCode 内置的 html.autoClosingTag

VSCode 1.84+ 默认开启内置标签闭合,它会静默接管所有 HTML 文件的补全逻辑,导致 Auto Close Tag 插件完全不工作——状态栏右下角看不到 ACT 图标,敲 <div> 也没反应。这不是插件装错了,是 VSCode 自己先占了位置。 <p>必须手动禁用内置功能:</p> <ul> <li>打开命令面板(<code>Cmd + Shift + PCtrl + Shift + P)→ 输入 Preferences: Open Settings (JSON)

  • settings.json 中添加:"html.autoClosingTag": false
  • 保存后全窗口重启 VSCode(仅重载窗口无效)
  • <script></script><style></style> 不闭合?开 SublimeTextMode

    插件默认跳过 <script></script><style></style>,因为它们在 HTML 规范中允许自闭合写法(<script></script>),语义上不算“必须成对”。要强制补全,得启用更激进的匹配模式:

    VSCode
    VSCode

    避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

    下载
    • settings.json 中加:"auto-close-tag.SublimeTextMode": true
    • 该模式以输入 为触发点,主动推断并补全标签名(比如输 就弹出
    • 必须配合 "html.autoClosingTag": false 使用,否则两者逻辑冲突
    • <img><input> 等真自闭合标签仍不会多出 ,插件的语义识别是可靠的

    .vue 和 .jsx 文件里不生效?改 activationOnLanguage

    VSCode 把 .vue 文件识别为 vue 语言,把 .jsx 识别为 javascriptreact,而 Auto Close Tag 默认只监听 html 类型。需显式声明支持范围:

    • settings.json 中添加:"auto-close-tag.activationOnLanguage": ["html", "vue", "javascriptreact"]
    • javascriptreact 是 VSCode 对 JSX 的内部语言 ID,别写成 jsxreact
    • Vue 单文件组件中,只有 <template lang="html"></template> 块内才生效;若写了 lang="pug"lang="ts",插件不介入
    • JSX 标签结构建议交给 TypeScript 或 ESLint + Prettier 校验,Auto Close Tag 不处理 JavaScript 语法层的标签结构

    补全后光标卡住或缩进错乱?关 editor.formatOnType 并设固定 tabSize

    典型现象:输完 <div> 回车,光标停在 <code>

    里面;或者自动多缩进一层。这不是插件 bug,是它和格式化策略打架的结果。

    • 关闭 "editor.formatOnType": true(尤其搭配 Prettier 时),避免补全后立刻触发格式化干扰光标
    • "editor.tabSize" 设为明确值(如 2),别用 "auto",否则不同文件缩进逻辑不一致
    • 如果总在标签中间换行,试试改用 Tab 键触发闭合:"auto-close-tag.enableAutoCloseTagWithTab": true

    最常被忽略的是“全窗口重启”和“语言模式是否为 HTML”——哪怕设置全对,右下角显示的是 Plain TextPHP,一切配置都白搭。确认语言模式再调配置,比反复重装插件快得多。

    相关文章

    PHP速学视频免费教程(入门到精通)
    PHP速学视频免费教程(入门到精通)

    PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

    下载

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    vscode是什么_vscode怎么安装配置
    vscode是什么_vscode怎么安装配置

    VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

    2023.06.30

    1135

    18

    vscode怎么运行代码
    vscode怎么运行代码

    vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

    2023.07.21

    2252

    3

    vscode使用的框架介绍
    vscode使用的框架介绍

    VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

    2024.03.14

    1789

    12

    vscode一般用来写什么语言
    vscode一般用来写什么语言

    VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

    2024.03.14

    1587

    8

    vscode可以写什么语言
    vscode可以写什么语言

    vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

    2024.03.15

    2487

    12

    vscode中文设置方法
    vscode中文设置方法

    方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

    2024.03.15

    1738

    14

    vscode用途介绍
    vscode用途介绍

    Visual Studio Code(VSCode)是一款由 Microsoft 开发的多功能文本编辑器,适用于各种编程语言。作为一款开源软件,VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能,成为程序员不可或缺的工具。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

    2024.03.15

    1202

    10

    vscode和visualstudio的区别
    vscode和visualstudio的区别

    Visual Studio是一款功能强大的集成开发环境(IDE),适用于专业开发人员进行复杂项目的构建。而VSCode则是一款轻量级的代码编辑器,更适合各种规模的项目开发。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

    2024.03.15

    1076

    8

    vscode设置中文界面不生效解决方法
    vscode设置中文界面不生效解决方法

    vscode设置中文界面不生效解决方法:安装中文语言包、通过命令面板设置语言、检查 locale.json 设置、重新安装中文语言包、检查 VSCode 版本和更新、排除插件冲突、检查系统语言设置、查看 VSCode 日志和错误消息、重置 VSCode 设置、查看官方文档和社区支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

    2024.03.15

    394

    5

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程