VSCode常用插件

zsd_666

已于 2024-07-11 11:27:00 修改

阅读量2.4k

点赞数 1

分类专栏： Web前端文章标签： vscode

于 2022-09-09 09:39:38 首次发布

本文链接：https://blog.csdn.net/zhao3756/article/details/126776733

版权

VSCode常用插件

文章目录

VSCode常用插件

1. CodeGeeX

CodeGeeX是一款基于大模型的智能编程助手，它可以实现代码的生成与补全，自动为代码添加注释，不同编程语言的代码间实现互译，针对技术和代码问题的智能问答，当然还包括代码解释，生成单元测试，实现代码审查，修复代码bug等非常丰富的功能。

2. Auto Close Tag

自动补全结束标签

3. Auto Rename Tag

重命名一个HTML / XML标签时,自动重命名配对的HTML / XML标签

4. Color Info

光标在颜色上悬停即可弹窗显示颜色值，rgb,hsl,cmyk,hex等等

5. CSS Peek

在HTML文件中右键单击选择器可快速到指定的css样式
安装完成后打开HTML文件，按住CTRL键同时移到鼠标到要查看样式的类上就可以看到该类的定义了。
这个仅仅对html中引用外部样式(即单独css文件) 有用,对vue内部样式没有用

6. ENV

为.env文件添加格式和语法高亮支持

7. Excel Viewer

使VSCode可以预览excel文件

8. filesize

在底部状态栏显示当前文件的大小

9. GitLens

查看项目提交记录、文件修改记录等

10. Image preview

可以预览图片

配置内容

 // 图片预览配置
  "gutterpreview.currentColorForSVG": "white",  // svg预览中使用的默认颜色
  "gutterpreview.enableReferenceLookup": true, // 指示是否应该从引用解析资源的标志
  "gutterpreview.imagePreviewMaxHeight": 100, // 预览图片高度最大值
  "gutterpreview.paths": {
   }, // 指示图像预览是否应显示在左侧的行栏
  "gutterpreview.showUnderline": true, // 是否对已识别的url加下划线
  "gutterpreview.sourceFolder": "src",
  "gutterpreview.showImagePreviewOnGutter": true, // 指示图像预览是否应显示在左侧的行栏
  "gutterpreview.imagePreviewMaxWidth": 0,

11. indent-rainbow

高亮（每行代码之前的）缩进

12. Icon Fonts

对热门的字体图标提供代码提示

13. JavaScript(ES6) code snippets

js语法提示

14. HTML Boilerplate

在.html文件中输入html快速生成html文档结构

15. HTML CSS Support

css智能提示

16. HTML Snippets

是h5代码片段及提示

17. Live Server

本地服务器及热加载

18. One Dark Pro

主题

19. open in browser

使用默认浏览器打开当前文件

20. Path Autocomplete

自动路径补全

配置内容

  // 导入文件时是否携带文件的扩展名
  "path-autocomplete.extensionOnImport": true,
  //配置@的路径提示
  "path-autocomplete.pathMappings": {
   
    "@": "${folder}/src"
  },

21. Prettier - Code formatter

代码格式化

vscode 配置setting.json

"[typescript]": {
   
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[css]": {
   
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[html]": {
   
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[javascript]": {
   
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[scss]": {
   
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[less]": {
   
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[json]": {
   
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[vue]": {
   
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},

	 /*  prettier的配置 */
  "prettier.printWidth": 100, // 超过最大值换行
  "prettier.tabWidth": 2, // 缩进字节数
  "prettier.useTabs": true, // 句尾添加分号
  "prettier.singleQuote": false, // 使用单引号代替双引号
  "prettier.proseWrap": "preserve", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"