How to use Visual Studio Code to quickly create bookmarklets

Hello. I'm Mandai, in charge of Wild on the development team.

The most talked about text editor these days is Visual Studio Code, but it seems that Sublime Text and Sakura Editor are still popular within the company.
This time, I would like to introduce various useful features of Visual Studio Code in a wild way, not just how to create a bookmarklet, but also how to "introduce" it to the company, while setting up a bookmarklet development environment.
The version I'm running is 0.10.6, and it seems that the frequency of updates is relatively high, so it's possible that one day the content written here will suddenly turn into a piece of paper.
I would appreciate it if you could prepare multiple sources of information to avoid being fooled.

For now, install Visual Studio Code

To install, download the installer from
the official Visual Studio Code website Since it is an editor developed by Microsoft, it can of course be used on Windows, but since it was developed using Node.js Electron, it can also be used on Mac / Linux.
By the way, the Electron website also has an icon for Visual Studio Code (hereinafter abbreviated as VSCode).

Since it is made with Electron, the package is large (because it includes the Node.js and Chromium execution environments), but it is more agile than I expected.
And if you've used Visual Studio, you'll probably appreciate the IntelliSense moving quickly!
It's a unique feature that Eclipse doesn't have.
There is Atom on Github, which is developing Electron as a text editor with a similar structure, but so far I think VSCode is definitely less stressful.
It runs on Node.js, but it's nice that you don't have to install a Node.js execution environment again.

Prepare the development environment

Bookmarklets require a single JavaScript one-liner to be written, so it becomes difficult to minify them.
Since I'm using a Node.js text editor, the Node.js task runner is gulp, so I decided to automate this with gulp.

I like that there is no need to install the Node.js execution environment again.

However, I ended up installing it... Immediately return the chabudai.

Install Node.js, install npm, and then install gulp-related modules via npm.
This time, we created an environment on Windows, so all you have to do is install the installer package from the Node.js official page

node --version v5.3.0

npm will also be installed at the same time, so check that as well.

npm --version 3.3.12

That's it.

1. Install gulp globally

I will install a task runner called gulp via npm.

npm install gulp -g

 

2. npm init

npm init and create package.json.
You will be asked to enter the data to be written in package.json, but you can edit it later, so there is no problem if you just press Enter.

mkdir testapp cd testapp npm init

 

3. Install gulp related items locally

Gulp needs to be installed in the global environment and local environment, so install gulp in the npm init directory.

npm install gulp --save-dev # The --save-dev option is for writing in package.json, so it is not necessary if you will not be working in another environment.

Since we are creating a bookmarklet, we will locally install gulp-uglify, a gulp module that will minify it.

npm install gulp-uglify --save-dev

Now you have the minimum necessary items.
Next, before writing the JavaScript, create a gulp task.
Just one more breath!

4. Load project directory

You can work with directories as if they were projects, so Ctrl + Shift + E to display the sidebar.
When you press the blue Open Folder button, you will be asked which directory you want to work in, so select the directory where you ran npm init.

5. Write a task

I will write gulpfile.js easily.
Is it best to install it directly under the directory you just loaded?
Most of the things you do are always the same, so by copying and pasting frequently used tasks and adjusting the directory hierarchy and file names, you can implement them so you can get to the point where you can write code without losing your speed. Masu.
The task I used this time is as follows.

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')); });

The JS file will be placed directly under the project directory.
Normally, I would have placed directories like src and js, but this time I was only creating a bookmarklet, so it looks like this.
All you have to do is minify it with gulp-uglify and create a file in a directory called bookmarklet, so this is the only task you have prepared.
You can do things like minify after combining multiple JS files with browserify, which depends on how you write the gulpfile, so
you can develop with VSCode.

6. Execute tasks from Visual Studio Code

Running the created task is very easy, press Ctrl + P SPACE ) and you will see the gulp task you just registered.
If it is the same gulpfile.js posted earlier, you will see two tasks: watch and uglify.
If you select it here, you can execute the task.

7. Monitor file changes and auto-run tasks from gulp

In normal Node.js development, you start gulp from the console and run tasks, but with VSCode, you can start tasks from VSCode.
If you watch it, the task will only start once, making it very convenient.

8. Check if file monitoring is working properly

If you write some appropriate (syntactically correct) JavaScript in hogehoge.js, save it, and the task is executed, the development environment is complete.
If you don't like gulp's watch to stop when there is a syntax error, you can install gulp-plumber to make it more resilient to errors, but
VSCode detects errors while editing the code one by one, so in my case I don't think it's really necessary.

9. Write the code

This is where I finally started doing what I originally wanted to do, but I can't help but feel like I took a very long detour.
If you can write code that works without problems in the first try, the steps you have taken so far may have been extremely wasteful.
However, if you are like me, an ordinary programmer who fidgets with the code as he finishes the code, then what you just set up is not a long shot.

Try using it more conveniently

VSCode also has the ability to extend its functionality in the form of plug-ins called extensions, but it is impossible to find them from the menu, and only those who type "ext" in the command palette are allowed to open them. A door exists.
They don't have a lot of them yet, and I think they'll release them once they're popular, but there are extensions that make VSCode useful, so I'd like to introduce them to you.

That's it.