vscode 显示多个文件_优秀的 VS Code 前端开发扩展
原文作者: Ankur Biswas
翻译:weakish@LeanCloud
我留意到,网上有不少关于 VS Code 的文章,然而这些文章提到的扩展大部分都让我失望。所以我决定编写我个人使用的插件列表。
前端为主的开发者,想高效使用 Visual Studio Code,我觉得这个列表会很有帮助。其中一些插件你大概已经装了 - 因为它们是被推荐最多的扩展 - 但还有一些你也许没装。
方便阅读
Beautify - 放大标记,调整间距,让 HTML、CSS、JS 更易阅读。
Better Comments - 在代码中创建对人类更友好的注释。我一直用这个扩展。它是我们研发团队必备扩展。
Bookmarks - 助你浏览代码,在重要位置之间方便快速地移动。搭配 MetaGo 使用,写代码的时候我基本不用鼠标。
MetaGo - 让通过键盘移动光标和选取内容快得不像话,彻底改变了我使用 VS Code 的方式。
Log File Highlighter - 顾名思义,让 VSCode 支持 .log 文件。读日志文件再也不觉得费眼了。
Guides - 有了这个扩展,再也不需要折叠、展开那些该死的元素来搞清楚缩进了。搭配之前提到的 Beautify 和下面的 Rainbow Brackets 使用,效果更佳。
Rainbow Brackets - 高亮当前括号对,其他括号使用不同配色,让定位变得极为容易。重度 JS 开发者的最爱。
Image Preview - 在 gutter 和光标悬浮时显示图片预览。检查是否引用了正确的图片/图标的关键所在。
GitLens - 无疑是最常用的扩展之一;VS Code 不可或缺的扩展,让 Git 体验好上太多。搭配 .gitignore 和 .diff 插件可以补足功能。
快速编写
CSS Peek - 借鉴了 Bracket 的 CSS Inline Editors。VS Code 现在有了我最爱的 Brackets 特性之一。
stylelint - 既然我们 lint JS 代码,为什么不同时 lint LESS/SASS/CSS 代码呢?这个扩展有助于快速清理写得比较随意的 CSS。
Live Server - 最佳本地开发服务器,支持实时重载静态和动态页面(甚至支持 PHP!)
Version Lens - 将 package.json 中指定的依赖和开发依赖更新到最新版本。由 Mihail 推荐。
DotENV - 为 .env 文件增加高亮支持,有时候我需要推送代码到 Heroku、Netlify……
美观抓屏
Polacode - 高亮代码并抓屏,展示下你的代码配色方案。想在教程或文档中提供代码示例时很有用。
多个实例
Settings Sync - 使用私密 gist 保存配置文件,在多个 VS Code 实例间同步设置、代码片段、主题、文件图标、任务、键绑定、工作区、扩展。这个扩展让我只需使用两个简单命令,便可同步笔记本、工作台式机、家用台式机的 VS Code。
EditorConfig - 使用 .editorconfig 文件中的配置覆盖用户/工作区配置,让开发团队在同一个项目内统一特定配置。
虽然我还装了很多其他插件,不过它们主要针对我使用的环境(前端 web + Azure 云),所以就这样吧。我希望,在你日常使用 VS Code 的过程中,这些扩展能有帮助。
值得一提
根据读者留言反馈,我新增了一些值得列入的扩展:
Import Cost - 显示 import 语句的文件尺寸开销。由 miku86 推荐。
Window Colors - 运行多个 VS Code 实例?每个窗口使用一种颜色,免得忘了哪个项目在哪个窗口里。由 Jefry Pozo 推荐。
Prettier - 美化代码,使其更为清晰。Stackoverflow 使用 Prettier 显示代码片段。不过,它无法处理 .js/.ejs/.jade/.pug模板中的 HTML,所以在很多静态站点生成器下效果不佳。
你早就装了这些扩展?你是否喜欢或者讨厌这些扩展?有其他我没提到的值得一试的插件?欢迎留言!
end
LeanCloud,领先的 BaaS 提供商,为移动开发提供强有力的后端支持。更多内容请关注「 LeanCloud 通讯」
vscode 显示多个文件_优秀的 VS Code 前端开发扩展相关推荐
- vscode css智能补全_强大的 VS Code入门
简介 在 Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 系统外,最大的惊喜莫过于宣布推出免费跨平台的 Visual Studio Co ...
- 光盘显示0字节可用_正点原子STM32F4/F7水星开发板资料连载第四十六章 汉字显示实验
1)实验平台:正点原子水星 STM32F4/F7 开发板 2)摘自<STM32F7 开发指南(HAL 库版)>关注官方微信号公众号,获取更多资料:正点原子 3)全套实验源码+手册+视频下载 ...
- 将chart放入panel中出现滚动条_聊天场景在web前端开发中的体验与优化
在日常工作中,如下图的聊天场景是不是很熟悉,没错就是我们再熟悉不过的 QQ 和微信,一个正常的聊天界面大致上是长这个样子的: 这种聊天窗口的消息流有两个明显的特点: 最新的消息和滚动条初始位置需要在列 ...
- 物联网mqtt前端怎么开发_物联网世界中的前端开发
物联网mqtt前端怎么开发 It's IoT Week at SitePoint! All week we're publishing articles focused on the intersec ...
- vscode中打开pdf文件_提取pdf文件中的文字
环境说明 windows10系统 python3.6版本 安装 网上很多说需要安装pdfminer3k和pdfminer3k.six,我尝试了先安装pdfminer3k后安装pdfminer3k.si ...
- 自动化yaml文件_从YAML到TypeScript:开发人员对云自动化的看法
自动化yaml文件 The rise of managed cloud services, cloud-native, and serverless applications brings both ...
- h5页面如何预览excel文件_如何使用JavaScript实现前端导入和导出excel文件?(H5编辑器实战复盘)...
前言 最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
- html5默认加载s文件夹,『总结』web前端开发常用代码整理
IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. 条件注释只能用于IE5以上,IE1 ...
- 前端如何实现音乐盒胶盘的转动_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
最新文章
- Python教程:推荐一个比 open 读文件还好用、方便的库
- mysql的驱动connect放在哪里_Python连接数据库两种方法,QSqlDatabase,pymmsql,驱动名...
- boost::set_difference相关的测试程序
- javaScript如何监听浏览器关闭事件
- lua如何打印行号_LUA教程错误信息和回跟踪(Tracebacks)-34
- 首页图标九宫格 html5,html5九宫格布局的网格菜单代码
- 电脑向linux服务器传输文件,windows如何通过ssh工具向linux服务器上传和下载文件?...
- .net core 正则表达式 获取 等号后面的值_Python3 正则表达式
- 自定义控件 一 创建最简单的控件
- 国庆风头像一键制作网站源码
- thinkphp htmls.php,ThinkPHP静态缓存简单配置和使用方法详解
- python转移矩阵_使用Python / Numpy中的单词构建转换矩阵
- 为什么不使用Go语言呢?
- 工欲善其事必先利其器——网络工程师必备六款软件(收藏下载❤️)
- UE4 C++最基础的API
- LeetCode—面试题:移除重复节点(哈希集合)
- 港科百创|【未磁科技】勇夺百万大奖,2021年度总决赛圆满收官!香港科大-越秀集团百万奖金国际创业大赛年度总决赛成功举办!...
- Android面试,给正在找工作的安卓攻城师们 ... ...
- 【编程实践】Python编程手册 《Python极简教程》
- 减肥盘货之忙女人减肥美食打算