vscode部分插件的使用方法

Visual Studio Code跨平台代码编辑器 v1.99.3 64位 官方中文安装版

• 类型：编译工具
  
• 大小：102MB
  
• 语言：简体中文
  
• 时间：2025-04-17
  

查看详情1、javascript console utils
选中对应的变量，然后ctrl+shift+L,而ctrl+shift+D即可删除本文件中所有的console.log()

2、Todo Tree

3、Vue Css Peek和vue-helper
这两个插件时用于css跳转和方法跳转的，按ctrl键同时点击即可完成跳转

4、Css Tree
快速生成样式树，选中代码块，然后ctrl+shift+p

5、KoroFileHeader
安装过后，在界面左下角点开设置，输入fileheader

然后点击settings中编辑

最后在其中加入如下代码

1. "fileheader.configObj": {
   
2.     "createFileTime": true,//设置为true则为文件新建时候作为date，否则注释生成时间为date
   
3.     "autoAdd": true,//自动生成注释，老是忘记的同学可以设置
   
4.     "annotationStr": {
   
5.       "head": "/*",
   
6.       "middle": " * @",
   
7.       "end": " */",
   
8.       "use": true//设置自定义注释可用
   
9.     },
   
10.   },
    
11.   //函数注释
    
12.   "fileheader.cursorMode": {
    
13.     "description":"",
    
14.     "param ":"",
    
15.     "return":""
    
16.   },
    
17.   // 文件头部注释
    
18.   "fileheader.customMade": {
    
19.     "Description":"" ,//文件内容描述
    
20.     "Author":"cxk",//编辑人
    
21.     "Date": "Do not edit",//时间
    
22.     "LastEditTime": "Do not edit",
    
23.     "LastEditors": "cxk",
    
24.   }

复制代码

• 文件头部注释:快捷键：crtl+alt+i
  
• 文件头部注释:快捷键：crtl+alt+t
  

6、GitLens — Git supercharged
这个是可以看到当前代码上一个提交的作者是谁、提交时间，在多人协作的代码里面非常好用

7、Image preview
当鼠标悬浮到img时，会产生实时预览大图的功能

8、indent-rainbow
这个可以使代码排版更整齐

9、px to rem & rpx & vw (cssrem)
可以快速的使px转换为rem

10、个人的settings的配置如下

1. {
   
2.   "editor.formatOnSave": true,
   
3.   // "eslint.autoFixOnSave": true,
   
4.   // 自动修复
   
5.   "editor.codeActionsOnSave": {
   
6.     "source.fixAll.eslint": true,
   
7.   },
   
8.   // 配置 ESLint 检查的文件类型
   
9.   "eslint.validate": ["javascript","vue","html"],
   
10.   "window.zoomLevel": 1,
    
11.   "editor.fontSize": 16,
    
12.   "git.confirmSync": false,
    
13.   "editor.tabSize": 2,
    
14.   "editor.detectIndentation": false,
    
15.   "workbench.settings.useSplitJSON": true,
    
16.   "files.autoSaveDelay": 1000,
    
17.   "browserSync.config": {
    
18.   },
    
19.   "beautify.language": {
    
20.     "js": {
    
21.       "type": [
    
22.         "javascript",
    
23.         "json",
    
24.         "jsonc"
    
25.       ],
    
26.       "filename": [
    
27.         ".jshintrc",
    
28.         ".jsbeautifyrc"
    
29.       ]
    
30.     },
    
31.     "css": [
    
32.       "css",
    
33.       "less",
    
34.       "scss"
    
35.     ],
    
36.     "html": [
    
37.       "htm",
    
38.       "html",
    
39.       "vue"
    
40.     ]
    
41.   },
    
42.   "vetur.format.defaultFormatter.html": "js-beautify-html",
    
43.   "dart.debugExternalLibraries": true,
    
44.   "thiefBook.filePath": "C:\\Users\\Administrator\\Documents\\山沟皇帝.txt",
    
45.   "editor.suggestSelection": "first",
    
46.   "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    
47.   "todo-tree.tree.showScanModeButton": false,
    
48.   "vetur.ignoreProjectWarning": true,
    
49.   "emmet.excludeLanguages": [
    
50.     "markdown"
    
51.   ],
    
52.   "fileheader.configObj": {
    
53.     "createFileTime": true,//设置为true则为文件新建时候作为date，否则注释生成时间为date
    
54.     "autoAdd": true,//自动生成注释，老是忘记的同学可以设置
    
55.     "annotationStr": {
    
56.       "head": "/*",
    
57.       "middle": " * @",
    
58.       "end": " */",
    
59.       "use": true//设置自定义注释可用
    
60.     },
    
61.   },
    
62.   "fileheader.cursorMode": {
    
63.     "description":"",
    
64.     "param ":"",
    
65.     "return":""
    
66.   },
    
67.   "fileheader.customMade": {
    
68.     "Description":"" ,//文件内容描述
    
69.     "Author":"cxk",//编辑人
    
70.     "Date": "Do not edit",//时间
    
71.     "LastEditTime": "Do not edit",
    
72.     "LastEditors": "cxk",
    
73.   }
    
74. }

复制代码

以上就是vscode部分插件的使用方法，希望大家喜欢，请继续关注脚本之家。
相关推荐：
vscode常用插件有哪些? VSCode经典插件推荐
vscode中prettier插件怎么使用? vscode中prettier的用法
vscode插件Markdown PDF插件转换PDF错误该怎么办?

来源：https://www.jb51.net/softjc/918564.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！