资讯专栏INFORMATION COLUMN

为什么我选择使用 VS Code进行前端开发?

liaosilzu2007 / 2304人阅读

摘要:我们团队有大部分人已经在用了,所以这周五在组内做了一个小分享,来发掘一些提高开发效率的小技巧。为什么选择在刚出来的时候,我就开始使用了如何评价理由很简单开源,免费,颜值高微软出品,实力保证。

没错,我就是来给大家安利 VS Code 的。

对前端来说,这是一款性感无比的 IDE,哦不对应该是编辑器。我们团队有大部分人已经在用了,所以这周五在组内做了一个 VS Code 小分享,来发掘 VSC 一些提高开发效率的小技巧。我相信已经有不少前端在使用它了,所以大家更有必要一起分享下日常神操作了。

为什么选择 VS Code ?

在 VSC 刚出来的时候,我就开始使用了(如何评价 Visual Studio Code?),理由很简单:

开源,免费,颜值高;

微软出品,实力保证。

然而用了一阵发现还是 Sublime 好用,一是刚出来功能不完善,Sublime 一些技巧无法迁移过来,另外就是插件太少,实际开发略显吃力。然随着后面 VSC 一次次更新,不少新 features 着实让人眼前一亮:微软这是在用心做产品呐!以至于现在已经没有什么可以抱怨的了(有趣的是当天尤大也发微博说转投 VSC 了,可以预见这款产品未来会越做越好,方向选对了,就不怕路走错)。

而作为前端,VSC 简直就是为我们量身定制:

VSC 本身是基于当前大火的 TS 来写的,所以对于 TS 的支持自然很好;又是基于 electron 开发,底层 Node.js 对前端来说再熟悉不过了。所以,如果你发现哪里不好用,你可以自己写插件呐!如果一个满足不了,那就写两个。

而对于 VSC 的扩展开发也是相当友好,你只需要5步:

申请一个 Visual Studio Team Services Account;

添加一个 Personal access token;

创建一个发布账号,用来发布你的扩展即可(以上操作完全免费);

使用 VSC 的 Yeoman 脚手架初始化你的扩展项目,之后就是调用官方提供的 API 开发你的扩展即可,就跟开发 Chrome 插件一样;

使用官方发布工具vsce来发布你的扩展到扩展市场,之后别人就可以搜到你的扩展啦!

所以对于前端来说,都是我们熟悉的技术栈,你可以作为一个使用者,也可以转身变成一个开发贡献者!

而对于 Sublime 和 WebStorm 来说就没有这么方便了,当然你也可以用 Python 或者 Java 来贡献插件,不过对于前端还是稍稍有些门槛。如果仅仅是使用的话,WebStrom 确实也很好用,毕竟人家收了钱,而且你最好买一个高配的电脑,否则代码撸多了,会卡到你怀疑人生。

一些实用扩展和技巧

这才是重点。先贡献下自己的部分扩展列表:



各位要是有啥好用的扩展也分享一下呐,大家一起 get 新姿势!(有趣的是新版的 VSC在扩展栏增加了推荐栏,这样大家能更方便的发现一些精品)

强烈推荐的几个插件:

Complete JSDoc Tags(好的注释不仅对项目有用,对 VSC 的代码智能感知也很有用)

Dash(如果你购买了 Dash App 的话)

EditorConfig for VS Code(统一的编辑配置对团队开发很有用)

ESLint(让 VSC 内置 ESLint)

Git History(装完输入 git log有惊喜)

Git Lens(让本就集成了 git 的 VSC 更加强大)

Path Intellisense(文件路径感知扩展)

Project Manager(多项目管理神器)

Settings Sync(将你所有的编辑器配置同步到 gist,省得在新设备上重新捣鼓)

详细的介绍我就懒得写了,大家自己去探索发现吧,一些有用的资源:

官方文档 永远是最有用的,或者你也可以选择中文翻译版;

这里列出了更多好玩的插件awesome-vscode;

一些小技巧:

每次更新 VSC 后,好好看下更新日志,有惊喜;

有事没事逛逛扩展市场,有惊喜;

有时间仔细看看官方文档,有惊喜;

好好研究下控制面板和快捷键,你会发现很多命令不用记;

VSC 本身是默认 git 工作流的,基于 git 项目进行开发体验更佳,不要让自己的工作区处于非 git repo 文件夹。

总结

不管你以前是用 Sublime 还是 WebStorm,又或者是 Atom 和 Eclipse,现在迁移到 VS Code 都是灰常方便的:

最后,我为什么要安利 VS Code?

毕竟用的人越多,插件市场越丰富,解决问题更快捷,交流起来更愉快嘛!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87360.html

相关文章

  • [译] 使用 VS Code 加速前端开发

    摘要:在对比我最近几个月所用的开发工具后,我发现了一些惊人的东西。永远不停止使用。将警告未使用的代码。预检查使用,,和非常有用。不再需要使用开启服务器,创建应用程序,并打开浏览器。尝试使用别的东西,立即出现错误。 原文:Supercharging Frontend Development with VS Code 作者:zachcodes 过去几天,为了在开发 GraphQL / Rea...

    keithxiaoy 评论0 收藏0
  • Visual Studio Code 前端调试不完全指南

    摘要:接下来的内容将从以下几方面进行展开调试前端代码调试通过启动的服务器要使用的调试功能,首先就得配置文件。调试前端代码通过调试前端代码主要依赖于一个插件,该插件主要利用所开放出来的接口来实现对其渲染的页面进行调试。 本文最初发布于我的个人博客:咀嚼之味 Visual Studio Code (以下简称 vscode) 如今已经代替 Sublime,成为前端工程师们最喜爱的代码编辑器。它作为...

    dongfangyiyu 评论0 收藏0
  • vim 入坑指南

    摘要:助记符上的所有定义的快捷键都是有一定的意义的,在这里我先把常用的一些列出来。我刚开始学的时候,还不知道有那些助记符,基本完全靠死记硬背,我就是用一张纸,然后把命令手写抄到纸上,放在我的电脑旁,忘了就马上拿来看看,别说,效果还挺好的。 个人站点:桃园 0. 前言 0.1 简介 vim 被誉为『编辑器之神』,与之同时代的 emacs 被誉为『神之编辑器』。可以看得出 vim 在编辑器的地...

    zhou_you 评论0 收藏0
  • 前端开发 VS Code 上手使用

    摘要:如果想配置开发工具面向前端及开发人员的配置如果想配置开发工具配置及使用技巧所谓网红编辑器,我觉得比来的更爽,因为的所有操作和插件,对于来说也就是一个插件就能无缝兼容。作为一个前端开发,开箱即用的代码编辑高亮提示都十分友好。 如果想配置 sublime 开发工具 => 面向web前端及node开发人员的vim配置 如果想配置 vim 开发工具 => sublime配置及使用技巧 所谓网红...

    Ocean 评论0 收藏0
  • 一些你所不知道的VS Code插件

    摘要:摘要你所不知道的系列。允许你写入缩写代码并返回的相应标记,目前已经内置,所以不用配置了。自从年双十一正式上线,累计处理了亿错误事件,付费客户有金山软件百姓网等众多品牌企业。摘要: 你所不知道的系列。 原文:提高 JavaScript 开发效率的高级 VSCode 扩展之二! 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 作为一名业余爱好者、专业人员,甚至是每月只有一次编...

    Near_Li 评论0 收藏0

发表评论

0条评论

liaosilzu2007

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<