VS Code 有一个很强大的功能就是支持插件扩展,让你的编辑器仿佛拥有了三头六臂,能极大提高工作效率。 上图中,点击红框部分,即可在输入框里,查找你想要的插件名,然后进行安装。 这里推荐一些实用的插件,建议收藏备用! 1、GitLens 【荐】简直是 Git 神器,码农必备。GitLens 在 Git 管理上有很多强大的功能,比如:
2、Git History有些同学习惯使用编辑器中的 Git 管理工具,而不太喜欢要打开另外一个 Git UI 工具的同学,这一款插件满足你查询所有 Git 记录的需求。 3、Live Server 【荐】在本地启动一个服务器,代码写完后可以实现「热更新」,实时地在网页中看到运行效果。就不需要每次都得手动刷新页面了。 使用方式:安装插件后,开始写代码;代码写完后,右键选择「Open with Live Server」。 4、Chinese (Simplified) Language Pack for Visual Studio Code让软件显示为简体中文语言。 5、Bracket Pair Colorizer 2:突出显示成对的括号【荐】
另外,还有个 6、sftp:文件传输 【荐】如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器,可以安装 7、open in browser安装 8、highlight-icemode:选中相同的代码时,让高亮显示更加明显【荐】VSCode 自带的高亮显示,实在是不够显眼。用插件支持一下吧。 所用了这个插件之后,VS Code 自带的高亮就可以关掉了: 在用户设置里添加 9、vscode-iconsvscode-icons 会根据文件的后缀名来显示不同的图标,让你更直观地知道每种文件是什么类型的。 10、Project Manager工作中,我们经常会来回切换多个项目,每次都要找到对应项目的目录再打开,比较麻烦。Project Manager 插件可以解决这样的烦恼,它提供了专门的视图来展示你的项目,我们可以把常用的项目保存在这里,需要时一键切换,十分方便。 11、TODO Highlight写代码过程中,突然发现一个 Bug,但是又不想停下来手中的活,以免打断思路,怎么办?按照代码规范,我们一般是在代码中加个 TODO 注释。比如:(注意,一定要写成大写
或者:
安装了插件 12、Markdown Preview Github Styling 【荐】以 GitHub 风格预览 Markdown 样式,十分简洁优雅。就像下面这样,左侧书写 Markdown 文本,右侧预览 Markdown 的渲染效果: 13、Markdown Preview Enhanced预览 Markdown 样式。 Markdown All in One这个插件将帮助你更高效地在 Markdown 中编写文档。 14、VeturVue 多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。VS Code 官方钦定 Vue 插件,Vue 开发者必备。 15、ES7 React/Redux/GraphQL/React-Native snippetsReact/Redux/react-router 的语法智能提示。 16、minapp:小程序支持小程序开发必备插件。 17、Prettier:代码格式化Prettier 是一个代码格式化工具,只关注格式化,但不具备校验功能。在一个多人协同开发的团队中,统一的代码编写规范非常重要。一套规范可以让我们编写的代码达到一致的风格,提高代码的可读性和统一性。自然维护性也会有所提高。 18、ESLint:代码格式校验日常开发中,建议用可以用 Prettier 做代码格式化,然后用 eslint 做校验。 19、Beautify代码格式化工具。 备注:相比之下,Prettier 是当前最流行的代码格式化工具,比 Beautify 用得更多。 20、JavaScript(ES6) code snippetsES6 语法智能提示,支持快速输入。 21、Search node_modules 【荐】
22、indent-rainbow:突出显示代码缩进
安装完成后,效果如下图所示: 23、Code Spell Checker:单词拼写错误检查这个拼写检查程序的目标是帮助捕获常见的单词拼写错误,可以检测驼峰命名。从此告别 Chinglish. 24、Local History 【荐】维护文件的本地历史记录,强烈建议安装。代码意外丢失时,有时可以救命。 25、Polacode-2020:生成代码截图 【荐】可以把代码片段保存成美观的图片,主题不同,代码的配色方案也不同,也也可以自定义设置图片的边框颜色、大小、阴影。 尤其是在我们做 PPT 分享时需要用到代码片段时,或者需要在网络上优雅地分享代码片段时,这一招很有用。 生成的效果如下: 其他同类插件: 26、Image Preview 【荐】图片预览。鼠标移动到图片 url 上的时候,会自动显示图片的预览和图片尺寸。 27、Auto Close Tag、Auto Rename Tag自动闭合标签、自动对标签重命名。 28、Better Comments为注释添加更醒目、带分类的色彩。 29、CSS Peek增强 HTML 和 CSS 之间的关联,快速查看该元素上的 CSS 样式。 30、Vue CSS PeekCSS Peek 对 Vue 没有支持,该插件提供了对 Vue 文件的支持。 31、Color Info这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。 32、Import Cost在项目开发过程中,我们会引入很多 npm 包,有时候可能只用到了某个包里的一个方法,却引入了整个包,导致代码体积增大很多。 33、Paste JSON as Code此插件可以将剪贴板中的 JSON 字符串转换成工作代码。支持多种语言。 |
|