如何使用 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 运行时环境），但它的运行速度比你想象的要快得多。
对于用过 Visual Studio 的人来说，我认为IntelliSense的流畅和便捷
这是 Eclipse 所不具备的一项独特功能。GitHub
上还有 Atom，它是一款配置类似的文本编辑器，也是用 Electron 开发的，但就目前而言，我认为 VS Code 是迄今为止最轻松的选择。
它运行在 Node.js 上，但你无需重新安装 Node.js 运行时环境，这无疑是一大优点。

搭建开发环境

由于书签小程序需要编写一行 JavaScript 代码，因此代码压缩过程会变得繁琐。
因为我们使用的是基于 Node.js 的文本编辑器，而 gulp 是 Node.js 的任务运行器，所以我们将使用 gulp 来自动化这个过程。

很高兴您不必再费劲地重新安装 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 的目录下创建一个文件，这就是我准备的全部任务。
你也可以用 browserify 合并多个 JS 文件，然后再进行压缩，这取决于你如何编写 gulpfile，这样
你就可以在 VS Code 中很好地进行开发了。

6. 从 Visual Studio Code 运行任务

运行你创建的任务非常简单：Ctrl+P按空格键），你刚刚注册的 gulp 任务就会显示出来。
如果 gulpfile.js 文件与之前显示的相同，你应该会看到两个任务：watch 和 uglify。
选择其中一个即可运行该任务。

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

在典型的 Node.js 开发中，你会从控制台启动 gulp 来运行任务，但使用 VS Code，你可以直接从 VS Code 中启动任务。
如果你监听了任务，则只需启动一次，这大大简化了操作。

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

在 hogehoge.js 文件中编写一些（语法正确的）JavaScript 代码，保存后，如果任务运行成功，你的开发环境就搭建完成了。
如果你不喜欢 gulp 在出现语法错误时停止运行，可以安装 gulp-plumber，它能增强容错能力，但
VS Code 会在你编辑代码时检测错误，所以我觉得对我来说没必要。

9. 编写代码

现在我们终于开始做最初想做的事情了，但我不得不承认，我们走了一条非常迂回的路。
如果你能一次就写出完美运行的代码，那么之前的步骤可能会显得非常浪费时间。
然而，如果你像我一样，是个一边嘟囔着一边修改完善代码的普通程序员，那么我们刚才所做的就绝非迂回之举。

尝试更方便地使用它

VS Code 还提供了一项功能，允许用户通过名为“扩展”的插件来扩展其功能，但无法通过菜单找到它们；只有在命令面板中输入“ext”才能打开扩展菜单。
目前扩展数量不多，而且似乎他们计划在获得一定用户量后再发布，但已经有一些扩展让 VS Code 的使用更加便捷，因此我以后也想介绍一下这些扩展。

就这样。

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

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

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

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

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