Visual Studio Code v.s Atom

by admin on 2020年4月3日

澳门新葡亰信誉平台游戏 1

用作JavaScript开采人士,那一个不能缺少的VS Code插件你都用过啊?

2018/09/03 · 幼功才具 ·
VS code,
插件

初藳出处: 澳门新葡亰信誉平台游戏 ,Michael
Wanyoike   译文出处:蒲陶城官方网址   

近年来,Visual Studio
Code无疑是最风靡的轻量级代码编辑器。它确实从其它轮代理公司码编辑器那借鉴了数不完,最重视是从Sublime和Atom这里。然则它的打响至关心注重要是来自能提供越来越好的性质和稳固的显现。其余,它还提供了如代码智能提示等开拓者极其须求的法力。而那个效率,曾经只在像Eclipse可能Visual
Studio 2017如此的全部集成开辟条件(IDEs卡塔尔(قطر‎中才有。

VS Code的强硬无疑来自于它的插件市镇。多亏掉开源社区,VS
Code以往大约对持有的编制程序语言、框架和开采技巧都有扶持。提供这种支撑的方法是不可胜言的,首要回顾了为一定手艺提供代码片段、语法高亮、Emmet以至智能提暗中提示义。

GitHub 近来一起 Instagram
推出了
Atom-IDE,为其 Atom 编辑器带来了上面这个越来越深度的付出效果与利益:

VS Code插件的系列

在本文,作者最首要介绍特地针对JavaScript开荒者的VS
Code插件。有多数满意此标准的VS
Code插件,当然作者不会都作介绍。相反,小编会器重介绍这么些早已十分盛行并且对JavaScript开荒者来说必不可缺的VS
Code插件。为简便起见,作者把它们分为10类。

在那面只怕有您已经通晓而且正在接纳的插件,但也很有比相当大希望有局地是您据悉过但从没使用过的,作者也可望通过本文能为你简要的介绍一下那几个插件。

  • 活动完成

  • 大纲视图

  • 找出引用

  • 概念跳转

  • 浮动提醒

  • 确诊,如错误和警示提示

1. 代码片段插件

当您首先次安装VS
Code时,它会顺便一些JavaScript和TypeScript的代码片段。在你起来上手今世JavaScript之前,你将须求部分附加的代码片段来帮忙您赶快地编写ES6/ES7代码:

  • VS Code JavaScript(ES6卡塔尔snippets:当前最盛行的,原来就有超过常规120万的下载量。那个插件为JavaScript、TypeScript、HTML、React和Vue提供了ES6的语法帮衬。
  • JavaScript Snippet
    Pack:提供了实用的JavaScript代码片段集结。(这些链接打不开了)
  • Atom JavaScript Snippet:移植自Atom的JavaScript插件。
  • JavaScript
    Snippets:提供了ES6代码片段的聚合。它包含对Mocha、Jasmine等其余BBD(Behavior-Driven
    Development卡塔尔测验框架的支撑。

Atom 诞生已经有三年了。作为一个纵深的 Atom 客商,小编表示友好自从 Atom
问世以来就已运用它,但在过去的多少个月里,他转移到了 Visual Studio
Code,因为 VS Code 更易用,而且提供十三分好的相近 IDE 那样对 TypeScript
的支撑。所以当 Atom-IDE 推出时,小编决定对它们举行一番比较。

2. 语法高亮插件

VS
Code自带很好的JavaScript代码语法高亮。你能够通过设置主旨改造那个颜色。可是,倘让你想要越来越高品位的可读性,就得设置语法高亮的插件了。这里有一部分:

  • JavaScript Atom Grammar:它用Atom编辑器里的JavaScript语法高亮替换VS
    Code原本的。
  • Babel JavaScript:扶持ES201X、React、FlowType以及GraphQL的语法高亮。
  • DotENV:支持.env文件语法高亮,在您使用Node时会极其平价。

Atom-IDE vs. Visual Studio Code

机动完成

在 VS Code 中编辑 TypeScript JSX 代码在导入方面本来就有修正。举例,编写三个React 组件会接触导入另二个 React 组件的提出。Atom
暂未提供那项成效,所以复制粘贴路线仍急需开辟者手动达成。

澳门新葡亰信誉平台游戏 2

在 VS Code 中自行补全 lodash

澳门新葡亰信誉平台游戏 3

在 Atom 中使用 ide-typescript 自动补全 lodash

在别之处,自动补全成效可从多个 React 组件的 Prop Type
中分辨出参数,并自行提出。进一层的活动补全成效须要经过按下 ctrl-space
手动触发。贰个例证是探索 lodash 函数,找出“is”再次来到 lodash
包,并非分别单独的函数。那是 VS Code 中的叁个自动成效。

确诊(错误、警示提醒)

Atom 使用守旧的 linte 工具以错误和警戒的花样提供确诊。要在 TypeScript
文件中分辨错误,必需先保存文件,然后运转 linter。比较之下,VS Code
无需保存文件便可自行报告错误。

澳门新葡亰信誉平台游戏 4

Atom 的确诊与 Facebook 的 Nuclide 相像

Atom-IDE 倒霉的地点在于它与现成的 linter 工具不一致盟。要触发
ide-typescript 的 linting,必需先禁用 Ruby
linter。除非未来会全体更改,不然 Atom-IDE 不会形成多语言的编排技术方案。

澳门新葡亰信誉平台游戏 5

索求引用

Atom 在 TypeScript React 文件中的查找引用方面做得至极好,可透过按下
alt-shift-cmd-F
进行接触。看起来那疑似叁个笨重的快速方式,但它能够经过首荐项中的“find-references:activate”命令进行双重照射。VS
Code
中包含的此成效那样展现:将鼠标悬停在一个引用中将优秀突显那个文件中的全数其余援引。

概念跳转和浮泛提示

浮动提醒只会在有些时候生效,并且品种中的 React 组件并不能够被辨认,但
React props
会指向它们的定义。不幸的是,点击踏向定义只会将光标放置于导入语句上,还需重新点击技术进来定义本人。

澳门新葡亰信誉平台游戏 6

Atom中 的定义跳转将本着 TypeScript 的导入

那是调治或渐渐进行代码时遇上的标题。可是,有第一方的帮助是春风得意的,而且那象征会任何时候间的推迟而更进一竿。

3. 代码检查实验插件

以渺小的不快高效编写JavaScript代码,必要一个代码检查评定(linter卡塔尔(قطر‎工具。它免强团队有着成员依据一定的代码标准。ESLint是最受招待的,它帮助广大代码风格,包蕴Standard、Google和Airbnb的JavaScript代码标准。这里是最盛行的VS
Code代码检查插件:

  • ESLint:那些插件把ESLint集成到VS
    Code中。它是最流行的代码检查实验插件,已有超出670万下载量。它的规行矩步在.eslintrc.json里配置。
  • JSHint:基于JSHint的代码检查评定插件。在类型跟目录下利用.jshintrc文件作为其配备。
  • JavaScript Standard
    Style:零配置和严厉法则的代码检验,强逼行使StandardJS法则。

如果你想查看对种种代码检查评定优劣势的归咎,能够来拜访大家对代码检查测量检验工具的可比。

结论

就此,你是否合宜下载 Atom Beta 并启用
Atom-IDE?假若有勇气和好奇心,小编推荐大家去心得一下。另一面,我表示本身在常常支付中使用
VS Code 仍旧超快,何况 VS Code 有对微软 TypeScript 语言的第一方协理。

来自:ATOMIC
OBJECT

4. Node插件

每多个JavaScript项目都急需最少叁个Node
package,除非您是这种向往以艰难的方法行事的人。这里有部分VS
Code插件,能帮你更便于的管理Node模块。

  • npm:用package.json来校验安装的npm包,确定保证卫安全装包的版本正确,对贫乏package.json文本的包照旧未安装的包给出高亮提醒。
  • Node.js Modules
    IntelliSense:提供JavaScript和TypeScript导入注解时的机动补全。源码:vscode-node-module-intellisense。

澳门新葡亰信誉平台游戏 7

  • Path
    英特尔liSense:它实在与Node未有关联,不过你肯定须要对地点文件的智能提示,这几个插件会自行补全文件名。
  • Node exec:允许你用Node履行业前文件或许选中的代码。
  • View Node Package:利用此插件可火速查看Node包源码,让你直接在VS
    Code中开垦Node包的代码库或文书档案。
  • Search
    node_modules:通常node_modules文本夹不在暗许的查找范围内,这一个插件允许你追寻它。源码:vscode-search-node-modules。

澳门新葡亰信誉平台游戏 8

  • Import Cost:突显导入的包的深浅。源码:import-cost。

澳门新葡亰信誉平台游戏 9

5. 代码格式化插件

一时,你开掘自个儿会对原先写过的风格不太美貌的代码做格式收拾。为了节约时间,你能够设置以下任何的VS
Code插件,来快速地格式化和重构现成代码:

  • Beatufy:一个jsBeautifier的插件,支持JavaScript、JSON、CSS和HTML。可通过.jsbeautifyrc文本自定义。它是最风靡的格式化学工业具,近期有230万的下载量。
  • Prettier Code
    Formatter:利用Prettier的支撑JavaScript、TypeScript和CSS的插件,近年来有逾越150万的下载量。
  • JS
    Refactor:提供数不尽重构JavaScript代码的实用方法和操作,比如抽取变量和章程,把现成代码转为选用箭头函数和模板字符串的对等情势,导出函数等。
  • JavaScript
    Booster:一款了不起的代码重构工具。具备要求代码操作,例如把var转为const或者let,去除多余的else话语,合併注明和先导化。其灵感多量出自WebStorm的误导。源码:vscode-javascript-booster。

澳门新葡亰信誉平台游戏 10

6. 浏览器插件

除非你是在用JavaScript写调节台程序,不然你多半会在浏览器中推行你的JavaScript代码。那表示,你会频仍地刷新浏览器以调查历次你更新代码的功力。这里有部分工具,能非常大地压缩你付出时的这种重新流程,而不是历次都手动刷新浏览器:

  • Debugger for
    Chrome:在编辑器中打断点,令你轻轻便松地在Chrome里调节和测量试验JavaScript。源码:vscode-chrome-debug。

澳门新葡亰信誉平台游戏 11

  • Live
    Server:开启本地开辟时服务器,为静态和动态页面提供实时刷新作用。源码:vscode-chrome-debugvscode-live-server。

澳门新葡亰信誉平台游戏 12

  • Preview on Web Server:提供web服务器和实时预览效率。
  • PHP Server:对测验只好在客商端运营的JavaScript代码很有用。
  • Rest Client:相较于用浏览器照旧二个CU中华VL程序来测验你的REST
    API端点,你能够设置那些工具,直接在编辑器里相互性地发HTTP须求。

7. 框架类插件

对于大多数项目,你会动用合适的框架去构建你的代码,以调整和减弱支出时间。VS
Code通过插件对大多数主流框架都做了协理。不过,仍然有一对一定框架未有到手完全的支撑。上面是一些提供了强硬效用的VS
Code插件。

  • Angular 6:提供Angular 6的代码片段,扶植TypeScript、HTML、Angular
    Material ngEscortx、KoleosxJS和Flex
    Layout。近年来有220多万的下载量和173个Angular代码片段。
  • Angular v5
    snippets:提供指向性TypeScript、SportagexJS、HTML和Docker文件的代码片段。近日有270多万的下载量。
  • React Native/React/Redux snippets for
    es6/es7:提供对这个框架的ES6/ES7语法的代码片段。
  • React Native Tools:为React
    Native框架提供代码智能提醒、命令行工具和调节和测量检验天性。
  • Vetur:为Vue框架提供语法高亮、代码片段、Emmet、代码检查实验、智能提示和调节和测验扶植。它包罗很好的昭示在GitBook上的文书档案。
  • Ember:为Ember提供了命令行帮助和智能提示。安装完后,全数ember cli的下令可一直在VS
    Code自个儿的命令行列表中动用。
  • Cordava
    Tools:援救Cordava插件和Ionic框架,提供依附Cordova的系列的智能提示、调节和测量检验已经别的特色的帮衬。
  • jQuery Code
    Snippets:提供了超过1贰20个jQuery的代码片段,使用jq前缀来激活。

8. 测验类插件

测量检验是软件开拓中的关键环节,对于临盆阶段的花色以来更是如此。你可以通过翻阅大家的指南-JavaScript测量检验:单元测验vs 作用测量检验 vs
集成测量试验-来获取对JavaScript测量检验的二个大约。这里有点照准测量检验的VS
Code插件:

  • Mocha
    sidebar:利用Mocha库为品种提供单元测试。那么些框架帮你直接在代码里跑测验,把错误新闻以装饰器形式显得出来。
  • ES Mocha
    Snippets:提供ES6语法的Mocha代码片段。那个插件的最首要在于利用箭头函数,尽大概减弱花括号的行使,保持代码的紧凑。可通过安装允许使用分号。
  • Jasmine Code Snippets:针对贾斯敏测验框架的代码片段。
  • Protractor
    Snippets:针对Protractor端到端测量试验框架的代码片段。补助JavaScript和TypeScript。
  • Node
    TDD:为Node和JavaScript项目提供测量试验驱动开拓的支撑。能在源码的立异后,马上触发自动化测验的营造。源码:node-tdd

9. 别的棒棒的插件

自己把下一群VS
Code的插件归为”厉害的”(awesome卡塔尔这一类,因为这么些描述下不为例。

  • Quokka.js:非常了得的调护医疗工具,为JavaScript提供了高速营造原型的演习场,并且附带有很好的文书档案。
  • Paste as
    JSON:神速地将JSON数据转为JavaScript代码。源码:quick-type。

澳门新葡亰信誉平台游戏 13

  • Code
    Metrics:那是另二个十分棒的插件,计算JavaScript和TypeScript代码中复杂度。源码:codemetrics。

澳门新葡亰信誉平台游戏 14

澳门新葡亰信誉平台游戏 15

澳门新葡亰信誉平台游戏 16

10. 插件包

当今我们来到了最后一类,笔者想令你通晓,VS
Code市集有有一个插件包的分类。本质上,它们是相关联的局地VS
Code插件的成团,打成一个包,方便安装。这里有些较好的:

  • Nodejs Extension Pack:这些包里有ESLint、npm、JavaScript(ES6)snippets、Search node_modules、NPM IntelliSense和Path
    IntelliSense。
  • VS Code for Node.js – Development Pack:那几个蕴藏NPM
    英特尔liSense、ESLint、Debugger for Chrome、Code
    Metrics、Docker和Import Cost。
  • Vue.js Extension
    Pack:一些Vue和JavaScript插件的汇集。方今它包罗10个VS
    Code的插件,有部分以前大家向来不关系的,举例auto-rename-tag和auto-close-tag。
  • Ionic Extesion
    Pack:这些包里有针对性Ionic、Angular、CRUISERxJS、Cordova和HTML开采的插件。
  • SpreadJS纯前端表格组件:可放置你系统的在线Excel,作用布局与
    Excel 中度相似,完全相配 Excel 的 450 种公式和 92 种图表。

总结

VS
Code具有多量的高水平插件,那让它在JavaScript开垦者群众体育辽宁中国广播公司受接待。写JavaScript代码,再未有比以后更便于了。

像ESLint这样的插件,扶植你防止代码中的何足为奇错误;Debugger for
Chrome,补助你更易于地调节和测量检验代码;带有智能提示的Node.js插件辅助您不利援引模块;像Live
Server和REST
client那样的可用工具,令你在实现职业时减弱了对表面工具的信赖;再例如SpreadJS纯前端表格控件,让在线Excel停放您的选拔。全体那个工具,都小幅地加快了您的迭代流程。

自己梦想这个列表让您接触到新的VS Code插件,对你的职业流程有帮带。

1 赞 收藏
评论

澳门新葡亰信誉平台游戏 17

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图