如果你经常使用 VS Code 或者是 Sublime Text 等编辑器，相信你也一定经常使用鼠标右键复制、粘贴的操作。但是当你需要多个文件来回跳转，这往往是一个十分麻烦的操作。于是一款 npm 包：hyper-alt-click 应运而生，它可以让你通过 Alt + 鼠标左键来跳转到定义处，以及 Ctrl + Alt + 鼠标左键进行重构。本文将详细介绍 hyper-alt-click 的使用教程。
安装与配置
首先，你需要在你的项目中安装 hyper-alt-click：
npm install --save-dev hyper-alt-click
然后，在你的 vscode 或者是 sublime 中，打开设置选项，进行 hyper-alt-click 的配置。
VS Code 配置
在 VS Code 中按下 Ctrl + Shift + P 打开命令面板，输入 Open Settings (JSON)，在 settings.json 文件中添加下面两项：
"editor.mouseWheelZoom": false,
"editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",这里的 editor.wordSeparators 中包含了 符号，这样的话，hyper-alt-click 就可以支持在鼠标左键按下的同时按住 \ 进行选中复制或者是其他操作了。
然后添加下面两项：
"mouseWordNavigation.enabled": false, "window.zoomLevel": 0,
这两个选项分别是关闭鼠标的单词导航以及放大功能的显示，这样 hyper-alt-click 的 Alt + 鼠标左键具体功能才能正常使用。
最后，在 keybindings.json 中添加下述配置：
-- -------------------- ---- -------
-
------ --------------
---------- -------------------------------
------- -----------------
--
-
------ -------------------
---------- -----------------------
------- ---------------- -- ----------------------- -- ----------------
-Sublime 配置
Sublime Text 相对来说更简单，你只需要把下述代码复制进 Preferences -> Key Binding 菜单里即可：
[{
"button": "button1", "modifiers": ["alt"],
"command": "hyper_alt_click_go_to_definition"
}, {
"button": "button1", "modifiers": ["alt", "ctrl"],
"command": "hyper_alt_click_rename"
}]然后按下 Ctrl + S 保存即可。
使用
现在，当你在编辑器中输入一个变量名，想要直接到其定义处，只需要按住 Alt 后单击鼠标左键即可。当你想重构它的时候，只需按住 Ctrl + Alt 并单击鼠标左键即可。
当你使用 hyper-alt-click 后，会移动鼠标跳转到定义处，这时候如果想要回到原来的位置，直接按下 Alt + - 即可。
总结
hyper-alt-click 的功能虽然可以说是比较简单，但是它给程序员的编写带来了很多便利，尤其是重构时的导航和定位，可以让程序员的工作更加高效。在这里，你了解了 hyper-alt-click 的安装、配置以及使用，相信你会觉得这个 npm 包十分有用。
示例代码：
const message = 'Hello, World!' console.log(message)
在编辑器中按住 Alt 并单击 console.log 就可以跳转到其定义处了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005683581e8991b448e44b6