uni-app HBuilderX 重构/重命名变量/选择相同语法词/refactor/查找引用/find usage

本功能自HBuilderX 1.7.2起支持。在1.9.7中增加到了编辑器的右键菜单中。

背景

大型IDE，一般会提供重构功能，就是把一个变量/方法，重命名，这个变量的定义处和引用处都自动修改。

强类型语言都有这个功能，由于js的弱类型，这个判断很难精准。

不过HBuilderX提供了另一种安全且方便的方式，即选择相同语法词。

操作方法

选中一个变量（或不选，只是光标放在那里），点菜单-选择-选择相同语法词或右键菜单，win快捷键：ctrl+shift+e；mac快捷键：command+shift+e。

选择相同语法词

比如如下代码，光标放到变量a旁边，按下选择相同语法词，效果如下：

选择相同语法词效果

可以看到，文档中其他的a虽然套了外框，代表有相同字符，但只有变量a的定义处和引用处，才被真正选中。

同时在状态栏可以看到，有2个选区被选中。

然后利用多光标特性，你可以自由修改a。

当然除了js变量/方法，你也可以对html的tagname、css的class执行同样的操作。

比如同时选中首尾标签：

选中首尾标签

比如同时选中css和html相同的id或class名称：

选中css和html相同的id或class名称

选择相同语法词还有一个特性，如果你选中的是一个括号，它会帮你选中另一对括号。方便同时删除一对括号。

选中括号

查看引用

很多时候，我们并不是真的需要重构变量名称，只是需要查看某个变量在哪里被引用，并且在这些地方互相跳转。

方便的操作是先选中相同语法词，然后按Ctrl+F2，给这些词全部打上书签。

然后按F2可以在书签之间跳转。

不需要这些书签时，ctrl+shift+f2是清空所有书签。

局限性和使用注意

由于js的弱类型，有些复杂的嵌套写法无法识别，比如eval这类方法里通过字符串表示的变量
css的选择器只能选中原始定义处，伪类、合并选择器的css命名，无法选中
选择相同语法词只能处理当前文档，对于跨文档的引用不处理
此功能依赖语法提示插件，有些语法比如ts需要安装相应插件才可提示。对于还不能进行语法提示的语言无法使用此功能
对于非常大的文档，分析时可能会有点耗时，需要耐心等待。但肯定比人工选择相同语法词快:)

更多关于uni-app HBuilderX 重构/重命名变量/选择相同语法词/refactor/查找引用/find usage的实战教程也可以访问 https://www.itying.com/category-93-b0.html

yuanlaile 1楼

更多关于uni-app HBuilderX 重构/重命名变量/选择相同语法词/refactor/查找引用/find usage的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在uni-app开发中，使用HBuilderX进行代码重构（refactor）是一项非常常见的需求，包括重命名变量、选择相同语法词、查找引用（find usage）等功能。以下是如何在HBuilderX中高效实现这些操作的代码案例和相关说明。

重命名变量

HBuilderX提供了内置的重命名变量功能，这通常可以通过快捷键或者右键菜单来调用。以下是一个示例代码，以及如何在HBuilderX中重命名变量的步骤：

// 原始代码
let oldVariableName = "Hello, World!";
console.log(oldVariableName);

// 重命名变量
// 1. 选中变量名 `oldVariableName`
// 2. 使用快捷键 F2（Windows/Linux）或 Cmd+R（Mac）
// 3. 输入新变量名，例如 `newVariableName`
// 4. HBuilderX将自动更新所有引用
let newVariableName = "Hello, World!";
console.log(newVariableName);

选择相同语法词

HBuilderX支持选择相同语法词的功能，这通常用于快速选中并编辑代码中所有相同的标识符。

步骤：
1. 双击选中一个变量或函数名。
2. 使用快捷键 Ctrl+D（Windows/Linux）或 Cmd+D（Mac）来选择下一个相同的语法词。
3. 重复按快捷键可以连续选择所有相同的语法词。

查找引用

查找引用功能可以帮助你快速定位变量、函数等在代码中的所有使用位置。

步骤：
1. 右键点击要查找引用的变量或函数名。
2. 选择“查找引用”（Find Usages）或使用快捷键 Alt+F7（Windows/Linux）或 Option+F7（Mac）。
3. HBuilderX将在“引用”面板中列出所有引用位置，点击可以导航到相应代码。

示例代码与查找引用结合

// 示例函数
function greet(name) {
    console.log("Hello, " + name + "!");
}

// 调用函数
greet("Alice");
greet("Bob");

查找引用：
1. 右键点击greet函数名。
2. 选择“查找引用”。
3. 在“引用”面板中，你将看到greet("Alice")和greet("Bob")两处引用。

通过以上步骤和代码示例，你可以在HBuilderX中高效地进行uni-app项目的代码重构和引用管理。这些功能大大提高了代码维护的效率和准确性。