`

推荐 7 个提升前端编程效率的 VSCode 插件

阅读更多

本文来源于网络,作者:LittleGinger,编辑整理:逆锋起笔

Visual Studio Code (VSCode)是微软的一个免费的开源代码编辑器,它非常轻巧、灵活,资源占用少,内置功能强大,支持绝大多数流行的编程语言。VSCode 用当前大火的 TypeScript 开发,基于 electron 框架,底层 Node.js 对前端来说非常友好,简直就是一款为前端量身定。

VSCode 受到大家热烈追捧的一个非常重要原因就是:它拥有规模超大的扩展插件,开发者可以根据需求,在 Marketpalce 查找并安装各种各样免费扩展、可用于支持新语言、调试代码或添加各种其他自定义功能的插件。俗话说“插件用的好,编程没烦恼”,接下来就盘点 7 个提升前端编程效率的 VSCode 插件。

Git 增强:GitLens

GitLens增强了 VSCode 中内置的 Git 功能,它能够提供更多的版本控制功能来增强你的VSCode。GitLens 提供了对代码的深入分析功能,可以显示更改时间以及更改后的代码。通过使用 GitLens 甚至可以比较不同的分支、标签和提交。

点击安装: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

代码检查:ESLint

JavaScript 是一门非常灵活的语言,也很困难。ESLint 是一个插件化的 javascript 代码检测工具,有了它就可以进行常见的 JavaScript 代码错误检查,和代码风格检查。这样我们就可以根据自己的要求指定一套 ESLint 配置,然后应用到所编写的项目上,从而实现辅助编码规范的执行,有效控制项目代码的质量。

点击安装: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

前后端联调:Cloud Toolkit

在前后端联调开发的过程中,后端环境复杂多样,通常会涉及跨域、Cookie、Header鉴权以及更复杂的跨堡垒机调用等问题,有时候还会遇到一对多联调的情况,Alibaba Cloud Toolkit 插件对于联调环境切换非常有用。

它的 HTTP Proxy 功能提供了专业的前后端联调代理方案,开发小白不用阅读很多文档即就能迅速上手。这个插件还能解决包括带鉴权调试,跨堡垒机调试等复杂的联调场景问题,方便管理不同的调试环境,可以“无重启”调试环境切换将复杂的业务调试请求简化,调测效率迅速提高。有了它,Nginx 和 Charles 这样的复杂的代理工具再也不用安装了。

点击安装: https://marketplace.visualstudio.com/items?itemName=alibabacloud-cloudtoolkit.toolkit-vscode

逆锋起笔是一个专注于程序员圈子的技术平台,你可以收获最新技术动态最新内测资格BAT等大厂大佬的经验增长自身学习资料职业路线赚钱思维,微信搜索逆锋起笔关注!

环境同步:Settings Sync

Settings Sync 可以同步你当前的 VSCode配置环境,当你需要在其它的电脑工作时,新机器登录一下就搞定了,再也不用折腾环境了。将你所有的编辑器配置同步到 gist,省得在新设备上重新安装。

点击安装: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

项目管理:Project Manager

这个插件是多项目管理神器,可以在你的编辑器中快速切换项目。

点击安装: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

自动路径提示:Path Intellisense

这个插件很简单,就是会自动给你提示相关的文件路径,比如:当你在 HTML 通过 script 标签要引入一个文件的时候,你直接在 src 中它就会根据你的输入给你提示目录中有的文件名;或者你通过 node require 一个文件的时候也是一样会给你提示,这样你就不用再去记文件名了,也不会因为文件名拼写错误或者路径层级搞错而发生加载失败的问题了。

点击安装: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

EditorConfig for VS Code

在公司工作,一定会遇到多个人参与一个项目的情况,即使的团队中使用多中 IDE 和编辑器,也可以用针对 VS Code 的 EditorConfig 来实现一致性。EditorConfig包含一个用于定义代码格式的文件和一批编辑器插件,这些插件是让编辑器读取配置文件并以此来格式化代码。

点击安装: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

以上介绍的都是在日常工作中亲测提升效率的插件,另外还有一些主题类的插件网上的推荐很多就不推荐啦!VSCode 提供的扩展插件数量惊人,这也是让它大受欢迎的原因之一。希望安利的这 7 个插件,可以让你编程效率有飞越式的提高

逆锋起笔是一个专注于程序员圈子的技术平台,你可以收获最新技术动态最新内测资格BAT等大厂大佬的经验增长自身学习资料职业路线赚钱思维,微信搜索逆锋起笔关注!

分享到:
评论

相关推荐

    变量命名神器Codelf发布的VSCode插件

    文件名称“vscode-codelf-master”表明这是一个VSCode插件的源码仓库,其中包含了所有必要的文件和资源,如插件的配置、代码实现、测试用例等。通常,开发者可以克隆这个仓库,然后在本地环境中安装和调试插件,以...

    vscode插件vscode插件

    VSCode插件的多样性是其魅力所在,无论你是前端开发者、后端开发者,还是数据科学家,都能找到适合自己的插件来提升工作效率。通过不断地探索和尝试新的插件,你可以将VSCode打造成一个完全个性化的开发环境。

    vscode插件.zip

    本压缩包“vscode插件.zip”包含了一些常用的VSCode扩展插件,这些插件能够提升开发效率,优化编程体验。 1. **代码格式化与美化插件**:VSCode自带的格式化功能已经相当不错,但一些特定语言或个性化需求可能需要...

    Node.js-vscode-element-helper:一款Element的VSCode插件

    它为开发者在使用Element组件时提供便捷的代码提示、自动完成和文档查看等功能,旨在提高开发效率,减少错误输入,提升编码体验。 该插件可能包括以下功能: 1. **代码补全**:在编写Vue.js项目时,当用户开始输入...

    前端的安装包vscode压缩包

    - **智能代码补全**: 通过IntelliSense,VSCode可以提供代码片段、自动完成和参数提示,提高编码效率。 - **调试工具**: 支持多种语言的调试,包括JavaScript、TypeScript、Python等,调试体验直观且高效。 - **...

    前端开发工具VSCode.rar

    7. **扩展性**:VSCode拥有丰富的插件生态系统,开发者可以根据自身需求选择并安装各种插件,如支持不同框架和库的扩展,提升开发效率。 8. **源代码管理**:VSCode内置的Git支持使得版本控制变得简单,可以直接在...

    补充vscode插件

    "补充vscode插件"的标题暗示我们将讨论如何增强VSCode的功能,通过安装和使用各种插件来提升开发效率。 在VSCode中,插件是扩展其核心功能的关键,它们可以提供额外的编程语言支持、代码美化、调试工具、版本控制...

    VScode编辑器插件

    VScode编辑器插件是Visual Studio Code(简称VSCode)扩展功能的重要组成部分,它极大地提升了开发者的工作效率。VSCode是一款由微软开发的免费、开源的源代码编辑器,支持多种编程语言,并且拥有丰富的可扩展性,...

    VSCODE1.8X插件组合

    通过安装这些插件,VSCode可以成为一个功能更加强大、针对性更强的前端开发环境,提升开发者的编程体验和工作效率。每个插件都有其特定的用途,可以根据个人工作需求进行选择和配置。同时,开发者也应保持插件的更新...

    前端开发工具vsCode

    - **代码补全**:VSCode内置了强大的智能代码补全功能,可以预测并提供可能的代码片段,极大提升了编码效率。 - **调试工具**:内置的调试器功能强大,支持多种语言的调试,前端开发者可以方便地进行断点设置、单步...

    dailyanime一个开源的VSCode插件让你能在VSCode上划水追番

    标题中的“dailyanime”指的是一个名为“daily-anime”的开源VSCode插件,它专为在Visual Studio Code(VSCode)环境中观看动画而设计。这个插件允许开发者在忙碌的编程工作之余,享受一些休闲时光,观看喜欢的动漫...

    史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白).pdf

    最后,通过这篇文章的介绍,希望初学者能够顺利安装并配置好VSCode编辑器,使用推荐的插件提高开发效率,从而减轻写代码时的头疼问题。对于VSCode的更深入学习,可以参考VSCode官方文档以及社区提供的教程,不断地...

    前端开源库-vscode-test

    通过学习这个项目,开发者可以深入了解如何在VSCode环境中有效地利用测试工具,提升自己的前端开发技能。 总之,前端开源库和VSCode测试是现代前端开发不可或缺的部分。了解并掌握它们,有助于提高开发效率,保证...

    vscode工具插件

    【VSCode工具插件】是开发环境中不可或缺的一部分,它们极大地提升了开发者的工作效率和代码质量。在VSCode(Visual Studio Code)这款广受欢迎的源代码编辑器中,插件扮演着重要角色,为不同语言和任务提供了丰富的...

    前端开源库-vscode

    **前端开源库-VSCode详解** VSCode,全称Visual Studio Code,是由微软开发的一款免费、跨...开发者不仅可以利用VSCode进行日常编码,还能通过学习和开发扩展,提升自己的技术水平,参与到这个活跃的开源生态系统中。

    各种安装包各种安装包各种安装包各种安装包

    对于开发者和普通用户而言,了解不同类型的安装包以及如何安全有效地使用它们,是提升工作效率和保护系统安全的基础。而VSCode作为一款强大的代码编辑器,其安装和管理方式也是IT从业者必备的知识点之一。

    VScode好用插件.rar

    本压缩包"VScode好用插件.rar"包含了多款精选的VScode插件,旨在提升开发者的效率和工作体验。下面将详细介绍这些插件的功能和用途: 1. **timonwong.shellcheck-0.18.2.vsix**:这是一个用于检查Shell脚本语法错误...

    vscode常用插件整理汇总

    本文将详细讨论17个VSCode插件,这些插件能够帮助开发者提高编码效率,优化代码质量,并增强编辑器的用户体验。 1. Auto Close Tag:这个插件可以自动为HTML代码中的标签添加闭合标签,减少手动输入的错误和工作量...

    vscode:VSCode插件

    在这个“VSCode插件”主题中,我们将深入探讨VSCode的插件生态系统,以及它们如何提升开发者的效率。 JavaScript是一种广泛使用的客户端和服务器端编程语言,尤其在前端开发中占据核心地位。插件如ESLint可以帮助...

Global site tag (gtag.js) - Google Analytics