[Record] Vscode commonly used plug-ins

https://zhuanlan.zhihu.com/p/111004160
https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649130365&idx=1&sn=e59b964ece9dfc6841fae0782090cfb7&chksm=be58a2d0892f2bc6783e44a85f222188df130e5230179e3340e76aef6c9975681f92b4c396e0&scene=27

1-1 winter

vue highlight

1-2 Configure the plugin for @path hints in VScode: Path Autocomplete

1. Then click Settings, then find the Open Settings button in the upper right corner, and enter the settings.json panel

{
    
    
   "security.workspace.trust.untrustedFiles": "open",
   "editor.indentSize": "tabSize",
   // 导入文件时是否携带文件的扩展名
   "path-autocomplete.extensionOnImport": true,
   //配置@的路径提示
   "path-autocomplete.pathMappings": {
    
    

       "@":"${folder}/src"

   },

}

1-3 Related plug-ins for eslint configuration

eslint

1-4 hex Editor

View binary png, jpg files on vscode

1. Use the plugin hex Editor

1-5 Open in Browser

右击即可选择在浏览器中打开

1-6 JS-CSS-HTMLFormatter

每次保存，都会自动格式化js css以及html代码

Manual praise, this plugin is really great

1-7 Auto Rename Tag

自动重命名配对的HTML/XML标签

Please ignore the watermark on the picture, I'm too green, and I have no money, woo woo woo! stop
When using WebStorm some time ago, this feature came with it, and the powerful plug-in library of VS Code is great! ! !

1-8 Easy LESS

在保存.less文件时，会自动生成相应的.css文件，在html文件中引入相应的css文件即可

1-9 Setting Code Snippets

1-9-1 effect:

1. Enter the custom eser in the code input area and press Enter to automatically enter the set code snippet

1-9-2 Operation steps:

1. Click "File-Preferences-User Snippets" in VScode to open the graphical interface
   2.

2. Select the template language you want to build, take JavaScript as an example here, and open the graphical interface
   

3. Write code snippets in json.
   Each snippet is defined under a snippet name

   • And there are prefix, body and description.

     • prefix is ​​used to trigger code snippets.
     • Use $1, $2, etc. to specify the cursor position. These numbers specify the order in which the cursor jumps, and $0 represents the final cursor position.

   • Note: There may be explanation codes in the new file, which are used to generate empty documents, and all of them need to be commented, including brackets (all comments)

4. In the braces of javascript.json, write the following code:

 "Print to console": {
    
    
	 	"prefix": "eser",
	 	"body": [
			"//导入express模块",
	 		"const express = require('express')",
			"创建express的服务器实例",
			"const app = express()",
			"",
			"//write your code here...",
			"",
			"//调用app.listen方法，指定端口号并启动web服务器",
			"app.listen(80,function(){",
			"console.log('Express server running at http://127.0.0.1')",
			"})",

	 	],
	 	"description": "Log output to console"
	 }

1-10 Quickly generate vue templates

1. CSCode Snippets view

1-11 vue 3 snippets

1-12 vscode-icons