A designer for quickly creating code snippet, Scaffold Cascade, and Schematic diagram.

Quickly initialize the project,Stackable layer structure,Programmable input logic,Dynamic code snippets,Code-level dependency injection

CLI

npm i @code-recycle/cli -D

Create a new script folder

• Choose a location to create a folder and create it in the following hierarchy

You can refer to the Demo Repo

.
├── action 
│   ├── hello2.js
│   └── hello.js
├── snippet 
│   ├── hello2.js
│   └── manifest.json
└── view 
    ├── hello2.js
    └── hello.js

Create Script

• Use the editor to open the created folder, then right-click to quickly create a script

Editor Script

• Here we demonstrate how to change the a declaration in a file from let to const

Test Selector

• Click on the corresponding node to automatically copy the relevant labels

Implementation

More?

• Script Util Introduce

AST View Debugger

• Located in the right upper corner of the editor's title bar.
• Used for visual debugging when selecting custom rule

CSS Selector Universal Language Query

• Use css selector for different language node queries
• Implement the majority of the CSS selector functions

Description

• Custom pseudo-classes :raw: used to query the original value/tag attribute of the current node

  xxx:raw([value=yyy]); this selector is used in very extreme scenarios and is used only in a few cases.

• ::parent: query the parent element

• ::children(x): query the xth child element of the current element

• ::xx: query the custom child element defined in the current language.

• Custom pseudo-classes :use: like :is,Can query siblings and descendants

Query general attributes of a node

• index: Index representing the position of the current node in its parent.
• tag: Label of the node.
• value: Text of the current node.
• range: Position of the current node.
• children: List of child elements of the current node.
• type: Type of the node (node/token).

Supported Language/Grammar

• typescript(typescript)
• typescript(javascript)
• typescript(typescriptreact)
• typescript(javascriptreact)
• @angular/compiler(ng-html)
• @angular/compiler(html)
• htmlparser2(html)
• htmlparser2(xml)
• jsonc-parser(json)
• gsql-ast-parser(sql)
• @vue/compiler-dom(vue)

• tree-sitter needs to fetch code from the https://github.com/wszgrcy/tree-sitter-wasm-bundle repository or customized according to the format, then write the local path into the configuration file code-recycle.parser.tree-sitter.repository.

Support

The project code contains

Other

About open source

• Before developers can maintain their livelihood and ensure sufficient energy to develop the plugin, the plugin will not be open-source temporarily.
• When developers can make a living from the plugin and maintain their lives, we will consider open-sourceing.
• Currently, the plugin has no commercial earnings.
• If you have better ideas for commercialization, please contact me at any time:wszgrcy@gmail.com