如何使用Visual Studio Code快速创建书签

你好。我是Mandai，负责Wild 开发团队。

如今最受关注的文本编辑器是 Visual Studio Code，但似乎 Sublime Text 和 Sakura Editor 在公司内部仍然很受欢迎。
这次，我想狂野地介绍一下Visual Studio Code的各种有用的功能，不仅仅是如何创建一个小书签，还有如何将它“介绍”给公司，同时搭建一个小书签开发环境。
我运行的版本是0.10.6，看起来更新频率比较高，所以有可能有一天这里写的内容会突然变成一张纸。
如果您能准备多个信息来源以避免被愚弄，我将不胜感激。

现在，安装 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 作为一个类似结构的文本编辑器，但到目前为止我认为 VSCode 的压力肯定要小一些。
它在 Node.js 上运行，但很高兴您不必再次安装 Node.js 执行环境。

准备开发环境

小书签需要编写单个 JavaScript 行，因此很难缩小它们。
由于我使用的是 Node.js 文本编辑器，Node.js 任务运行程序是 gulp，因此我决定使用 gulp 来自动化此操作。

我喜欢的是不需要再次安装 Node.js 执行环境。

然而我最终还是安装了它......立即归还短腿。

安装Node.js，安装npm，然后通过npm安装gulp相关模块。
这次我们在Windows上创建了环境，Node.js官方页面安装安装包即可

节点--版本 v5.3.0

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

npm --版本 3.3.12

就是这样。

1.全局安装gulp

我将通过 npm 安装一个名为 gulp 的任务运行程序。

npm 安装 gulp -g

 

2. npm 初始化

npm init 并创建 package.json。
会要求你输入package.json中要写入的数据，不过你可以稍后编辑，所以直接回车就没有问题了。

mkdir testapp cd testapp npm init

 

3.本地安装gulp相关项

Gulp需要安装在全局环境和本地环境中，所以将gulp安装在npm init目录下。

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

由于我们正在创建一个书签，因此我们将在本地安装 gulp-uglify，这是一个可以缩小书签的 gulp 模块。

npm 安装 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('hogehoge.js') .pipe(uglify()) .pipe(gulp.dest('./bookmarklet')); });

JS文件将直接放在项目目录下。
通常，我会放置 src 和 js 这样的目录，但这次我只是创建一个书签，所以它看起来像这样。
您所要做的就是使用 gulp-uglify 缩小它并在名为 bookmarklet 的目录中创建一个文件，因此这是您准备的唯一任务。
用browserify合并多个JS文件后可以做minify之类的事情，这取决于你怎么写gulpfile，这样
你就可以用VSCode开发了。

6. 从 Visual Studio Code 执行任务

运行创建的任务非常简单，按Ctrl + P 空格键），您将看到刚刚注册的 gulp 任务。
如果与之前发布的 gulpfile.js 相同，您将看到两个任务：watch 和 uglify。
如果您在此处选择它，则可以执行该任务。

7. 从 gulp 监控文件更改和自动运行任务

在正常的 Node.js 开发中，您从控制台启动 gulp 并运行任务，但使用 VSCode，您可以从 VSCode 启动任务。
如果你看的话，任务只会开始一次，非常方便。

8、检查文件监控是否正常

如果你在hogehoge.js中编写了一些适当的（语法正确的）JavaScript，保存它，并且执行任务，开发环境就完成了。
如果你不喜欢 gulp 的 watch 在出现语法错误时停止，你可以安装 gulp-plumber 让它对错误更有弹性，但是
VSCode 在逐一编辑代码时会检测到错误，所以在我的例子中我不这样做我认为这真的没有必要。

9. 编写代码

到这里我终于开始做我本来想做的事情了，但我不禁感觉自己走了很长的弯路。
如果您可以编写第一次尝试就可以正常工作的代码，那么您迄今为止所采取的步骤可能是极其浪费的。
然而，如果你像我一样，一个普通的程序员，一边写完代码一边烦躁地摆弄着代码，那么你刚刚设置的就不是什么大事了。

尝试使用更方便

VSCode 还具有以称为扩展的插件形式扩展其功能的能力，但无法从菜单中找到它们，并且只有那些在命令面板中键入“ext”的人才允许打开它们的一扇门。存在。
他们还没有很多，我想一旦流行他们就会发布它们，但是有一些扩展使 VSCode 变得有用，所以我想向您介绍它们。

就是这样。