库玛科技 @https://gitee.com/kumare/

Jump2Sheet

Jump2Sheet 是一个强大的 VS Code 插件，旨在帮助开发者快速在 HTML/模板文件与 CSS/SASS/LESS 定义之间进行跳转。它支持智能识别类名和 ID，提供便捷的定义预览和跳转功能，极大地提高了前端开发的效率。

✨ 核心功能

1. 智能定位与跳转

插件能够自动识别光标所在位置的单词（Class 或 ID），或者你选中的文本，并查找其对应的 CSS 定义。

• 自动识别：无需选中，直接将光标放在 class="container" 的 container 上，即可查找 .container 或 #container。
• 支持连字符：完美支持 my-class-name 这种包含连字符的 CSS 类名。

2. 两种搜索模式

插件提供了两种维度的搜索命令，满足不同场景的需求：

• 📄 当前文件搜索 (jumpDefinedPosistion_file)

  • 仅在当前打开的文件中查找对应的 CSS 定义。
  • 适用于单文件组件（如 Vue SFC）或 CSS 定义在同一文件中的情况。

• 🌍 全局搜索 (jumpDefinedPosistion_global)

  • 在整个工作区（Workspace）中查找对应的 CSS 定义。
  • 自动排除 node_modules、.git 等无关目录，搜索速度快。
  • 支持跨文件跳转，适用于分离的 CSS/SCSS 文件结构。

3. 交互式列表与实时预览

当找到多个匹配项时，插件会弹出一个交互式的 QuickPick 列表：

• 实时预览：在列表中上下移动光标时，编辑器会自动滚动到对应的代码位置，并使用黄色边框高亮显示，让你在跳转前就能确认目标。
• 跨文件预览：全局搜索模式下，预览功能甚至支持打开其他文件（以 Preview 模式），让你无需真正打开文件即可查看定义。
• 一键跳转：按下回车确认选择后，会自动跳转到目标位置并高亮显示。

4. 灵活的配置

支持用户自定义全局搜索时忽略的文件或目录，避免搜索到无关内容。

• 设置项: jump2sheet.ignorePatterns
• 默认忽略: **/node_modules/**, **/.git/**, **/dist/**, **/out/**, **/build/**

🚀 使用方法

1. 打开任意包含 CSS 类名引用的文件（如 HTML, Vue, JSX 等）。
2. 将光标放在想要查找的 Class 或 ID 名称上（或者选中它）。
3. 按 Ctrl+Shift+P (Mac: Cmd+Shift+P) 打开命令面板。
4. 输入并执行以下命令之一：
   • jump2sheet (file): 在当前文件中查找。
   • jump2sheet (global): 在全局范围内查找。
5. 在弹出的列表中选择目标定义，回车跳转。

⚙️ 配置示例

在 VS Code 的 settings.json 中，你可以自定义忽略规则：

{
  "jump2sheet.ignorePatterns": [
    "**/node_modules/**",
    "**/.git/**",
    "**/dist/**",
    "**/test/**",
    "**/*.min.css"
  ]
}

Enjoy coding with Jump2Sheet! 🎉