这个VSCode扩展解决了Vue和React项目中嵌套注释的问题,让你能够对已经被注释的代码再次添加注释,并提供了简洁美观的注释样式。
功能特点
在前端开发中,特别是使用Vue和React等框架时,我们经常会遇到这样的问题:当代码已经被注释后,无法再添加额外的注释层级。这是因为HTML/JSX/Vue模板中的注释通常使用 <!-- -->
格式,而这种格式不支持嵌套。
这个扩展提供了以下功能:
- 单键切换注释:一个快捷键完成所有注释操作,循环切换注释状态
- 简洁美观的注释样式:优化了注释符号,使代码更加整洁
- 智能注释层级:自动识别当前注释状态,进行适当的操作
- 多行块注释:选择多行代码时,使用块注释而不是单行注释
- 支持多种文件类型:支持超过20种编程语言,包括Vue, React, JavaScript, Python等
注释循环切换
使用单个快捷键,代码会在三种状态之间循环切换:
- 未注释 → 添加普通注释
- 普通注释 → 添加嵌套注释
- 嵌套注释 → 移除所有注释(回到未注释状态)
多行块注释功能
当选择多行代码时,扩展会自动使用块注释而不是单行注释,这样可以:
- 保持代码的原始缩进和格式
- 保留选择中的任何现有注释
- 使注释更加清晰和易于阅读
- 适应不同编程语言的块注释语法
支持的注释类型
- 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;
}
使用方法
- 选择需要注释/取消注释的代码行或代码块
- 使用快捷键或命令:
快捷键
- 切换注释状态:
Ctrl+Alt+/
(Windows/Linux) 或 Cmd+Alt+/
(Mac)
命令面板
- 按下
F1
或 Ctrl+Shift+P
(Windows/Linux) / Cmd+Shift+P
(Mac) 打开命令面板
- 输入 "切换嵌套注释"
支持的文件类型
- 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。
祝您使用愉快!