8 个给前端的顶级 VS Code 扩展插件

翻译:疯狂的技术宅
原文:https://1stwebdesigner.com/to...

本文首发微信公众号:jingchengyideng
欢迎关注,每天都给你推送新鲜的前端技术文章


微软的 VS (Visual Studio) Code 是一个免费的开源代码编辑器,最近越来越受欢迎。它非常轻巧、灵活,同时也提供了很多强大的功能。它支持绝大多数流行的编程语言,包括PHP、JavaScript、C++ 等。

VS Code 是跨平台的。它不仅能用于 Windows 平台,同时也提供 Linux 和 Mac 版本。下载地址:https://code.visualstudio.com/

但也许最酷的是 VS Code 提供了规模超大的扩展插件,在扩展 商店 有大量的免费扩展可用于支持新语言、调试代码或添加各种其他自定义功能。你可以灵活的配置自己的编辑器,更好地满足日常开发的需要。

下面将给你介绍一些适合前端的顶级 VS Code 扩展插件。

Git增强:GitLens

GitLens

虽然Git功能已内置于 VS Code 中,但 GitLens 能够提供更多的版本控制功能来“增强”你的编辑器。它提供了对代码的深入分析功能,可以向你显示更改时间以及更改后的代码。你甚至可以比较不同的分支、标签和提交。总的来说,这个扩展插件会让你拥有全新的视觉感受。

更多详情:https://marketplace.visualstu...


语法高亮:Beautify

Beautify

你是否非常依赖语法高亮显示?如果是的话,Beautify 正是你需要的。它利用了 VS Code 中已有的 Online JavaScript Beautifier,允许你轻松更改其样式。这意味着你可以根据内容设置缩进、换行和其他细节。

更多详情:https://marketplace.visualstu...


代码检查:ESLint

ESLint

JavaScript 可能很难调试。但 ESLint 扩展可以使这个过程更容易。它能够在执行代码之前帮你指出其中潜在的问题。更强大的是它允许你创建自己的 linting 规则。

更多详情:https://marketplace.visualstu...


调试器:Debugger for Chrome

Debugger for Chrome

对于在运行时期间对代码进行调试的开发人员,Debugger for Chrome 将帮你更好的完成工作。它有许多方便的功能,包括在代码、watches 和控制台中设置断点的功能。另外你可以在 VS Code 中运行Chrome实例,或把调试器附加到单独运行的浏览器实例。

更多信息:https://marketplace.visualstu...


环境增强:React Native Tools

React Native Tools

React 是最引人注目的JS库之一 —— 以至于新的 WordPress 块编辑器(又名 Gutenberg)是基于它建立的。如果你是众多的 React 程序员之一,那么React Native Tools是必不可少的扩展。它增加了运行 react-native 命令的功能,还能帮助你调试自己的代码。

更多信息:https://marketplace.visualstu...


界面主题:One Dark Pro

One Dark Pro

在敲代码时,有一个醒目且养眼的界面主题会很有帮助。毕竟编码过程可以持续好几个小时。 One Dark Pro 把Atom 编辑器中流行的 “One Dark” 主题带到了 VS Code。

更多信息:https://marketplace.visualstu...


代码增强:Bracket Pair Colorizer 2

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 是一个简单的扩展,可以使代码更容易阅读。它可以对匹配括号的对代码着色,使你可以非常直观地确定函数的开始和结束位置。还可以选择要使用的颜色。

更多信息:https://marketplace.visualstu...


视觉增强:vscode-icons

vscode-icons

也许 vscode-icons 是 VS Code 最有效的视觉调整扩展之一。它能够处理你项目中平淡的文件列表,并添加丰富多彩、表示特定语言的图标。这样可以很容易地让你知道代码文件的类型。能够给工作区添加个性化设置是非常受欢迎的功能。

更多信息:https://marketplace.visualstu...


按自己的方式编写代码

VS Code 提供的扩展插件数量惊人,这使其成极具吸引力的编辑器。你可以自由的进行设置,来匹配自己使用的语言和设置喜欢的工作区视觉效果。

此外,它还提供了企业和开源文化的有趣组合。 VS Code 得到了微软的支持,能够确保未来会得到更好的维护。开源社区围绕软件创建了一个欣欣向荣的生态系统,可以称作是企业与开源文化相结合的典范。


欢迎继续阅读本专栏其它高赞文章:


本文首发微信公众号:jingchengyideng

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章



疯狂的技术宅
本专栏文章首发于公众号:前端先锋 。
44.3k 声望
39.1k 粉丝
0 条评论
推荐阅读
为什么浮点数运算会产生误差
以下图的 Python 为例, 0.1 + 0.2 并不等于 0.3,8.7 / 10 也不等于 0.87,而是 0.869999…,真是太奇怪了 🤔

疯狂的技术宅12阅读 6.8k评论 1

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan43阅读 3k评论 14

封面图
44.3k 声望
39.1k 粉丝
宣传栏