React Native的VSCode
不久前,我认识的最有经验的React Native开发人员之一JaniEväkallio发表了一篇很棒的文章,介绍了Formidable于去年三月开始将其用于新的React Native应用程序的所有不同工具。
自从我开始开发React Native以来,这给了我灵感,让我首先去解决一个我遇到的很多问题:选择一个IDE并正确设置它-而不必每隔一个月进行更改。正如我提到以前的文章为阵营本土首发,找到适当的设备开始的右脚上的一个基本组成部分:所以我决定开始新的,按照我自己的建议,并安装Visual Studio代码。
实际上,它是一个出色的编辑器,具有一些惊人的功能。但是要想拥有与我每天键盘敲击生活完全相同的东西,我自然需要对其进行自定义。很多。
我们将需要扩展,很多扩展
接下来将是(几乎)我所做的扩展和设置的完整列表,这些扩展和设置是我将其从“ 很酷 ”转换为“ 好吧,我永远都不会对其进行更改 ” IDE:希望您会发现它很有用,或者至少了解一下要添加到您的设置中的一两个新扩展程序-准备好了吗?
就是那种精神!
为了使您更容易安装此扩展列表,我(终于!)创建了一个VSCode扩展包RN Full Pack。通过安装此程序,您将不需要一一安装;)
第1节:基本原理
使用前面提到的文章作为导航VSCode市场的指南,我决定安装的前几个扩展与帮助我编写良好可读的代码有关:
- React Native Tools
-
Babel JavaScript,
这是正确样式设计的基础,因为我们将使用“ future-JS”(ES6 +)。 -
流语言支持(需要Flow)
为什么需要静态类型检查器?在这里阅读*。这是**它*的介绍。 -
ESLint(显然需要ESLint)
Linter从概念上讲是一种工具,可以遍历您的代码,并告诉您可以做些什么来“更好”地编写它。(这是一个更好的解释) -
更漂亮-JavaScript格式化程序
,实际上是一种游戏改变者-如果您不喜欢它,请尝试深入阅读*。*
这些扩展名很容易解释,但是强烈建议您仔细阅读自述文件以正确设置它们。
如果您很难将它们设置为可以正常工作,那么在此仓库中,我已经为您完成了大部分工作react-native-starting-point
。这将帮助您使用以下核心功能快速入门和运行:检查我在各种配置文件中写的内容,并在设置中复制它们。
并且,当然,我在命令行中添加了VSCode 。
第2节:所有其他功能
实用程序:它们都提供了一些我认为有用的额外小功能。
-
Atom Keymap
以前已经使用Atom了很多,这对我来说是保留已经学过的键绑定的最简单方法。 - Auto Close Tag
- Auto Complete Tag
-
Auto Rename Tag
3扩展名以简化标签管理 -
Color Highlight
颜色使用HEX书写颜色时,可能很难记住确切的颜色-这个小工具可以在您编写颜色的地方预览它。 -
Git Blame
在与许多人一起进行项目时,您需要知道谁做了什么,但是要小心:这是一把双刃剑;) -
Path Intellisense
导入组件/容器/图像时编写路径通常会导致许多错误……但是后来我发现了这个小宝石。 -
Rainbow Brackets
在RN中,您通常最终到处都有很多括号:这提供了一个小的视觉帮助,可以知道其中包含了什么。 -
SVG Viewer 我有时不时需要在代码中添加一些SVG
,并且能够同时看到代码和图像。 -
TODO Highlight
是的,我是经常在文件,项目等之间反弹的人之一-因此我最终在代码注释中写了很多TODO / FIX THIS。这可以帮助我了解(而不是忘记)它们。 -
change-case
能够快速改变我的写作方式。 -
Code Spell Checker
由于我倾向于做错别字和语法错误,这是一种祝福。 -
npm和npm intellisense
生活在node_modules世界中意味着这两个扩展是????
一旦安装了所有这些附加组件,我真的觉得自己很高兴。但是,自然地,我还有另一件事要做……
第3节:主题
每个开发人员都有自己的方式来完善IDE的外观:有些人喜欢主题明亮,而另一些人则希望获得更像终端的UI体验。
我倾向于喜欢深色的颜色,例如我的芽蝙蝠侠。
大概有十亿个不同的主题,当我第一次写这篇文章时,我设置了Code来使用Ayu的幻影版本;我觉得我可以建议的其他两个好主题是 Darktooth 和《 One Dark (Sublime Babel)。
但是,大约一个月以来,我切换到了我的主题:Bimbo。黑暗,但又不是太“活跃”,并且拥有令人惊叹的调色板,我的眼睛为此不断感谢我。(你可以看到它是如何来是这里)
除此之外,我还对IDE外观进行了另外两项修改:使用vscode-icons修改了项目可视化中的小图标,并将这三行添加到了我的用户设置中:
“editor.renderWhitespace”: “boundary”,
“editor.rulers”: [100],
“editor.cursorBlinking”: “solid”`
自从我安装并自定义VSCode以来已经有一段时间了,我不得不承认我认真地认为自己不会再改回Atom或Sublime。我的编码经验现在一直都比较好-但是,我仍然认为这两个IDE是不错的选择,因此,如果您使用它们,不要觉得被搁置一旁;)
让我们所有人成为朋友!
说到评论,您认为我错过了一些非常有用的扩展程序吗?随时分享您自己的列表!我真的很想听听您的反馈和建议:)
而且,一如既往