Using Snippets+ to manage and invoke Snippets is a much better experience than VSCode's own snippets capability. Snippets+ has made specific improvements based on the defects of the native Snippets, and the following is an introduction to the features.
|
native Snippets |
Snippets+ |
| create |
The creation process is quite complicated. You need to copy the code snippets to an external website and paste the result in the. Code-snippets |
Select the code in the editor and enter cmd + shift + enter to quickly create the code template |
| code dependency |
does not care about the dependency of the code template. You need to import the dependency file manually after inserting the code snippet. |
automatically calculates the dependency file required by the code snippet and inserts the ImportDeclaration into the header of the page |
| placeholder conversion |
needs to fill random numbers, the size of the hump conversion is complicated |
you can use js syntax in the code template to do complex conversion placeholders, using lodash to easily convert placeholder format |
| Use environment awareness |
The use of code snippets generally does not cause different results because of the difference in the file |
can be aware of the use case, allowing the code template to insert the name of the file, the current date and other variables |
| cross-project |
only reads the code-snippets file in the workspace and cannot reuse the code snippets across projects, and |
cannot be used if you switch back to the old branch development. You can store the code snippets in a separate directory and reuse the code snippets between different projects and branches |
In addition to the above improvements, Snippets+ provides two features that are very convenient for development.
- Integrated variable name translation ability, can translate Chinese into English, support a variety of variable name formats.
- Use the copy-paste shortcut for Snippets+ to copy the code and bring the dependencies of the code into the new file.
Create Code Snippet
To create an example of useState code Snippets, more examples can be found Snippets+ code template use cases
Once the code snippet is selected, type ctrl+shift+enter (cmd+shift+enter on mac) to quickly create the code snippet.
After the code snippet is created, you can add flexible placeholders to the code snippet by adding template variables.
Use Code Snippets
Enter the prefix 'commontitle' you just defined in the editor to trigger code completion and select the code snippet you just created. Snippets+ will prompt you to complete the placeholder, then shift+enter to confirm the completion.
Smart Code Clipboard
The Smart Code Clipboard is turned on by default after the plugin is installed and can be turned off manually in the Settings.
The benefit of using the Smart Code Clipboard is that Snippets+ can trigger code parsing, and Snippets+ optimizes your CV experience using three algorithms:
- Dependency analysis algorithm: ImportDeclaration used to analyze copied code snippets based on code syntax
- Dependent deduplication algorithm: analyzes existing importdeclarations in the pasted code snippet environment and inserts the required importdeclarations as needed
- Dependent path Conversion algorithm: Automatically converts the ImportDeclaration in the destination file for dependencies introduced using relative paths
