Delete Block

一个强大的 VS Code 插件，帮助您快速删除代码块内容。支持智能识别代码结构，让代码编辑更高效。

🚀 特性

• 快捷键支持: 使用 Shift+Backspace 快速删除代码块内容
• 智能内容识别: 自动识别光标所在的代码结构并删除其内容
• 保留结构完整性: 删除内容的同时保留代码块的边界符号（如 {}、[]、""）
• 多语言支持:
  • JavaScript
  • TypeScript
  • TypeScript React (TSX)
  • JSON
  • CSS
  • Less
  • Sass/SCSS
• 支持多种代码块类型:
  • 函数体内容 - 保留函数声明和花括号
  • 对象内容 - 保留等号和花括号，变成空对象
  • 数组内容 - 保留等号和方括号，变成空数组
  • 类体内容 - 保留类声明和花括号
  • 接口内容 - 保留接口声明和花括号
  • 字符串内容 - 保留等号和引号，变成空字符串
  • 块语句内容 - 保留花括号
  • 完整语句 - 删除整个语句（如 if、for、while 等）
• AST 解析: 使用 @babel/parser 解析代码，精确识别代码结构
• 智能边界处理: 自动处理不同类型的代码块边界

📦 安装

1. 在 VS Code 中打开扩展面板 (Ctrl+Shift+X 或 Cmd+Shift+X)
2. 搜索 "Delete Block"
3. 点击安装

🔧 使用方法

基本使用

1. 将光标放在要删除内容的代码块内
2. 按下快捷键 Shift+Backspace
3. 插件会自动识别并删除相应内容

示例

删除函数体内容

function example() {
  console.log('Hello');
  return true; // 光标放在这里
}
// 按下 Shift+Backspace 后：
function example() {}

删除对象内容（变成空对象）

const obj = {
  name: 'Alice',
  age: 25, // 光标放在这里
  city: 'Beijing',
};
// 按下 Shift+Backspace 后：
const obj = {};

删除数组内容（变成空数组）

const arr = [
  1,
  2,
  3,
  4,
  5,
  6, // 光标放在这里
  7,
  8,
  9,
];
// 按下 Shift+Backspace 后：
const arr = [];

删除字符串内容（变成空字符串）

const str = 'Hello World'; // 光标放在字符串内
// 按下 Shift+Backspace 后：
const str = '';

删除 if 语句块内容

if (condition) {
  doSomething(); // 光标放在这里
  doAnotherThing();
}
// 按下 Shift+Backspace 后：
if (condition) {
}

删除整个 if 语句（光标在 if 关键字上）

if (condition) {
  // 光标放在 if 上
  doSomething();
}
// 按下 Shift+Backspace 后，整个 if 语句被删除

删除类体内容

class MyClass {
  // 光标放在这里
  constructor() {
    this.value = 0;
  }

  method() {
    return this.value;
  }
}
// 按下 Shift+Backspace 后：
class MyClass {}

删除构造函数内容（保留函数体）

class MyClass {
  constructor() {
    // 光标放在这里
    this.value = 0;
  }

  method() {
    return this.value;
  }
}
// 按下 Shift+Backspace 后（删除构造函数体内的代码）：
class MyClass {
  constructor() {}

  method() {
    return this.value;
  }
}

删除 CSS 规则内容

.container {
  display: flex;
  justify-content: center; /* 光标放在这里 */
  align-items: center;
  padding: 20px;
}
/* 按下 Shift+Backspace 后： */
.container {
  display: flex;
  align-items: center;
  padding: 20px;
}

删除 CSS 属性（整行删除）

.container {
  display: flex;
  justify-content: center; /* 光标放在这行上 */
  align-items: center;
  padding: 20px;
}
/* 按下 Shift+Backspace 后（删除整个属性行）： */
.container {
  display: flex;
  align-items: center;
  padding: 20px;
}

删除 CSS 属性值（保留分号）

.container {
  display: flex;
  justify-content: center; /* 光标放在 center 值上 */
  align-items: center;
  padding: 20px;
}
/* 按下 Shift+Backspace 后（仅删除值部分）： */
.container {
  display: flex;
  justify-content: ;
  align-items: center;
  padding: 20px;
}

删除 CSS 媒体查询内容

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    display: none; /* 光标放在这个属性上 */
  }

  .main {
    margin-left: 0;
  }
}
/* 按下 Shift+Backspace 后（删除该属性行）： */
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
  }

  .main {
    margin-left: 0;
  }
}

/* 如果光标在媒体查询块的空白处（如 .sidebar { 后面）： */
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
  }
}
/* 按下 Shift+Backspace 后（清空整个sidebar块内容）： */
@media (max-width: 768px) {
  .sidebar {
  }
}

删除 Less 变量声明（整行删除）

@primary-color: #1890ff; /* 光标放在这行上 */
@border-radius: 4px;
/* 按下 Shift+Backspace 后（删除整个变量声明行）： */
@border-radius: 4px;

删除 Less Mixin 内容

.border-radius(@radius: 4px) {
  -webkit-border-radius: @radius; /* 光标放在这里 */
  -moz-border-radius: @radius;
  border-radius: @radius;
}
/* 按下 Shift+Backspace 后（删除 mixin 内容）： */
.border-radius(@radius: 4px) {
}

删除 SCSS 变量声明（整行删除）

$primary-color: #1890ff; // 光标放在这行上
$font-size: 14px;
/* 按下 Shift+Backspace 后（删除整个变量声明行）： */
$font-size: 14px;

删除 SCSS 混合内容

@mixin button-style {
  /* 光标放在这行上 */
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* 按下 Shift+Backspace 后： */
@mixin button-style {
}

删除 SCSS 循环内容

@for $i from 1 through 3 {
  // 光标放在这行上
  .item-#{$i} {
    width: 100px * $i;
    margin: 10px;
  }
}
/* 按下 Shift+Backspace 后： */
@for $i from 1 through 3 {
}

🎯 支持的语言

• JavaScript (.js)
• TypeScript (.ts)
• TypeScript React (.tsx)
• JSON (.json)
• CSS (.css) - 完整支持，包括嵌套规则、媒体查询、@规则等
• Less (.less) - 完整支持，包括变量、混合、嵌套等 Less 特性
• Sass/SCSS (.scss, .sass) - 完整支持，包括变量、混合、循环、条件等 Sass/SCSS 特性

注意: 目前支持 JavaScript、TypeScript、TSX、JSON、CSS、Less、SCSS 和 Sass 文件。后续版本将陆续支持 HTML、Vue 等文件类型。

⚙️ 快捷键

🛠️ 技术实现

• JavaScript/TypeScript: 使用 @babel/parser 解析代码为 AST
• CSS/Less/SCSS/Sass: 使用 PostCSS 解析样式代码为 AST
• 使用 @babel/traverse 遍历 JavaScript/TypeScript AST 节点
• 使用自定义 CSS 处理器遍历 CSS/SCSS/Less AST 节点
• 智能识别代码块类型
• 对不同类型采用不同的删除策略：
  • 有边界符号的类型（如 {}、[]、""）：删除内部内容，保留边界
  • CSS 属性值：仅删除值部分，保留属性名和冒号（保留分号）
  • CSS 属性行：删除整行（包括缩进）
  • 无边界符号的类型：删除整个节点

🔍 工作原理

JavaScript/TypeScript 文件

1. 获取当前编辑器的代码和光标位置
2. 使用 @babel/parser 将代码解析为 AST
3. 遍历 AST 找到包含光标位置的所有节点
4. 选择最小的（最内层的）节点
5. 根据节点类型确定删除范围：
   • StringLiteral、BlockStatement、ObjectExpression 等：删除内部内容（start+1 到 end-1）
   • 其他类型：删除整个节点
6. 执行删除操作

CSS/Less/SCSS/Sass 文件

1. 获取当前编辑器的代码和光标位置
2. 根据文件类型选择相应的 PostCSS 解析器：
   • CSS: 使用标准 PostCSS 解析器
   • Less: 使用 postcss-less 解析器
   • SCSS: 使用 postcss-scss 解析器
   • Sass: 使用 postcss-scss 解析器（支持缩进语法）
3. 将代码解析为 CSS AST
4. 遍历 AST 找到包含光标位置的所有节点：
   • 注释行（单行注释优先）
   • 声明属性（Declaration）
   • CSS 规则（Rule）
   • At 规则（AtRule）如 @media、@supports 等
5. 选择最小的节点进行删除：
   • 光标在属性值中：仅删除值部分，保留属性名和分号
   • 光标在属性行：删除整行（包括缩进）
   • 光标在规则内容中：删除规则块内容，保留选择器和花括号
   • 光标在嵌套规则上：删除整个嵌套规则块
6. 执行删除操作

📝 更新日志

查看 CHANGELOG.md 了解详细的更新记录。

🤝 贡献

欢迎提交 Issues 和 Pull Requests！

开发环境设置

1. 克隆仓库
2. 安装依赖:

   npm install
   # 或使用 pnpm
   pnpm install
   

3. 编译项目:

   npm run compile
   # 或
   pnpm run compile
   

4. 运行测试:

   npm test
   # 或
   pnpm test
   

5. 在调试模式下启动 VS Code: F5

📄 许可证

MIT License

享受高效的代码编辑体验！ 🎉