自动完成反应 vscode - Javascript

介绍

在开发 Javascript 代码时，自动完成（Auto Completion）是提高开发效率的关键之一。Visual Studio Code（简称 VS Code）作为一款功能丰富的开源代码编辑器，自然支持自动完成功能。

本文将介绍如何使用 VS Code 自动完成反应 Javascript 代码。

步骤

1. 安装 VS Code

如果你还没有安装 VS Code，请前往官网下载并安装：https://code.visualstudio.com/

2. 打开 VS Code

打开 VS Code 后，需要安装一些插件才能实现 Javascript 的自动完成功能。

3. 安装插件

在 VS Code 中，按下 Ctrl+Shift+X （Windows/Linux）或 Cmd+Shift+X （macOS）打开插件商店。在搜索框中输入 JavaScript，会出现很多相关插件，我们选择安装以下两个插件：

• JavaScript (ES6) code snippets：提供一些常用的 ES6 代码片段，可以大大减轻编写代码的负担。安装完该插件后，可以在代码编辑器中输入一些关键字并按下 Tab 键来快速生成代码片段。

  vscode 插件商店搜索 JavaScript (ES6) code snippets 插件并安装
  

• JavaScript (Standard) By StandardJS：这是一份 JavaScript 的代码风格规范，安装这个插件可以帮助我们统一代码风格，并提供一些常用的代码片段。此外，该插件还支持自动纠错和代码格式化功能。

  vscode 插件商店搜索 JavaScript (Standard) By StandardJS 插件并安装
  

4. 配置 VS Code

安装完插件后，我们需要对 VS Code 进行一些配置，才能使代码自动完成功能更加完善。

(1) 开启自动保存功能

打开 VS Code 的设置（按下 Ctrl+, 或 Cmd+,），在搜索框中输入 files.autoSave，把值设为 afterDelay。这样，代码编辑器会在你停止输入后一段时间自动保存你的代码。

在 VS Code 设置中，将 files.autoSave 的值设为 afterDelay

(2) 开启自动补全功能

打开 VS Code 的设置，输入 editor.suggestOnTriggerCharacters，然后确保 "、'、/、.、:、<、> 以及 = 这些字符都能触发代码自动完成功能。

在 VS Code 设置中，将 editor.suggestOnTriggerCharacters 设置为 ["\"", "'", "/", ".", ":", "<", ">", "="]

(3) 关闭自动关闭标签功能

VS Code 自带一个闭合标签的功能。但是，这个功能比较麻烦，经常会让人误操作，导致代码出错。因此，我们建议关掉它。

打开 VS Code 的设置，输入 editor.autoClosingBrackets，将值设为 never 即可。

在 VS Code 设置中，将 editor.autoClosingBrackets 的值设置为 never

5. 尝试代码自动完成功能

完成上述配置后，我们可以尝试一下 VS Code 的代码自动完成功能。

打开一个 Javascript 文件，输入 console.，然后按下 Tab 键。此时，代码编辑器应该会自动补全 console. 后面的内容，如下所示：

console.assert(expression, message);
console.clear();
console.count(label);
console.debug(object [, object, ...]);
console.dir(object);
console.dirxml(node);
console.error(object [, object, ...]);
console.group(label);
console.groupCollapsed(label);
console.groupEnd();
console.info(object [, object, ...]);
console.log(object [, object, ...]);
console.profile([label]);
console.profileEnd();
console.table(data[, columns]);
console.time(label);
console.timeEnd(label);
console.timeStamp([label]);
console.trace(object [, object, ...]);
console.warn(object [, object, ...]);

以上就是 VS Code 的自动完成功能，当然了，如果你想进一步提升自己的开发效率，还需要了解一些其他的代码编辑技巧，比如代码折叠、多标签窗口、代码查找替换等等。