用好这7个VS Code插件，前端编程效率蹭蹭涨

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

环境同步：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包含一个用于定义代码格式的文件和一批编辑器插件，这些插件是让编辑器读取配置文件并以此来格式化代码。如果大家对前端感兴趣的话，可以加一下我们的学习交流抠抠群哦：649，825，285，免费领取一套学习资料和视频课程哟~

点击安装：

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

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

用好这7个VS Code插件，前端编程效率蹭蹭涨相关推荐

Visual Studio Code插件-前端工程师开发必备
前端开发工具 1.Auto Rename Tag 自动重命名 HTML或XML 标签 2.Auto Close Tag 自动添加 HTML/XML 关闭标签 3.Path Intellisense 智 ...
离线安装Visual Studio Code插件
在使用Visual Studio Code 开发时候,有时可能会碰到需要离线安装插件的情况.这时候就需要单独下载插件包,本文就以C/C++插件包为例说明如何离线安装Visual Studio Code ...
vscode插件可以直接复制到_一款可以让代码“跳舞”的 VS Code 插件：Power Mode
VS Code 插件市场最近上架了一款名为 "Power Mode" 的插件.这款插件可以让开发者的代码跳起曼妙的舞蹈 ,比如下方的颗粒特效! 颗粒特效这款插件启用方式也很简单, ...
作为JavaScript开发人员，这些必备的VS Code插件你都用过吗
本文翻译自:https://www.sitepoint.com/vs-code-extensions-java-developers/ 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解 ...
程序员请收好：10个非常有用的Visual Studio Code插件
作者 | Daan 译者 | Elle 出品 | CSDN(ID:CSDNnews) [导读]一个插件列表,可以让你的程序员生活变得轻松许多.无论你是经验丰富的开发人员还是刚刚开始第一份工作的初级开发 ...
程序员请收好：10个非常实用的 VS Code 插件
点击上方视学算法,选择设为星标编译:CSDN-Elle,作者:Daan 阅读文本大概需要 5 分钟无论你是经验丰富的开发人员还是刚刚开始第一份工作的初级开发人员,你都会想让自己的开发工作尽可能轻松 ...
程序员请收好：10个非常有用的 Visual Studio Code 插件!
一个插件列表,可以让你的程序员生活变得轻松许多. 作者 | Daan 译者 | Elle 出品 | CSDN(ID:CSDNnews) 以下为译文: 无论你是经验丰富的开发人员还是刚刚开始第一份工作的 ...
VS code 插件配置手册
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达 VS code 插件配置手册 C/C++ Tools插件---C/ ...
visual studio 代码提示插件_程序员请收好：10个非常实用的 VS Code 插件
关注上方"数据挖掘工程师",选择"星标公众号", 关键时间,第一时间送达! 编译:CSDN-Elle,作者:Daan 无论你是经验丰富的开发人员还是刚刚开始第一 ...

用好这7个VS Code插件，前端编程效率蹭蹭涨

用好这7个VS Code插件，前端编程效率蹭蹭涨相关推荐

最新文章

热门文章