React Native的VSCode

不久前，我认识的最有经验的React Native开发人员之一JaniEväkallio发表了一篇很棒的文章，介绍了Formidable于去年三月开始将其用于新的React Native应用程序的所有不同工具。

自从我开始开发React Native以来，这给了我灵感，让我首先去解决一个我遇到的很多问题：选择一个IDE并正确设置它-而不必每隔一个月进行更改。正如我提到以前的文章为阵营本土首发，找到适当的设备开始的右脚上的一个基本组成部分：所以我决定开始新的，按照我自己的建议，并安装Visual Studio代码。

实际上，它是一个出色的编辑器，具有一些惊人的功能。但是要想拥有与我每天键盘敲击生活完全相同的东西，我自然需要对其进行自定义。很多。

我们将需要扩展，很多扩展

接下来将是（几乎）我所做的扩展和设置的完整列表，这些扩展和设置是我将其从“ 很酷 ”转换为“ 好吧，我永远都不会对其进行更改 ” IDE：希望您会发现它很有用，或者至少了解一下要添加到您的设置中的一两个新扩展程序-准备好了吗？

就是那种精神！

为了使您更容易安装此扩展列表，我（终于！）创建了一个VSCode扩展包RN Full Pack。通过安装此程序，您将不需要一一安装；）

---

第1节：基本原理

使用前面提到的文章作为导航VSCode市场的指南，我决定安装的前几个扩展与帮助我编写良好可读的代码有关：

1. React Native Tools
2. Babel JavaScript，
   这是正确样式设计的基础，因为我们将使用“ future-JS”（ES6 +）。
3. 流语言支持（需要Flow）
   为什么需要静态类型检查器？在这里阅读*。这是**它*的介绍。
4. ESLint（显然需要ESLint）
   Linter从概念上讲是一种工具，可以遍历您的代码，并告诉您可以做些什么来“更好”地编写它。（这是一个更好的解释）
5. 更漂亮-JavaScript格式化程序
   ，实际上是一种游戏改变者-如果您不喜欢它，请尝试深入阅读*。*

这些扩展名很容易解释，但是强烈建议您仔细阅读自述文件以正确设置它们。

如果您很难将它们设置为可以正常工作，那么在此仓库中，我已经为您完成了大部分工作react-native-starting-point。这将帮助您使用以下核心功能快速入门和运行：检查我在各种配置文件中写的内容，并在设置中复制它们。

并且，当然，我在命令行中添加了VSCode 。

---

第2节：所有其他功能

实用程序：它们都提供了一些我认为有用的额外小功能。

1. Atom Keymap
   以前已经使用Atom了很多，这对我来说是保留已经学过的键绑定的最简单方法。
2. Auto Close Tag
3. Auto Complete Tag
4. Auto Rename Tag
   3扩展名以简化标签管理
5. Color Highlight
   颜色使用HEX书写颜色时，可能很难记住确切的颜色-这个小工具可以在您编写颜色的地方预览它。
6. Git Blame
   在与许多人一起进行项目时，您需要知道谁做了什么，但是要小心：这是一把双刃剑;）
7. Path Intellisense
   导入组件/容器/图像时编写路径通常会导致许多错误……但是后来我发现了这个小宝石。
8. Rainbow Brackets
   在RN中，您通常最终到处都有很多括号：这提供了一个小的视觉帮助，可以知道其中包含了什么。
9. SVG Viewer 我有时不时需要在代码中添加一些SVG
   ，并且能够同时看到代码和图像。
10. TODO Highlight
    是的，我是经常在文件，项目等之间反弹的人之一-因此我最终在代码注释中写了很多TODO / FIX THIS。这可以帮助我了解（而不是忘记）它们。
11. change-case
    能够快速改变我的写作方式。
12. Code Spell Checker
    由于我倾向于做错别字和语法错误，这是一种祝福。
13. 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是不错的选择，因此，如果您使用它们，不要觉得被搁置一旁;）

让我们所有人成为朋友！

说到评论，您认为我错过了一些非常有用的扩展程序吗？随时分享您自己的列表！我真的很想听听您的反馈和建议:)

而且，一如既往

编码愉快！