前端Vscode常用插件概述
以下是我自己在工作中常用的插件,写给刚入门的前端coder。VSCode插件商店中实用的插件还是很多的,大家也可以对感兴趣的插件下载下来尝试一下的!
持续更新(2021/02/06更新)
| 插件名称 | 概述 | 作用 | 常用默认快捷键 |
|---|---|---|---|
| Chinese (Simplified) Language Pack for Visual Studio Code | 汉化中文包 | VSCode汉化包,安装重启后就界面就是简体中文了 | 无 |
| Live Server | 本地动态服务 | 相当于一个本地服务器.开启本地HTTP服务,代码保存后,网页实时更新,比open in browser的插件好用,后者只能打开html文件,代码变更后需要手动刷新才能加载新增的代码 |
开启本地动态服务alt+L+O关闭本地动态服务 alt+L+C |
| Auto Close Tag | 标签自动补全 | html的书写中自动给你添加闭合标签 | 无 |
| Auto Rename Tag | 自动重命名标签 | html的书写中你重命名标签的时候,自动给你修改相应的闭合标签或者开始标签 | 无 |
| Beautify | 代码美化 | 在格式化代码的时候,自动美化代码(主要就是缩进、空格、换行等),让代码看起来更加美观,可读性更强,支持javascript、JSON、CSS、Sass、HTML |
无 VSCode默认格式化代码 Shift+Ctrl+F |
| HTML Snippets | HTML代码片段 | HTML的代码片段,直接输入标签名再回车就可以自动给你补全尖括号,极客必备 | 标签名+空格 |
| JavaScript (ES6) code snippets | JS代码片段 | JS代码片段,包含ES6,支持的语言有JavaScript、TypeScript、JavaScript React、TypeScript React、Html、Vue |
常见快捷键详见插件说明 |
| Vetur | Vue工具 | 对于在VSCode中开发Vue必备插件!语法高亮、vue代码片段、错误检测、vue代码美化等强大的功能,具体介绍详见知乎大神的回答 | 详见大神回答 |
| Vue 3 Snippets | Vue3.0代码片段 | Vue3.0的代码片段,对使用Vue3.0开发项目的Coder比较友好,它基于2.0和3.0的API增加了一些代码片段 | 常见快捷键详见插件说明 |
| ESLint | 前端代码检查工具 | 现在最火的前端代码检查工具,帮助你避免一些低级的bug,给你删除多余的代码,还可以帮助在团队统一代码风格,使得代码可以更加优雅的合并。可是,对于刚入门前端的Coder不太推荐使用。因为如果是刚入门的Coder,代码写的七零八乱,你就会发现它给你的代码标注的整片鲜红,满是错误。推荐再掌握了一定的代码规范基础后,再使用这个插件。 | 无 |
| GitLens — Git supercharged | vscode中代码修改标识 | 团队协作开发中必备的插件,如果是仓库项目,可以看到光标所在行的代码最后一次是由谁编辑的,点开详情,可以看到更多的信息。自己可以配置一些东西,详情插件的welcome页面(我不太习惯Hovers的功能,我把这一项关闭了)。 |
无 |
| REST Client | 接口调试轻量化工具 | 用来调试接口使用的,主要是后端用的比较多,在webstorm等一些软件中,内置了此功能。在vscode中需要自己去插件市场安装。具体使用方法见论坛中的讲解。 | 无 |

浙公网安备 33010602011771号