ReactNative开发环境的搭建与开发前准备(三)

简介: ReactNative开发环境的搭建与开发前准备

五、推荐几个编写ReactNative好用的SublimeText插件


插件一:Emmet


   Emmet插件是前端神器,其提供了js的自动补全功能,使用PackageControl搜索安装emmet插件后,打开SublimeText中的Preferences->Package Settings->Emmet->Key Bindings-User,将其文件修改为如下:


[{

   "keys": ["tab"],

   "command": "expand_abbreviation_by_tab",


   // put comma-separated syntax selectors for which

   // you want to expandEmmet abbreviations into "operand" key

   // instead of SCOPE_SELECTOR.

   // Examples: source.js, text.html - source

   "context": [{

           "operand": "source.js",

           "operator": "equal",

           "match_all": true,

           "key": "selector"

       },


       // run only if there's no selected text

       {

           "match_all": true,

           "key": "selection_empty"

       },


       // don't work if there are active tabstops

       {

           "operator": "equal",

           "operand": false,

           "match_all": true,

           "key": "has_next_field"

       },


       // don't work if completion popup is visible and you

       // want to insert completion with Tab. If you want to

       // expand Emmet with Tab even if popup is visible --

       // remove this section

       {

           "operand": false,

           "operator": "equal",

           "match_all": true,

           "key": "auto_complete_visible"

       }, {

           "match_all": true,

           "key": "is_abbreviation"

       }

   ]

}]

插件二:jsformat


   jsformat插件可以进行js代码的格式化,使用PackageControl安装完成后,选中js代码,使用control+option+f即可进行代码的格式化操作。


插件三:ReactJS


   ReactJS插件支持对React代码进行高亮,并且支持快捷创建函数,原型等操作,熟练使用可以大大提高开发效率,其用法github如下:


https://github.com/facebookarchive/sublime-react


插件四:Terminal


   Terminal也是SublimeText开发ReactNative应用神器,安装好后,使用command+shift+T可以直接在当前目录打开终端。


插件五:react-native-snippets


   react-native-snippets可以快速的创建ReactNative类等代码块,用法github如下:


https://github.com/Shrugs/react-native-snippets


最后,再推荐一款SublimeText皮肤Hero,我个人非常喜欢这款皮肤,其安装与配置方法在如下github上有详细介绍:


https://github.com/nickbalestra/hero


效果如下:

image.png



有了上面的这些工具,我们的SublimeText就编程了一款强大ReactNative开发IDE,尽情享受畅快编码的感觉吧!


   到此为止,本篇博客将所有开发ReactNative应用的准备工作已经介绍完毕,后面的博客将记录手把手开发一款ReactNative应用程序的学习过程:ReactNative简易汇率换算器!期待与您的共同交流与进步!

目录
相关文章
|
9天前
|
前端开发 JavaScript API
React开发需要了解的10个库
本文首发于微信公众号“前端徐徐”,介绍了React及其常用库。React是由Meta开发的JavaScript库,用于构建动态用户界面,广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景,帮助开发者提升开发效率和代码质量。
39 4
React开发需要了解的10个库
|
2月前
|
设计模式 存储 前端开发
React开发设计模式及原则概念问题之自定义Hooks的作用是什么,自定义Hooks设计时要遵循什么原则呢
React开发设计模式及原则概念问题之自定义Hooks的作用是什么,自定义Hooks设计时要遵循什么原则呢
|
3月前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
13天前
|
前端开发 JavaScript 开发者
React 组件化开发最佳实践
【10月更文挑战第4天】React 组件化开发最佳实践
37 4
|
1月前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
1月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
2月前
|
JavaScript 前端开发 安全
[译] 使用 TypeScript 开发 React Hooks
[译] 使用 TypeScript 开发 React Hooks
|
2月前
|
移动开发 前端开发 JavaScript
"跨界大战!React Native、Weex、Flutter:三大混合开发王者正面交锋,揭秘谁才是你移动应用开发的终极利器?"
【8月更文挑战第12天】随着移动应用开发的需求日益增长,高效构建跨平台应用成为关键。React Native、Weex与Flutter作为主流混合开发框架各具特色。React Native依托Facebook的强大支持,以接近原生的性能和丰富的组件库著称;Weex由阿里巴巴开发,性能优越尤其在大数据处理上表现突出;Flutter则凭借Google的支持及独特的Dart语言和Skia渲染引擎,提供出色的定制能力和开发效率。选择时需考量项目特性、团队技能及生态系统的成熟度。希望本文对比能助你做出最佳决策。
139 1
|
2月前
|
前端开发
React——开发调式工具安装【五】
React——开发调式工具安装【五】
28 0
React——开发调式工具安装【五】
|
2月前
|
开发者 自然语言处理 存储
语言不再是壁垒:掌握 JSF 国际化技巧,轻松构建多语言支持的 Web 应用
【8月更文挑战第31天】JavaServer Faces (JSF) 框架提供了强大的国际化 (I18N) 和本地化 (L10N) 支持,使开发者能轻松添加多语言功能。本文通过具体案例展示如何在 JSF 应用中实现多语言支持,包括创建项目、配置语言资源文件 (`messages_xx.properties`)、设置 `web.xml`、编写 Managed Bean (`LanguageBean`) 处理语言选择,以及使用 Facelets 页面 (`index.xhtml`) 显示多语言消息。通过这些步骤,你将学会如何配置 JSF 环境、编写语言资源文件,并实现动态语言切换。
37 0