How to use Visual Studio Code to make 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,the official Visual Studio Code websitedownload the installer from
Since it's an editor developed by Microsoft, it's naturally usable on Windows, but because it's developed using Node.js's Electron, it's also usable on Mac/Linux.
Incidentally, the Electron website also features an icon for Visual Studio Code (hereinafter abbreviated as VSCode).

Since it's built with Electron, the package is rather large (because it includes the Node.js and Chromium runtime environments), but it runs more nimbly than you might expect.
And for anyone who's used Visual Studio, I thinkIntelliSensethe snappy and refreshing feel of
It's a distinctive feature that Eclipse lacks.
There's also Atom on GitHub, which is a text editor with a similar configuration and is also developed using Electron, but for now, I think VS Code is by far the less stressful option.
It runs on Node.js, but the fact that you don't have to go through the trouble of reinstalling the Node.js runtime environment is a big plus.

Setting up your development environment

Since bookmarklets require writing a single line of JavaScript, the minification process becomes tedious.
Because we're using a Node.js-based text editor, and gulp is the Node.js task runner, we'll automate this process using gulp.

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

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 all

1. Install gulp globally

Let's install a task runner called gulp via npm

npm install gulp -g

 

2. npm init

Start by running `npm init` and creating a `package.json` file.
You will be prompted to enter data to be included in `package.json`, but you can skip this by pressing Enter, as you can edit it later.

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 to package.json, so it is unnecessary if you do not plan to work in a different 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, before we start writing the JavaScript, let's create a gulp task.
Almost there!

4. Load the project directory

Since you can work with a directory as your project, press "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 the task

Let's quickly write a gulpfile.js.
It's probably best to place it directly under the directory we loaded earlier.
Since the tasks are mostly the same, if you copy and paste frequently used tasks and adjust the directory structure and filenames, you can get to the coding stage without losing your speed.
The tasks used this time are 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, you would place it in directories like src or js, but since this time I was only creating a bookmarklet, it looks like this. I
just need to minify it with gulp-uglify and create a file in a directory called bookmarklet, so this is all the task I prepared.
You can also combine multiple JS files with browserify and then minify them, depending on how you write the gulpfile, so
you can develop perfectly well in VS Code.

6. Running tasks from Visual Studio Code

Running the tasks you've created is very easy:Ctrl+PpressSPACE), and the gulp tasks you just registered will appear.
If it's the same gulpfile.js as the one shown earlier, you should see two tasks: watch and uglify.
Select one of them to run the task.

7. Monitor file changes with Gulp and automatically execute tasks

In typical Node.js development, you would launch gulp from the console to run tasks, but with VS Code, you can launch tasks directly from VS Code.
If you watch the task, you only need to launch it once, which makes things much easier.

8. Verify that file watching is working

Write some (syntax-correct) JavaScript in hogehoge.js, save it, and if the task runs, your development environment is complete.
If you don't like gulp's watch stopping when there's a syntax error, you can install gulp-plumber, which makes it more error-resistant, but
VS Code will detect errors as you edit the code, so I don't think it's really necessary in my case.

9. Write the code

Now we finally begin what we originally wanted to do, but I can't deny that we took a very roundabout route.
If you could write code that works perfectly on the first try, then the steps up to this point might seem very wasteful.
However, if you are an average programmer like me, who mumbles and tinkers while finishing up the code, then what we just set up is by no means a roundabout route.

Try using it more conveniently

VS Code also has a feature that allows you to extend its functionality in the form of plugins called extensions, but it's impossible to find them through the menus; there's a door that can only be opened by typing "ext" into the command palette. There are
n't many extensions yet, and it seems they're planning to release them once they've gained some traction, but there are already extensions that make VS Code more convenient, so I'd like to introduce those as well in the future.

That's all

If you want to consult with a development professional

At Beyond, we combine our extensive track record, technology, and know-how in system development with OSS technology and cloud technologies such as AWS to provide contracted development of web systems with reliable quality and excellent cost performance

We also handle server-side/back-end development and proprietary API collaboration development, making full use of our technology and know-how in building and operating web system/application infrastructure for large-scale, high-load games, applications, and digital content

If you have any problems with your development project, please visit the following website

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