How to use Visual Studio Code to quickly create bookmarklets

Hello, I'm Mandai, the Wild Team member of the development team

This time, rather than showing you how to create a bookmarklet, I would like to give a wild introduction to the various convenient features of Visual Studio Code, including how to promote it within the company, by setting up a bookmarklet development environment

First, install Visual Studio Code

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

Because it's built with Electron, the package is large (because it comes with the Node.js and Chromium runtime environments), but it runs more smoothly than you'd expect.
And what's sure to be a big plus for anyone who's used Visual Studio is the refreshingly crisp
IntelliSense It's a distinctive feature that Eclipse doesn't have.
There's Atom on Github, which is a text editor with a similar structure that uses Electron, but for now I think VSCode is far less stressful.
It runs on Node.js, but the nice thing about it is that you don't have to go through the trouble of installing the Node.js runtime environment separately.

Setting up your development environment

Bookmarklets require writing a single JavaScript one-liner, which makes minifying them a pain.
Since I'm using a text editor made with Node.js, I'll automate this process with Gulp, which is a Node.js task runner.

It's good that you don't have to go through the trouble of installing the Node.js execution environment again

However, I ended up installing it... I immediately turned the table over

We will install Node.js, install npm, and then install Gulp-related modules via npm.
Since we created the environment on Windows this time, we can complete the process by installing the installer package from the official Node.js 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

Let's install a task runner called gulp via npm

npm install gulp -g

 

2. npm init

Run npm init to create package.json.
You will be prompted to enter the data to be included in package.json, but you can edit this later, so you can skip it by just pressing Enter.

mkdir testapp cd testapp npm init

 

3. Install gulp related stuff locally

Gulp needs to be installed in both the global and local environments, so install gulp in the directory where you ran npm init

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 will be creating a bookmarklet, we will need to install gulp-uglify, a gulp module that will minify your code, locally

npm install gulp-uglify --save-dev

Now we have the bare minimum necessary.
Next, we'll create a Gulp task before writing the JavaScript.
Almost there!

4. Load the project directory

You can work by treating the directory as a project, 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 created npm init.

5. Write the task

Let's write gulpfile.js.
It's probably best to place it directly under the directory you loaded earlier. Since
the tasks you do are generally the same, if you can simply copy and paste the tasks you use most often and adjust the directory hierarchy or file name, you can get to the point of writing code without losing your speed.
The tasks I used this time were 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')); });

I'll place the JS file directly under the project directory.
Normally, I'd place directories like src and js, but since I only created a bookmarklet this time, it looks like this. All I did
was minify it with gulp-uglify and create a file in a directory called bookmarklet, so that's the only task I prepared.
Depending on how you write the gulpfile, you can also combine multiple JS files with browserify and then minify them, so
development is easy with VSCode.

6. Running tasks from Visual Studio Code

It's very easy to run the task you created. Press Ctrl + P SPACE ). The Gulp tasks you just registered will be displayed.
If it's the same as the gulpfile.js posted earlier, you should see two tasks, watch and uglify.
You can run the task by selecting it here.

7. Monitor file changes with Gulp and automatically execute tasks

In normal Node.js development, you would launch Gulp from the console to run tasks, but with VSCode, you can launch tasks from within VSCode.
If you watch, you only need to launch the task once, which is very convenient.

8. Verify that file watching is working

If you write some appropriate (syntactically correct) JavaScript in hogehoge.js, save it, and the task runs, your development environment is complete.
If you don't want Gulp's watch to stop when there's a syntax error, you can install gulp-plumber, which will make it more resilient to errors, but
since VSCode handles error detection as you edit the code, I don't think it's necessary.

9. Write the code

Now we finally get to what we originally wanted to do, but it's hard to deny that it was a very long detour.
If you were able to write code that worked without any problems the first time, then the steps up to this point might have been very wasteful.
But if you're an ordinary programmer like me, who fumbles around with this and that to finish code, then what I just set up wouldn't be considered a detour at all.

Try using it more conveniently

VSCode also has a feature called extensions that extend its functionality in the form of plugins, but it's impossible to find them from the menu; there's a door that can only be opened by typing "ext" into the command palette. There are
n't many of them yet, so I think they'll wait until they've gained some traction before releasing them, but there are already extensions that make VSCode more convenient, so I'd like to introduce them again.

That's it.

If you want to consult a development professional

At Beyond, we combine our rich track record, technology and know-how in system development that we have cultivated to date with OSS technology and cloud technologies such as AWS to create contract development of web systems with reliable quality and excellent cost performance.

We also work on server-side/backend development and linkage development of our own APIs, using the technology and know-how of the construction and operation of web system/app infrastructure for large-scale, highly loaded games, apps, and digital content.

If you are having trouble with development projects, please visit the website below.

● Web system development
● Server-side development (API/DB)