一、基础功能增强插件
project manage:多项目管理。
Vim:编辑器之神。
Settings Sync:多终端同步vscode配置。
Code Runner:代码一键运行。
Tabnine AI Autocomplete for Javascr:智能代码补全
GitLens:git功能增强,显示git提交信息
Remote Development:此插件可连接编辑远程服务器上的文件。
Trailing Spaces:行尾空格高亮。
indent-rainbow:相同缩进,高亮显示。
二、前端开发用插件
1、HTML
暂无
2、JavaScript
Javascript (ES6) Code Snippets:JS、ES6 代码提示,快捷生成代码片段。
Parameter Hints:提示js函数的参数类型及消息
jQuery Code Snippets:jQuery代码片段
3、CSS
CSS Initial Value:显示每个CSS属性的初始值,当光标停留在css属性时
CSS Navigation :提供从html跳转到css定义位置的跳转
4、Vue
Vetur:对.vue文件提供语法高亮显示等功能。
Vue 3 Snippets:对vue2和vue3,提供代码提示,快捷生成代码片段。
Auto Import:提示需要导入的包,回车后自动导入依赖包。
Import Cost:在行尾显示导入的包的大小。
5、前端开发功能增强
LiveServer:修改前端代码后,浏览器实时显示更改。
Open In Default Browser:右键菜单集成,在默认浏览器中打开当前文件。
Path Intellisense:输入路径时智能提示,自动补全。
Image Preview:点击图片路径,图片预览
vscode-faker:生成前端测试假数据,ctrl+shift+p 输入fake即可,选装。
三、美化插件
VSCode Great Icons、vscode-icons:漂亮的icon主题。
Fluent Icons:更漂亮的图标。
四、其他插件
Java Imports Snippets :java 代码片段
五、编辑器配置
- 原生彩色括号
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs":"active"
- Beautify 插件配置
"beautify.language": {
"js": {
"type": [
"javascript",
"json"
],
"filename": [
".jshintrc",
".jsbeautify"
]
},
"css": [
"css",
"scss"
],
"html": [
"htm",
"html",
"vue"
]
},
-
ident rainbow 插件,修改缩进标识样式
image.png
