推荐一波 VSCode 插件(前端方向),好用到让你写代码感动到落泪!

题图:By Pawel Caerwifnski

Hi,大家好,我是承香墨影!

VSCode 微软推出的一款开源的跨平台编辑器,定位和 Sublime Text 有点像,早年 VSCode 刚上架的时候试用了一番,给我印象最深的就是它打开大文件非常的快,Sublime 会卡死的大文件,使用 VSCode 也可以打开,微软出的 IDE 还是很贴心的。

随着几年的发展,VSCode 的插件也越来越丰富了,很多开发者用它来做前端、Python、Go等等的开发环境。正是因为 VSCode 丰富的插件,让他变成了一个免费而好用的 IDE。

今天推荐几个 VSCode 在前端开发方向的一些好用的插件,让你效率倍升,写出能感动自己的代码。

Auto Close Tag

输入 HTML/XML 的开始标签,自动完成对应的关闭标签。

插件下载地址:

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Auto Rename Tag

在重命名 HTML/XML 标签的时候,自动修改闭合标签。

插件下载地址:

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Code Runner

在 VSCode 中,直接执行选中的代码。

插件下载地址:

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

Beautify

在 VSCode 中,格式化 JavaScript、JSON、CSS、Sass 和 HTML 代码。

插件下载地址:

https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Better Comments

在 VSCode 中,通过 Better Comments 创建更加人性化的注释。根据不同的 Level,生成不同颜色的注释效果,有效提高我们的注意力。

插件下载地址:

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Bookmarks

为代码添加书签标记。看大型项目,调试 Bug 的时候,非常方便的帮我们屡清楚逻辑。

插件下载地址:

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

Bracket Pair Colorizer

用不同的配色,标记不同层级的括号,让层级更清晰。

插件下载地址:

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Code Spell Checker

拼写检查,可以避免 Coding 过程中的英文拼写错误,注释中的单词也会检查。

插件下载地址:

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Debugger for Chrome

在 VSCode 中,直接打断点调试 node.js 代码。

插件下载地址:

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

GitLeng - Git supercharged

一款 Git 扩展插件,方便管理项目。


插件下载地址:

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Path Intellisense

引用资源的时候,自动完成引用路径。

插件下载地址:

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

npm Intellisense

让 inport npm modules 可以自动完成。

插件下载地址:

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Settings Sync

方便通过 GitHub Gist 在不同设备之间同步 VSCode 的配置信息。

插件下载地址:

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

vscode-fileheader

一款国产插件,自动生成文件头部信息,比如:作者、创建时间、更新时间等等,并且会自动更新。

插件下载地址:

https://marketplace.visualstudio.com/items?itemName=mikey.vscode-fileheader

vscode-icons

给不同类型的文件和文件夹,添加好看的 ICON,方便区分。


插件下载地址:

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

今天先到这里。

后续再找到什么好用的插件,再继续推荐给大家。

各位在开发中有什么顺手的 VSCode 插件,欢迎在留言区分享。


联机圆桌」????推荐我的知识星球,一年 50 个优质问题,上桌联机学习。

公众号后台回复成长『成长』,将会得到我准备的学习资料,也能回复『加群』,一起学习进步;你还能回复『提问』,向我发起提问。

推荐阅读:

Google 工程师解密“猜画小歌” | 图解:HTTP 范围请求 | Android P 适配经验 | 技术创业选择清单 | HTTP传输编码 | 什么正在消耗你? | HTTP 内容编码 | 图解 HTTP 缓存 | 聊聊 HTTP 的 Cookie | 辅助模式实战 | Accessibility 辅助模式 | 小程序 Flex 布局 | 好的 PR 让你更靠谱 | 密码管理之道

听说喜欢留言和分享的人,会有好运来哦

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值