下載VSCode
https://code.visualstudio.com/Download
安裝插件
cmd+shift+p,輸入install(需要優(yōu)先改成英文界面),安裝插件:
- ESLint: js,jsx,es6代碼語法檢測,配置方法可以查看我另外一篇文章,方法相通:如何配置Eslint檢測React代碼
- ReactNativeTools: 微軟官方出的ReactNative插件,非常好用
- FileNavigator: ctrl+l 文件導(dǎo)航,新建文件,雙手不離開鍵盤
- AutoFileName: 自動補全文件名,路徑名
- 3024Day Theme:自己用的護眼配色,安裝完之后cmd+shift+p,輸入theme,選擇之前下載的主題.
配置環(huán)境
1.修改成英文界面
中文界面快速輸入功能很不方便,修改成英文界面才順手,cmd+shift+p,輸入Configure Language,打開語言配置文件,修改如下:
"locale":"en"
2.屏蔽VSCode自帶代碼檢測
自帶代碼檢測無法很好的識別ES6,使用ESlint做代碼檢測之后,需要屏蔽VSCode自帶.
在配置文件中添加:
"javascript.validate.enable": false
3.設(shè)置默認打開.js文件為javascriptReact
默認的javascript文件識別下,不能很好的支持標(biāo)簽的補全.安裝了ReactNativeTools插件之后,可以把.js文件標(biāo)記為javascriptReact文件類型,只需要在配置文件中添加:
"files.associations": {"*.js":"javascriptreact"}
4.修改個別熱鍵(屬于個人偏好)
cmd+shift+p打開快捷面板,輸入keyboard,打開熱鍵配置文件,添加以下熱鍵
{ "key": "f1", "command": "workbench.action.navigateBack" }, { "key": "f2", "command": "workbench.action.navigateForward" }