Create a Visual Studio Code minimum configuration extension in JavaScript

Category：JavaScript

Pub.date：2019-03-06

Create your own extensions in Visual Studio Code using JavaScript. 
It's not for public use, but for my own local use, so I'll skip the unnecessary description and just aim to make it work.

## Install Visual Studio Code

Naturally, Visual Studio Code is required. Search for it and install it.

## Installing Node.js

Install Node.js from here. 
<a href="https://nodejs.org/ja/" target="_blank">https://nodejs.org/ja/</a>

## Creating a template for an extension with VS Code Generator

You can generate a template by following the instructions here, but we will not use it this time. 
<a href="https://code.visualstudio.com/api/get-started/your-first-extension" target="_blank">https://code.visualstudio.com/api/get-started/your-first-extension</a> 
```
npm install -g yo generator-code
yo code
```
You can also download the HelloWorld template. 
It is a good idea to check what the template looks like.

We will not be using these templates this time.

## Create a personal access token in Azure DevOps

<a href="https://azure.microsoft.com/ja-jp/services/devops/" target="_blank">https://azure.microsoft.com/ja-jp/services/devops/</a> 
(Sorry, no further explanation.)

## Visual Studio Code Extension Manager

Install vsce to generate the extension's VSIX file.
```
npm install -g vsce
```

## Create a publisher in vsce
For example, let's assume aosystem
```
vsce create-publisher aosystem
```

Verify that it has been created.
```
vsce ls-publishers
```

## Describe the extension

This time, below the minimum required, I created two minimal files that work anyway. The ability to lowercase letters in editor selections. 
Create a folder and store the following two files in it. 
In this case, I created a folder called toLowerCase and placed it there.

package.json
```json
{
	"publisher": "aosystem",
	"name": "tolowercase",
	"displayName": "Convert lowercase letters",
	"description": "Convert selected letters to lowercase.",
	"version": "0.0.1",
	"engines": {
		"vscode": "^1.31.0"
	},
	"categories": [
		"Other"
	],
	"activationEvents": [
		"*"
	],
	"main": "./extension.js",
	"contributes": {
		"commands": [
			{
				"command": "extension.toLowerCase",
				"title": "lower-case letters"
			}
		],
		"menus": {
			"editor/context": [{
				"command": "extension.toLowerCase",
				"group": "1_modification@500"
			}]
		},
		"keybindings": [
			{
				"command": "extension.toLowerCase",
				"key": "ctrl+shift+l"
			}
		]
	}
}
```
extension.js
```javascript
const vscode = require('vscode');
function activate(context) {
	let disposable = vscode.commands.registerCommand('extension.toLowerCase', function () {
		let editor = vscode.window.activeTextEditor;	//editor
		let text = editor.document.getText(editor.selection);	//Text in selection
		editor.edit((builder)=>{
			builder.replace(editor.selection, text.toLowerCase());
		});
	});
	context.subscriptions.push(disposable);
}
exports.activate = activate;
function deactivate() {}
module.exports = {
	activate,
	deactivate
}
```

## Create a package for the extension

Make the current folder the current directory and run the following.
```
vsce package
```

The vsce publish command is public, so we will not run it. This time, we will only create the package (VSIX file).

You will get a WARNING message because you don't have the necessary description or files, but proceed with yes.
```
D:\path\to\toLowerCase>vsce package
 WARNING  A 'repository' field is missing from the 'package.json' manifest file.
Do you want to continue? [y/N] y
 DONE  Packaged: D:\path\to\toLowerCase\tolowercase-0.0.1.vsix (4 files, 1.95KB)
```

The vsix file was completed successfully.

## Loading Extensions into Visual Studio Code

From the Extensions menu, select "Install from VSIX".

## That's it.

Even the template for an extension or the sample HelloWorld with the minimum configuration contains a lot of files, so it is not easy to create an extension and you may hesitate to do so. 
This time, we proposed a file structure below the minimum necessary so that disposable extensions can be created without hesitation.

Email (optional)
Contents