Share code blocks through NPM package, quickly write code block solutions

This is the 19th day of my participation in the Genwen Challenge

preface

I’ve recently seen a lot of guys update the Vs Code set blocks tutorial. The simple summary is to write a code-snippets file according to the rules:

• Project level: put the files in the. Vsode directory
• Global: Preferences -> User fragments -> Global code blocks

Some of the problems

I find this solution to be simple enough for individuals, but when individuals need to write a lot of snippets, it’s hard to write code-Snippets configuration files

Of course, there are some great things to do online snippet configuration generation sites to solve the tedious task of writing configuration files, but also copy and paste.

Is there a way to load custom code blocks without writing code-snippets configuration files? Yes, of course. We’ll talk about that later

But there is another problem, if you want to share your snippets with other colleagues or friends, there are some options:

• Copy the code-snippets file
• Write snippet plug-ins and send them to the plug-in marketplace
• .

It can be seen that these conventional schemes are a little complicated and not easy to share and spread

Share Snippets

About three months ago I also wrote a brief article about the background of this plug-in: VsCode plug-in to help you easily write and share snippets | project rehash

Basically, I’ll do the plug-in work, and you’ll write the simple code block configuration file

Allows you to share configuration files of code blocks to developers around the world in the form of NPM packages

But maybe because the reading volume is not high, there are not many friends downloading experience at present

Introduction to the

Support for sharing your code blocks via NPM

Configuration files that support reading code blocks from node_modules and registering them in the editor

In addition to the support for loading official code-snippets configuration files, a simpler.snippets. Json file configuration scheme is defined to simplify writing

features

• Simplified configuration, allowing you to specify files directly as code blocks
• Custom code blocks for HTML tags, Vue/React components, support very complete property hints

use

Install plug-ins first, of course

Tips: After writing a new code block, you need to manually run the SP Refresh command to take effect immediately

Here is a demo of writing a configuration file. The plug-in provides a code block that quickly generates the contents of a configuration file:

A configuration file, you can write multiple code blocks

Complete configuration file documentation

Specify file contents as code blocks

Here are a few simple vue3 code blocks:

The writer only needs to specify the relative path to the code block content file and the prefix to activate the code block

Vue component code block

Use a default my-Input component to illustrate the example

Complete property hints are supported, showing all available properties of the component starting with SP –

React component code block

Use a default MyButton component to illustrate the example

conclusion

In my opinion, this plug-in can help with more than just writing and sharing code blocks

It can also be used in business development where a common business component adds a.snippets. Json configuration that others can use to get friendly property prompts

The last

Welcome to the comments section, put forward iteration ideas

Welcome to experience the plug-in, put forward valuable modification suggestions

• Plug-in source
• Plug-in experience