使用VSCode搭建RN开发环境

鉴于现阶段WebStorm对TS代码的提示太慢,同时又不断的被人安利VSCode.趁着周末时间尝试了一下,效果的确很棒.

什么是VSCode

VSCode全名Visual Studio Code,是微软基于monaco在线编辑器,采用TypeScript,Electron等技术研发的新一代文本编辑器,其具有开源,轻量,高效,跨平台,组件化,易扩展等特性,现已在社区中得到了广泛的认可.

开始之前

本文主要介绍RN开发环境下VSCode的插件及快捷键配置,在开始之前请确保你的电脑上已安装以下命令或工具:

  1. git
  2. node
  3. typescript
  4. react-native
  5. VSCode

插件安装

VSCode本身的功能有限,但VS Market中有非常多好用的插件.我们可以根据项目所需,选择合适的插件来提高生产效率.下边就来列出RN开发中的常用插件,

插件 介绍
AutoCloseTag 自动闭合XML标签
AutoRenameTag 自动重命名XML标签
DocumentThis 快速生成JSDoc
IntelliJ IDEA Keybindings IDEA快捷键配置
Jest JavaScript单元测试工具
Path Intellisense 路径提示
React Native Tools RN开发必备工具,含有运行,断点调试等功能,可以有效的为RN程序debug
ESLint JavaScript 代码规范校验器
TSLint TypeScript 代码规范校验器
vscode-icons 文件管理器Icon
Color Highlight 在编辑器中直接显示#ff00xx的颜色
Setting Sync VSCode 设置同步工具,强烈推荐.有了它,既可以同步自己的多台电脑,也可以为团队提供统一的偏好设置.
Markdown All in One Markdown增强插件
npm Node环境必备插件
npm intellisense JS模块智能提示

自定义快捷键

鉴于笔者一直以来的习惯,本文的快捷键基于Mac标准快捷键IntelliJ IDEA快捷键进行配置.

下边列出了部分DIY快捷键,点击查看更多快捷键配置

快捷键 介绍
cmd+number 侧边栏
cmd+1 开关文件管理器
cmd+2 开关搜索器
cmd+3 打开源代码管理器
cmd+4 打开调试器
cmd+5 打开插件管理器
cmd+ctrl+number 底部栏
cmd+ctrl+1 开关问题窗口
cmd+ctrl+2 开关输出窗口
cmd+ctrl+3 开关调试控制台
cmd+ctrl+4 开关终端窗口

快速开始

你可以使用我的偏好设置清单来初始化你的VSCode,达到快速拥有上述插件及快捷键的能力.

安装Setting Sync插件

插件安装后,使用cmd+,查看当前的偏好设置,中后有如下参数

1
2
3
//setting.json
...
"sync.gist": "",

修改sync.gist参数的值

1
2
3
//setting.json
...
"sync.gist": "a10d26d3ce0db67024d2ad7ce15d12f6",

结束

关于底部栏的快捷键,我本想沿用cmd+1/2/3/4这样的方式来开关 问题,输出,调试控制台,终端,但VSCode目前还没有panelVisible这样的aciton,此外底部栏中的outputFocus,problemFocus这两个aciton的优先级太低,不能屏蔽侧边栏的cmd+1/2/3/4,因此我使用了cmd+ctrl+1/2/3/4这样的方式,如果你有更好的办法获取底部栏的当前状态,欢迎留言告知我: )