Hello everyone, I am a bowl week, a front end that does not want to be drunk (inrolled). If I am lucky enough to write an article that you like, I am very lucky
Writing in the front
The code snippet can be understood as a template, and when we type the specified template, press TAB or Enter to display the corresponding template.
As long as you write good code snippets, you will get promotions and raises
The pros and cons of snippets
Coder has mixed reviews of snippets, and this chart illustrates the pros and cons of snippets:
When to use snippets
My advice on when to use snippets is:
- When you’re skilled enough at something, for example
console.log()
At this point you can set code snippets for it. - Some things are particularly tedious and need to be written every time, such as the contents of a preliminary definition in a Vue single file.
Of course, the above content is only my suggestion.
How do I set up code snippets
First you prepare a VSCode, then determine your operating system, and then start operating:
- Windows system: [File] → [Preferences] → [User fragments]
- Mac System: [Code] → [Preferences] → [User Segments]
Then you can see the following
You can then modify the existing snippet or create a new snippet, in this case a global snippet called test-snippets, to demonstrate.
Snippet syntax
After we have created it, a JSON-like syntax appears, which looks like this:
{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');" .
/ / "$2"
/ /,
// "description": "Log output to console"
// }
}
Copy the code
Let’s look at the snippet syntax in VSCode.
Each property in the object represents a code snippet. The property name is the name of the code snippet. When the code snippet is triggered, the matched code snippet name is displayed.
Next we learn what each attribute does in the snippet.
scope
: indicates which language the snippet works on. Between different languages.
Separated. Commonly used withjavascript, typescript,html,css,vue
And so on. If set to""
It means everywhere.prefix
: Corresponds to the character that triggers the snippet.description
: Description of code snippets.body
: The contents of an object snippet, usually an array with one line in the array corresponding to the line after the generated snippet.
Recommend a site for generating code snippets with the following link:
snippet-generator.app/
$placeholder
In the example above, we enter log and press TAB to display the following code:
console.log();
Copy the code
After the text appears, the cursor is in (), then press TAB to move the cursor to the next line, which is $2. Similarly, we can set $3, $4, etc
Note that $0 is used to set the final cursor position.
Default and optional
If you want a default value in the placeholder, you can write it as ${1:defalt}.
If line provide some options, you can through the ${1 | one, two, three |} in the form of a written, such as:
{
"import": {
"scope": "javascript,typescript"."prefix": "import"."body": [
"import { $2 } from \"${1|axios,lodash,day|}\""."$3"]."description": "Import module"}}Copy the code
The tests are as follows:
Then press TAB to see the picture below
constant
In the code snippet, VSCode gives us some constants that are easy to use, such as $TM_FILENAME.
TM_SELECTED_TEXT Currently selected text or empty string TM_CURRENT_LINE Content of the current line TM_CURRENT_WORD Content of the word under the cursor or empty string TM_LINE_INDEX Line number based on zero index TM_LINE_NUMBER Line number based on one index TM_FILENAME File name of the current document TM_FILENAME_BASE File name of the current document (without the suffix) TM_DIRECTORY Directory of the current document TM_FILEPATH The full file path for the current document CLIPBOARD Contents in the CLIPBOARD WORKSPACE_NAME Name of an open workspace or folder CURRENT_YEAR Current year (four digits) CURRENT_MONTH Current month CURRENT_DATE Current day CURRENT_DAY_NAME_SHORT Short name of the day (' Mon ') CURRENT_HOUR Current hour CURRENT_MINUTE Current minute CURRENT_SECOND Current second BLOCK_COMMENT_START Block comments start identifiers, such as PHP /* or HTML <! -- BLOCK_COMMENT_END Block comment end identifier, such as PHP */ or HTML --> LINE_COMMENT line comment, such as PHP // or HTML <! -- -->Copy the code
Create code snippets for your project
Sometimes we need to create code snippets for a specific project, but it’s really easy, just create a.vscode folder in the root directory of the current project and create a file that ends with.code-snippets.
Write in the last
Here I create a GitHub repository and put some code snippets in VSCode. The repository address is as follows:
Github.com/ywanzhou/vs…
See this, also don’t like support ~