Because the lab has been changing its front-end framework. Type similar to vue/react, but easy to use, mainly the source code is simple and easy to understand HHH. So I decided to write a vscode plug-in to assist in development. So I made one myself following the online tutorial. Here’s how it happened.

Syntax highlighting

Here is an example of my plugin:

Notice the label color in the string. Tag attribute expressions parentheses comments are colored.

Those of you who have used react or vue plugins are familiar with.vue files and.jsx files. Vue’s template tag is syntax highlighted. JSX writing also has syntax highlighting. The template source for our framework is the template string. Then compile and parse.

What I did: Create a new language like.vue.jsx, which I can’t do. I read vscode’s English API, it was painful, finally tried out the method. I embed my syntax in js files or TS. Write json files for regular matches. And strings are not handled separately by vscode in the segmentation. TokenTypes of the scope need to be set to others. Use the re to set the scope for matched characters. Each scope is colored according to the color set by the theme.

The morphology of VSCdoe is textMate syntax. I first grab the inside of the template function using the syntax. Then grab each template string. Matches HTML tags in strings. And comments and so on. Then set the scope name of each matching result according to the details. Vscode colors according to the scope name.

Code hinting

As usual, look at the effect first:

I provide code hints for framework events, directives, and expressions. And complete the code. The keywords are:

x-

e-

x-=

e-=

.

  • When you type x-, a list of all noDOM supported directives is displayed.
  • When e- is entered, a list of commonly used Nodom events is displayed.
  • When you type = after the instruction, the data names defined by Model in the current module are displayed.
  • When = is entered after the event, the method name defined within methods in the current module is displayed.
  • After the model has defined the data in the current module, enter it anywhere. Expressions can be generated quickly.

Example:

If our data source model object (see Vue’s data,react state) contains the following data

model = {
		num: 0.AA:1.add:'aa'
	}
Copy the code

Type ‘.’ into the template to generate expressions as you choose

{{num}} or {{AA}} or {{add}}Copy the code

You can write code quickly when using instructions

x-if={{AA}} 
Copy the code

Implementation method: determine whether the current input character is needed. It then returns a list of instructions or events. The expression needs to iterate through the code with a string to get the code for the current class. Use the newFucntion function. Turn it into a JS object, and the properties and methods in the object can be retrieved.

Code snippet

For example, to generate a module, enter NCM in JS/TS, wait for the prompt box to display, select NCM (TAB or Enter). Generate the following code:

import {Module} from '.. /js/nodom.js'

export class  extends Module {

  model = {
      
  }
  methods = {
      
  }
  template() {
      return ` `}}Copy the code

The code snippet is relatively simple to implement, just configure your key name in JSON and generate the code snippet from the key name.

Automatic closing label

Tags can be closed automatically in template strings, including self-closing tags and regular tags. This function refers to someone else’s code in the plugin library. Just so you can automatically close tags in strings as well.

This is the vscode plug-in I wrote for our front-end framework. Features are not many, there is a chance to change it. Want to see the source of this: github.com/leslieder19… Previous framework’s official website: www.nodom.cn/webroute/ho… The new edition is still being revised. Writing nuggets for the first time, I hope you can give me more advice