VSCode Smart Clicks 使用教程

VSCode Smart Clicks 使用教程

1、项目介绍

VSCode Smart Clicks 是一个为 Visual Studio Code 开发的智能选择插件。该插件通过双击代码中的特定元素，实现智能选择功能。它支持多种编程语言和标记语言，如 JavaScript、HTML、CSS 等，能够自动识别并选择代码块、括号对、HTML 标签等。

该项目由 Anthony Fu 开发，并在 GitHub 上开源，地址为：https://github.com/antfu/vscode-smart-clicks。

2、项目快速启动

安装

1. 打开 Visual Studio Code。
2. 进入扩展市场，搜索 Smart Clicks。
3. 点击安装。

配置

安装完成后，插件会自动启用默认配置。你也可以根据需要自定义配置。以下是一个示例配置：

{
  "smartClicks.rules": {
    "dash": false,
    "html-element": false,
    "js-block": true
  }
}

使用

在编辑器中双击代码中的特定元素，插件会自动选择相应的代码块。例如：

• 双击括号 () 内的内容：

  (foo, bar)
  

  选择结果：

  foo, bar
  

• 双击 HTML 标签 <div>：

  <div class="btn"></div>
  

  选择结果：

  <div class="btn"></div>
  

3、应用案例和最佳实践

案例1：快速选择函数参数

在编写 JavaScript 代码时，经常需要选择函数参数进行修改或查看。使用 Smart Clicks 插件，只需双击括号内的内容即可快速选择参数：

function add(a, b) {
  return a + b;
}

双击 (a, b)，选择结果为：

a, b

案例2：选择 HTML 标签

在 HTML 文件中，双击标签可以快速选择整个标签及其内容：

<div class="container">
  <p>Hello, World!</p>
</div>

双击 <div>，选择结果为：

<div class="container">
  <p>Hello, World!</p>
</div>

最佳实践

• 自定义规则：根据项目需求，自定义选择规则，提高开发效率。
• 快捷键配置：通过配置快捷键，快速触发智能选择功能。

4、典型生态项目

VSCodeVim

VSCodeVim 是一个在 Visual Studio Code 中模拟 Vim 编辑模式的插件。结合 Smart Clicks，可以在 Vim 模式下实现智能选择功能。

ESLint

ESLint 是一个用于 JavaScript 代码静态分析的工具。结合 Smart Clicks，可以快速选择代码块进行格式化和修复。

Prettier

Prettier 是一个代码格式化工具。使用 Smart Clicks 快速选择代码块后，可以一键格式化代码。

通过这些生态项目的结合使用，可以进一步提升开发效率和代码质量。