React Native开发工具推荐——VS Code及常用常用插件详解

1.开发工具:Visual Studio Code

2.常用插件:

但针对 React Native 开发而言,还不够详细,本文就来详细探讨如何更好的为 React Natiev 开发定制 VSCode。

(1)React Native Tools

image

微软官方为 React Native 开发提供的专门的插件,按照官网的说明进行插件的安装即可。这个插件使得开发者可以在 VS Code 中调试 React Native 代码,快速执行 react-nativ命令,以及对 React Native 的 API 具备智能提醒功能

(2)Flow Language Support

image

Flow3 是 Facebook 出品的一个用于 JavaScript 代码静态类型检查的工具,可以用来发现 Javascript 代码中的类型错误。这个插件是在 VS Code 中支持 Flow 的插件,当然前提是安装好 Flow。

(3)ESLint

image

静态代码检查主要用来对代码的编程规范,语法错误等进行扫描,从而在代码执行之前发现可能存在的问题。在程序设计领域,几乎每一种语言都有配套的静态代码检查工具,例如 C 和 C++ 语言的 PC-lint5 和 FlexeLint6,Java 语言的 FindBugs7,Android 开发中的 Android Lint,iOS 开发中的 OClint8 等等。React Native 开发中大部分时间都是使用的 Javascript 语言,类似其他语言,Javascript 也有自己的静态代码检查工具,而其中目前应用最广的就是 ESLint,这个插件就是将 ESLint 集成进 VS Code 的插件,当然前提是需要安装好 ESLint9。

(4)Prettier - JavaScript formatter

image
每个公司每个团队都有自己的编码规范,而代码格式化功能是提高开发者输出符合规范代码效率的工具,这个插件是在 VS Code 中支持 Prettier 的插件,Prettier11 是一个 Javascript 代码的格式化工具。

(5)Auto Close Tag

image

提高开发效率的插件,在 VS Code 中支持自动补全 HTML/XML 关闭标签。

(6) Auto Rename Tag

image

提高开发效率的插件,在 VS Code 中支持重命名 HTML/XML 对应标签。

(7) Color Highlight

image

代码中经常会出现设置颜色,通常是用十六进制格式来表示一个颜色值,例如 #EB6066,但这个值对开发者而言是没有意义的,我们看不出来到底对应的是什么颜色,这个插件帮忙开发者在 VS Code 中支持十六进制格式的颜色进行预览。

(8)Document This

image

在 VS Code 中支持在 TypeScript 和 JavaScript 文件中自动生成 JSDoc 注释的插件。

(9)Git Blame

image

在团队多人协作开发过程中,我们通常需要知道某行代码最近一次是谁修改的,Git Blame 插件就提供了这么一个便利的功能。

(10)Rainbow Brackets

在 React Native 开发中经常会存在多种括号混合使用,为了能够更好的区分,这个插件支持不同类型的括号进行彩色着色,支持圆括号,方括号和花括号。

(11)React-Native/React/Redux snippets for es6/es7

image

在 VS Code 中支持 React Native,React,Redux 常见代码片段的插件。

(12)TODO Highlight

image

在 VS Code 中支持 TODO:,FIXME: 等类型注释关键词高亮的插件。

(13)Path Intellisense

image

在 VS Code 中支持自动补全文件路径名的插件。

(14)AutoFileName

image

另一个自动补全文件名的插件,如下所示:

(15)EditorConfig

image

EditorConfig23 通过在工程中增加一个配置文件以及安装对应的插件,实现在不同编辑器和 IDE 保持工程中代码文件编码格式的一致性,EdEitorConfig的配置文件具有良好的可读性,并能很好的和版本控制系统一起协作

(16)Project Manager

这里写图片描述
用途:用于多个项目之间的快速切换

使用方法:
1)点击F1,调出命令面板,输入:>Project Manager:Edit Projects,打开project.json,配置工程名和路径

[
    {
        "name": "GitHubTest",
        "rootPath": "E:/RNworkspace/GitHubTest",
        "paths": [],
        "group": ""
    },
    {
        "name": "HelloReact",
        "rootPath": "E:/RNworkspace/HelloReact",
        "paths": [],
        "group": ""
    }

]

2)然后在PROJECTS/Favorites中切换项目:

这里写图片描述

3.插件的安装:

这里写图片描述

选择扩展,输入插件名,选择正确的插件安装,记得之后重启之后才可以起作用哦

猜你喜欢

转载自blog.csdn.net/qq_26585943/article/details/78987844