VSCode常用插件
文章目录
- VSCode常用插件
-
- 1. CodeGeeX
- 2. Auto Close Tag
- 3. Auto Rename Tag
- 4. Color Info
- 5. CSS Peek
- 6. ENV
- 7. Excel Viewer
- 8. filesize
- 9. GitLens
- 10. Image preview
- 11. indent-rainbow
- 12. Icon Fonts
- 13. JavaScript(ES6) code snippets
- 14. HTML Boilerplate
- 15. HTML CSS Support
- 16. HTML Snippets
- 17. Live Server
- 18. One Dark Pro
- 19. open in browser
- 20. Path Autocomplete
- 21. Prettier - Code formatter
- 22. Project Manager
- 23. TODO Highlight
- 24. Vant Snippets
- 25. Vetur
- 26. vscode-icons
- 27. Vue 3 Snippets
- 28. vue-helper
- 29. VueHelper
- 30. Material Icon Theme
- 31. Less IntelliSense
- 32. SCSS IntelliSense
- 33. Sass
- 34. Regex Previewer
- 35. vscode-faker
- 36. vue peek
- 37. koroFileHeader
- 38. Color Highlight
- 39. Vue VSCode Snippets
- 40. Volar
- 41. Vite
- 42. npm Intellisense
- 43. Live Sass Compiler
- 44. Autoprefixer
- 45. TypeScript Vue Plugin (Volar)
- 46. Turbo Console Log
- 47. any-rule
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 }"