当前位置：网站首页>Vscade development tools

Vscade development tools

2022-07-20 01:05:00 【qq_ thirty-eight million nine hundred and sixty-nine thousand s】

One 、 Practical plug in ：

1.git dependent ：

（1） Show in code git Submission log （ contain Git account number &commit Information , to Vscode add to Git function ）：

GitLens — Git supercharged

（2） Display a graphical waterfall timeline Git Record , You can create a new branch based on a branch or search a commit：Git Graph

For usage, please refer to ：vscode plug-in unit Git Graph Use _ Indulge in the moonlight 831 The blog of -CSDN Blog _git graph

2. When modifying labels , Automatically rename tags ：Auto Rename Tag

3. Rainbow brackets （ Highlight the matching brackets ）：Bracket Pair Colorizer

4. Write easy to read notes （ It only works on js Class file , Ordinary .html Out-of-service ）：Better Comments

Usage mode ： stay js Before a single line comment or a multi line comment statement ： Add a special symbol .

// *  Show the point 
// !  Indicates errors and warnings 
// ?  It means asking questions 
// //  Said to delete 
// TODO  Means to do sth

5. Descriptive Icon （ Distinguish between different files and folders ）：vscode-icons、Material Icon Theme、Simple icons.

6. Show the estimated size of the introduction or import in the code ：Import Cost

7. Highlight indent ( Before each line of code )：indent-rainbow

8. Read the source code and make tags or bookmarks ：Todo Tree、Bookmark

this 2 All kinds of marks can be found in VScode Check the left sidebar , And click to jump directly to the source code tag .
Todo Tree Use ： Add uppercase in the comment statement TODO Key words can be used , Such as ：// TODO xxx Text description
Bookmarks Use ： Add or remove bookmark shortcuts ：Ctrl + Alt + K

9. Auto add header & Function annotation template statement ： koroFileHeader

The file header ：Ctrl + Alt +i Function Comments ：Ctrl + Alt +t

Two 、 Common shortcut key ：

1. Find a file globally ：ctrl + p

2. The mother of all commands ： ctrl + shift + p

3. View function or symbol definitions （ The definition needs to use keywords such as function Declarative ）：

Jump directly to the definition file ：F12
View the definition file in preview ：Alt+F12

4. Move forward or backward to the previous cursor position of the source code where the cursor is located ：alt + Keyboard left and right direction keys

5. Single-line comments ：ctrl + / Multiline comment ：Alt+Shift+A

3、 ... and 、 Quickly generate HTML label

1. With a certain class div：div. Class name

2 Multiple labels （ Multiplication operators ）：div*10

Four 、 Other use operations

1. To configure User Snippets Common code snippets （ usage ： Enter keywords -》Tab-》 Automatically generate object code ）

The lower left corner " Set up " -> " User code snippets " -> Corresponding to the programming language json Configuration files such as ：javascript.json -> To write json The configuration can be .

{
	"Print to console":{
		"prefix": "lg",  //  Key words entered 
		"body": [
			"\tconsole.log(\" This is what I want to print \",$0);"  // tab The object code fragment generated after key clicking ; $0 The position of the variable is the position of the cursor ; Double quotation marks need to be escaped ;
		],
		"description":"Print the console" //  After entering the keywords VScode Prompt for , The default is key
	}
}

//  Variables are enumerable 2 Prompt usage 
"body" : [
    "printf(\"%${1:you can use i,s,c,f}\", $2);"  //  Curly braces + The colon 
    "printf(\"%${1|i,s,c,f|}\", $2);"  //  Curly braces +2 Vertical bars 
]

//  File comment header 
"header comment": {
		"prefix": "hc",
		"body": [
			"$BLOCK_COMMENT_START", //  Special variables at the beginning of comments 
			" * Author: lucy",
			" * Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE", //  Special variable of current month, year and day 
			"$BLOCK_COMMENT_END"
		]
}

Snippers Generate tools quickly ：GitHub - pawelgrzybek/snippet-generator: Snippet generator for Visual Studio Code, Sublime Text and Atom