如何使用 Visual Studio Code 创建书签小程序

大家好，我是开发团队野生队的成员 Mandai。

这次，我不打算教大家如何创建书签小程序，而是想对 Visual Studio Code 的各种便捷功能进行一番介绍，包括如何通过搭建书签小程序开发环境在公司内部推广它。

首先，安装 Visual Studio Code。

要安装，Visual Studio Code 官方网站下载安装程序
由于它是微软开发的编辑器，因此当然可以在 Windows 系统上使用；但由于它是使用 Node.js Electron 开发的，因此也可以在 Mac/Linux 系统上使用。
顺便一提，Electron 网站上也有一个 Visual Studio Code（以下简称 VSCode）的图标。

由于它基于 Electron 构建，所以软件包体积较大（因为它包含了 Node.js 和 Chromium 运行时环境），但运行起来比你想象的要流畅得多。
令人耳目一新的
IntelliSense绝对是一大亮点这是 Eclipse 所不具备的独特功能。GitHub
上还有一款名为 Atom 的文本编辑器，它的结构与 VSCode 类似，也使用了 Electron，但就目前而言，我认为 VSCode 的使用体验要轻松得多。
它基于 Node.js 运行，但它的优点在于你无需单独安装 Node.js 运行时环境。

搭建开发环境

书签小程序只需要编写一行 JavaScript 代码，这使得压缩它们变得很麻烦。
由于我使用的是基于 Node.js 的文本编辑器，我将使用 Gulp（一个 Node.js 任务运行器）来自动化这个过程。

很高兴您不必再费劲地重新安装 Node.js 执行环境了。

然而，我最终还是把它安装好了……我立刻把桌子翻了过来。

我们将安装Node.js，安装npm，然后通过npm安装Gulp相关的模块。
由于这次我们在Windows上创建了环境，Node.js官方网站安装安装包来完成整个过程

node --version v5.3.0

同时还会安装 npm，所以也请检查一下。

npm --version 3.3.12

就这样。

1. 全局安装 gulp

让我们通过 npm 安装一个名为 gulp 的任务运行器。

npm install gulp -g

 

2. npm 初始化

运行 npm init 创建 package.json 文件。
系统会提示您输入要包含在 package.json 中的数据，但您可以稍后编辑此文件，因此只需按 Enter 键即可跳过此步骤。

mkdir testapp cd testapp npm init

 

3. 在本地安装 Gulp 相关组件

Gulp 需要安装在全局环境和本地环境中，因此请在运行 npm init 的目录中安装 gulp。

npm install gulp --save-dev # --save-dev 选项用于写入 package.json，因此如果您不打算在不同的环境中工作，则没有必要。

由于我们将创建一个书签小程序，因此我们需要在本地安装 gulp-uglify，这是一个 gulp 模块，它可以压缩您的代码。

npm install gulp-uglify --save-dev

现在我们已经具备了最基本的条件。
接下来，在编写 JavaScript 代码之前，我们将创建一个 Gulp 任务。
快完成了！

4. 加载项目目录

您可以将目录视为一个项目进行操作，因此Ctrl + Shift + E显示侧边栏。
点击蓝色的“打开文件夹”按钮后，系统会询问您要在哪个目录中工作，请选择您创建 `npm init` 的目录。

5. 写出任务

我们来编写 gulpfile.js 文件。
最好将其直接放在之前加载的目录下。由于
您执行的任务通常相同，如果您可以简单地复制粘贴最常用的任务，并调整目录结构或文件名，就可以快速开始编写代码，而不会降低速度。
我这次使用的任务如下：

var gulp = require('gulp'); var uglify = require('gulp-uglify'); gulp.task('watch', function(){ gulp.watch(['hogehooge.js'], ['uglify']); }); gulp.task('uglify', function(){ gulp.src('hogehooge.js') .pipe(uglify()) .pipe(gulp.dest('./bookmarklet')); });

我会把 JS 文件直接放在项目目录下。
通常我会创建类似 src 和 js 这样的目录，但这次我只创建了一个书签小程序，所以目录结构是这样的。我所做的只是
用 gulp-uglify 压缩了文件，然后在名为 bookmarklet 的目录下创建了一个文件，这就是我准备的全部工作。
根据你编写 gulpfile 的方式，你还可以使用 browserify 合并多个 JS 文件，然后再进行压缩，这样
在 VSCode 中开发就变得很容易了。

6. 从 Visual Studio Code 运行任务

运行您创建的任务非常简单。按Ctrl + P 空格键）。您刚刚注册的 Gulp 任务将会显示出来。
如果它与之前发布的 gulpfile.js 文件相同，您应该会看到两个任务：watch 和 uglify。
您可以在这里选择任务来运行它。

7. 使用 Gulp 监控文件更改并自动执行任务

在传统的 Node.js 开发中，你需要从控制台启动 Gulp 来运行任务，但使用 VSCode，你可以直接在 VSCode 内部启动任务。
你会发现，你只需要启动一次任务，这非常方便。

8. 验证文件监视功能是否正常工作

如果你在 hogehoge.js 文件中编写一些合适的（语法正确的）JavaScript 代码，保存并运行任务，那么你的开发环境就搭建完成了。
如果你不希望 Gulp 在出现语法错误时停止运行，你可以安装 gulp-plumber，它能增强 Gulp 的错误容错能力。但
由于 VSCode 会在你编辑代码时自动检测错误，我认为没有必要安装 gulp-plumber。

9. 编写代码

现在我们终于要开始做最初想做的事情了，但不得不承认，这确实是一段漫长的绕路。
如果你第一次就能写出毫无问题的代码，那么之前的步骤可能就显得非常浪费时间了。
但如果你像我一样，是个普通的程序员，需要摸索着才能完成代码，那么我刚才所做的这一切根本算不上绕路。

尝试更方便地使用它

VSCode 还有一个名为“扩展”的功能，它以插件的形式扩展 VSCode 的功能，但你无法从菜单中找到它们；只有在命令面板中输入“ext”才能打开这个选项。
目前扩展数量还不多，所以我认为他们会等到这些扩展获得一定用户量后再发布。不过，已经有一些扩展让 VSCode 的使用更加便捷，所以我想再次介绍一下它们。

就这样。

如果您想咨询开发专业人士

在 Beyond，我们将我们在系统开发方面的丰富经验、技术和专业知识与开源软件技术和云技术（如 AWS）相结合，以可靠的质量和卓越的性价比提供网络系统的合同开发服务。

我们还负责服务器端/后端开发和专有 API 协作开发，充分利用我们的技术和专业知识，为大规模、高负载的游戏、应用程序和数字内容构建和运营 Web 系统/应用程序基础设施。

如果您在开发项目方面遇到任何问题，请访问以下网站。

● Web系统开发
● 服务器端开发（API/数据库）