Airbnb代码风格进行React Native开发环境配置教程

本文以Expo + VSCode + ESLint作为代码开发工具;

准备工作:

使用Expo XDE创建一个React Native项目,并且使用VSCode打开项目;

操作详情

1. 初始化一个ESlint文件,让其支持代码校验工作, 具体步骤:

   • 在VSCode的TerMinal中修改操作权限, 输入命令: sudo -s
   • 执行eslint --init命令, 并依次选择:
     • Use a popular style guide
     • Airbnb (github.com/airbnb/java…)
     • User React 选择 yes
     • Use JavaScript
     • 当执行完这些时你会发现App.js文件中已经开始出现很多错误了

2. 此时会看到命令行中会有提示

   ESLint was installed locally. We recommend using this local copy instead of your globally-installed copy

   这是由于我们之前都是安装eslint到全局模式的, 而此处推荐我们使用本地副本, 因此需要重新安装一个eslint到local中, 所以继续执行 npm i eslint -s, 在local中安装eslint

3. 安装完成后,我们来逐步解决App.js中的错误

   • Unable to resolve path to module 'react'. (import/no-unresolved), 无法在当前项目 找到React, 所以需要我们在本地安装 'react', 执行 npm i react -s

   • Unable to resolve path to module 'react-native'. (import/no-unresolved), 无法在本地找到react-native,但为了更快的安装react-native到本地,我们按下面的步骤进行配置:

     • 先去package.json文件, 然后从 "dependencies" 下的"react-native"中的链接直接下载一份压缩包到本地,并且用本地压缩包的路径替换掉"react-native"中的链接

     • 执行npm i react-native -s命令

4. 此时需要我们去本地的 .eslintrc.js文件中添加配置

   • 在添加配置前,需要执行安装 eslint-config-react-native 的命令 npm install --save-dev eslint-config-react-native

   • 在 .eslintrc.js 文件中将配置修改为

     module.exports = {
        "extends": ["airbnb","react-native"],
        "plugins":["react", "react-native","import","jsx-a11y"],
        "rules":{
            'react-native/no-color-literals':0,
            'react/jsx-filename-extension':0,
            'react/prefer-stateless-function':0
                }
     };
     
     复制代码

   • 然后将 App.js中的 styles配置代码 移到 exports class的代码之前

此时,你会发现App.js中的错误全部消除,Airbnb代码风格的React Native环境就配置已经完成了;

转载于:https://juejin.im/post/5b94e1696fb9a05d2b6d9ac8