下载VSCode

https://code.visualstudio.com/Download

安装插件

cmd+shift+p,输入install(需要优先改成英文界面),安装插件:

1. ESLint: js,jsx,es6代码语法检测,配置方法可以查看我另外一篇文章,方法相通:如何配置Eslint检测React代码
2. ReactNativeTools: 微软官方出的ReactNative插件,非常好用
3. FileNavigator: ctrl+l 文件导航,新建文件,双手不离开键盘
4. AutoFileName: 自动补全文件名,路径名
5. 3024Day Theme:自己用的护眼配色,安装完之后cmd+shift+p,输入theme,选择之前下载的主题.

配置环境

1.修改成英文界面

中文界面快速输入功能很不方便,修改成英文界面才顺手,cmd+shift+p,输入Configure Language,打开语言配置文件,修改如下:
"locale":"en"

2.屏蔽VSCode自带代码检测

自带代码检测无法很好的识别ES6,使用ESlint做代码检测之后,需要屏蔽VSCode自带.
在配置文件中添加:
"javascript.validate.enable": false

3.设置默认打开.js文件为javascriptReact

默认的javascript文件识别下,不能很好的支持标签的补全.安装了ReactNativeTools插件之后,可以把.js文件标记为javascriptReact文件类型,只需要在配置文件中添加:
"files.associations": {"*.js":"javascriptreact"}

4.修改个别热键(属于个人偏好)

cmd+shift+p打开快捷面板,输入keyboard,打开热键配置文件,添加以下热键
{ "key": "f1", "command": "workbench.action.navigateBack" }, { "key": "f2", "command": "workbench.action.navigateForward" }