Create-Easy is available in the VISUAL Studio extension store. Click create-Easy or search for visual Studio Code extensions to use it. This extension is mainly for creating files and folders. My design idea was to create vue files quickly and inject templates (Template, script, style) directly after creating them. Later, I referred to several VSCode extensions, such as create-file-Folder, and decided to create folders and files as the main direction. At the same time, it supports internal injection templates of various file formats, and can be differentiated from other extensions of the same type in function.

OK, a brief introduction to the body of the text.

Installed a.

Currently, Microsoft provides the scaffolding for developing extensions that simply need to perform:

npm install -g yo generator-code
Copy the code

Note that the scaffolding will automatically execute NPM install or YARN for you, but the speed is very slow. It is recommended to cancel the install and manually install CNPM install.

2. Start

Once installed, press F5 or open vscode debug mode and run into the extended host development environment, press CTRL +shift+p and type Hello World to see a pop-up window where scaffolding provides us with examples.

Next, we look at the code. The scaffolding provides us with two core code files: extension.js and package.json. The most important configuration is activationEvents and contributes;

ActivationEvents are used to control Activation events (officially called Activation Events). In this example, the control condition is onCommand, i.e. ‘CTRL + Shift + P’. In addition to onCommand, events such as onLanguage, onDebug, and onUri are also provided.

Contributes the configuration that extends the VScode method. In this example, commands are registered, that is, a command is configured, my-test. helloWorld, which is also configured in activationEvents, Title is the name the command uses in vscode’s formal environment, which is the name the user uses. My-test. helloWorld is the name of the command when the code is written. In addition to commands, vscode also supports registering multiple configurations like menus, keybindings, languages, etc. More configurations can be viewed by clicking on Contributes Point.

Next, let’s look at the extensions.js file.

function activate(context) { // Use the console to output diagnostic information (console.log) and errors (console.error) // This line of code will only be executed once when your extension is activated console.log('Congratulations, your extension "my-test" is now active! '); // The command has been defined in the package.json file // Now provide the implementation of the command with registerCommand // The commandId parameter must match the command field in package.json let disposable = vscode.commands.registerCommand('my-test.helloWorld', function () { // The code you place here will be executed every time your command is executed // Display a message box to the user vscode.window.showInformationMessage('Hello World from my-test! '); }); context.subscriptions.push(disposable); }Copy the code

File only the core code, vscode.com mands. RegisterCommand registered before we package. The json configured in command, the callback function is the core of the trigger this command execution logic, Example use vscode. Window. ShowInformationMessage calls the editor window.

Three. Start one

This time we implement a simple function, using the command to create an HTML file, and let it internally generate the required HTML code.

1. Change the command name

In package.json, we modify the command title of ‘contributes by changing Hello World to create HTML so that we can execute our code using the Create HTML command in CTRL + Shift + P.

2. In the extension. Introduce the fs and js path, delete function vscode. Window. ShowInformationMessage code, and then create HTML content by default

function activate(context) { let disposable = vscode.commands.registerCommand('my-test.helloWorld', function () { const content = `<! DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html> ` }); context.subscriptions.push(disposable); }Copy the code

3. Create a file

As a final step, just write to the file using fs:

function activate(context) { let disposable = vscode.commands.registerCommand('my-test.helloWorld', function () { const content = `<! DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html> ` const uri = vscode.workspace.workspaceFolders[0].uri.fsPath console.log(uri) fs.writeFile(path.join(uri, 'index.html'), content, (err) = > {the if (err) vscode. Window. The showErrorMessage (' create failure) vscode. Window. ShowInformationMessage (' creation ')})}); context.subscriptions.push(disposable); }Copy the code

Vscode. Workspace. WorkspaceFolders [0]. Uri. FsPath is used to obtain the first folder of the absolute path of the current working area, if you have multiple projects, a workspace can be controlled through workspaceFolders array to;

Released four.

First install vsCE, NPM install -g VSCE, then go to Azure to create an account, after successful creation as shown in the following figure:

Then click on User Settings and click on Personal Access Token to create the token

Remember to save the token after successfully creating it;

Next, execute VSCE Publisher to create the publisher, where you need to enter the token.

Then modify your readme file and execute VSCE publish to publish successfully.

This article is also published on shreddedbutter.com