Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Nested Comments XTNew to Visual Studio Code? Get it now.
Nested Comments XT

Nested Comments XT

nested-comments-xt

|
6 installs
| (0) | Free
在Vue和React项目中支持嵌套注释,解决已注释代码无法再次注释的问题,支持多行块注释
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

嵌套注释 (Nested Comments)

这个VSCode扩展解决了Vue和React项目中嵌套注释的问题,让你能够对已经被注释的代码再次添加注释,并提供了简洁美观的注释样式。

功能特点

在前端开发中,特别是使用Vue和React等框架时,我们经常会遇到这样的问题:当代码已经被注释后,无法再添加额外的注释层级。这是因为HTML/JSX/Vue模板中的注释通常使用 <!-- --> 格式,而这种格式不支持嵌套。

这个扩展提供了以下功能:

  • 单键切换注释:一个快捷键完成所有注释操作,循环切换注释状态
  • 简洁美观的注释样式:优化了注释符号,使代码更加整洁
  • 智能注释层级:自动识别当前注释状态,进行适当的操作
  • 多行块注释:选择多行代码时,使用块注释而不是单行注释
  • 支持多种文件类型:支持超过20种编程语言,包括Vue, React, JavaScript, Python等

注释循环切换

使用单个快捷键,代码会在三种状态之间循环切换:

  1. 未注释 → 添加普通注释
  2. 普通注释 → 添加嵌套注释
  3. 嵌套注释 → 移除所有注释(回到未注释状态)

多行块注释功能

当选择多行代码时,扩展会自动使用块注释而不是单行注释,这样可以:

  • 保持代码的原始缩进和格式
  • 保留选择中的任何现有注释
  • 使注释更加清晰和易于阅读
  • 适应不同编程语言的块注释语法

支持的注释类型

  • HTML风格注释 (<!-- -->)
  • JavaScript单行注释 (// )
  • JavaScript块注释 (/* */)
  • Python注释 (# 和 """ 块注释)
  • Ruby注释 (# 和 =begin/=end 块注释)
  • CSS注释 (/* */)
  • 以及更多语言特定的注释格式

嵌套注释示例

html单行注释示例:

原始代码:

<div>这是一段代码</div>

第一次按快捷键(添加普通注释):

<!-- <div>这是一段代码</div> -->

第二次按快捷键(添加嵌套注释):

<!-- /* <div>这是一段代码</div> */ -->

第三次按快捷键(移除所有注释):

<div>这是一段代码</div>

多行块注释示例:

<div>
    <div>这是一段代码</div>
    <!-- <div>这是一段代码</div> -->
</div>

第一次按快捷键(添加普通注释):

<!-- <div>这是一段代码</div> -->

第二次按快捷键(添加嵌套注释):

<!-- <div>
    <div>这是一段代码</div>
    /* <div>这是一段代码</div> */
</div> -->

第三次按快捷键(移除我们刚刚加的注释,并恢复用户以前的注释):

<div>
    <div>这是一段代码</div>
    <!-- <div>这是一段代码</div> -->
</div>

js单行注释示例: 注释前

const a = 1;

注释后

// const a = 1;

原始代码: js多行注释示例:

function example() {
  const a = 1;
  const b = 2;
  return a + b;
}

选择整个函数并按快捷键(添加块注释):

/*
function example() {
  const a = 1;
  const b = 2;
  return a + b;
}
*/

再次按快捷键(移除块注释):

function example() {
  const a = 1;
  const b = 2;
  return a + b;
}

使用方法

  1. 选择需要注释/取消注释的代码行或代码块
  2. 使用快捷键或命令:

快捷键

  • 切换注释状态:Ctrl+Alt+/ (Windows/Linux) 或 Cmd+Alt+/ (Mac)

命令面板

  1. 按下 F1 或 Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (Mac) 打开命令面板
  2. 输入 "切换嵌套注释"

支持的文件类型

  • Vue (.vue)
  • React JSX (.jsx)
  • React TSX (.tsx)
  • JavaScript (.js)
  • TypeScript (.ts)
  • HTML (.html)
  • CSS (.css)
  • SCSS (.scss)
  • LESS (.less)
  • Python (.py)
  • Java (.java)
  • C/C++ (.c, .cpp)
  • C# (.cs)
  • Go (.go)
  • Rust (.rs)
  • Ruby (.rb)
  • JSON (.json)
  • XML (.xml)
  • PHP (.php)
  • Markdown (.md)
  • 以及更多...

优势

  • 操作效率更高:只需记住一个快捷键,即可完成所有注释操作
  • 注释样式更美观:优化了注释符号,减少了不必要的标记
  • 智能识别:自动检测当前注释状态,执行最合适的操作
  • 多行块注释:选择多行代码时自动使用块注释,保持代码格式
  • 广泛的语言支持:支持超过20种编程语言的注释格式

版本历史

0.0.4

  • 修复了JavaScript文件多行注释格式问题
  • 修复了Vue文件script部分注释格式问题
  • 优化了注释逻辑,JavaScript使用简单的两状态切换
  • 添加了扩展图标
  • 改进了Vue文件中不同区域的注释格式识别

0.0.3

  • 添加多行块注释功能
  • 扩展支持的编程语言范围
  • 优化块注释的格式和缩进处理
  • 改进对不同语言注释语法的识别

0.0.2

  • 优化注释样式,使其更简洁美观
  • 将添加注释和移除注释的功能合并为单个切换命令
  • 改进注释识别算法,支持更复杂的嵌套场景
  • 增强多行混合注释的处理能力

0.0.1

  • 初始版本
  • 支持基本的嵌套注释功能
  • 支持Vue、React、JavaScript、TypeScript和HTML文件类型

反馈与贡献

如果你发现任何问题或有改进建议,请在GitHub仓库中提交issue或pull request。

祝您使用愉快!

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft