§ 前端VsCode实用插件
本文从基础必备、代码规范、开发神器三个方面来推荐,方方面面都有涉及。有了这些神器就让我们一起愉悦的撸代码吧!
§ 基础通用插件
§ Chinese
vscode编辑器汉化包,安装后,在 locale.json 中添加 "locale": "zh-cn",即可载入中文(简体)语言包。
§ Auto Rename Tag
自动重命名成对的HTML标记,修改开始标签,结束标签会同步修改
§ HTML Snippets
HTML代码片段,该插件可为你提供html标签的代码提示,不用键入尖括号了
§ Bracket Pair Colorizer
该插件可以为你把成对的括号做颜色区分,并且提供一根连接线。方便我们审阅代码结构
§ CSS Peek
css样式查看器,可快速查看我们的css样式,非常方便快捷
§ Npm Intellisense
可自动完成导入语句中的npm模块
§ open in browser
快速打开html文件到浏览器预览
§ Auto Close Tag
自动闭合HTML/XML标签
§ Path Intellisense
自动提示文件路径,支持各种快速引入文件
§ Beautify
在代码文件右键鼠标一键格式化 html,js,css
§ JavaScript (ES6) code snippets
ES6语法智能提示,以及快速输入
§ Vetur
VScode官方钦定Vue插件,Vue开发者必备。内含语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger等实用功能
§ 代码风格规范类插件
§ ESlint
规范js代码书写规则,如果觉得太过严谨,可自定义规则
§ TSLint
ts的书写规范,这个插件是一个系列,同时还提供了TSLint (deprecated),TSLint Vue,TSLint Vue-TSX
§ Code Spell Checker
是拼写检查程序,检查不常见的单词,如果单词拼写错误,会给出警告提示
§ koroFileHeader
在vscode中用于生成文件头部注释和函数注释的插件,经过多版迭代后,插件:支持所有主流语言,功能强大,灵活方便,文档齐全,食用简单!
不光如此,还能生成一些特别有意思的注释,比如这一条喷火龙...
§ GitHistory
GitHistory可查看和搜索git日志以及图形和详细信息,同时还支持分支比较,分支管理等操作,非常方便
§ 其他插件(神器)
§ Partial Diff
文件比较是一个很常见的场景,如果光凭我们肉眼分别的话,累人不说还容易出错。Partial Diff的出现就正好解决了这个问题。
§ Markdown All in One
这款神器可以让我们在vscode里面快乐的书写Markdown,功能强大。提供了丰富的快捷键,可边写边看,轻松转化为html或pdf文件
§ REST Client
这款神器可以让我们在vscode里面进行接口调试,提供丰富的api配置方式,让我们不用离开编辑器也可以随时调用接口调试
新建一个.http文件,写下基本的测试代码,点击 Send Request即可在右边窗口查看接口返回结果,非常nice,强烈推荐
§ Browser Preview
这款神器可以让我们在vscode里面打开浏览器,一边编码一边查看,偶尔也可以用来摸鱼,非常人性,强烈推荐
§ JavaScript Booster
这款神器可以在我们代码写的不规范或者有待调整的地方,在光标聚焦后,会有一个小灯泡。会提示对应的不合理原因和改进方案。极大的提高了我们的代码优雅度,强烈推荐
让您的生活更轻松,使用代码操作为您执行重复性任务!他们可以提供很多帮助,只需跟随灯泡!
当在JavaScript(或TypeScript / Flow)中编辑代码时,此VS Code扩展提供了各种代码操作(快速修复)。只需注意左侧的灯泡,然后按一下它即可了解如何在光标下转换代码。
§ Settings Sync
这款神器可以让我们的vscode配置同步到云端,当我们跟换电脑或者再次安装vscode的时候,只需要登录账号即可同步配置了,而不用再次从头开始。
