platform-based shared configs

[benmosher]

Gather up settings for different JS platforms and drop into config/[platform], then referenced as plugin:import/[platform].

This is useful even (and maybe especially) if a special resolver is not needed.

Node is the default (for now), so alternate platforms that might warrant a named shared config are

• [x] Webpack (just the resolver; added to resolver package--config.js)
• [x] Electron (not sure what goes in here, see #275)
• [x] React Native (see #279, might just need extensions set up for Node resolver)
• [ ] Meteor (see #274, maybe also just a resolver config) see eslint-import-resolver-meteor on npm

Shared config might be a good place for comments about usage on each platform.

[yutin1987]

maybe, we should setting .eslintrc follow:

  "env": {
    "android": true,
    "ios": true,
  }

[yutin1987]

when setting extensions to .eslintrc

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".ios.js", ".android.js"]
      }
    }
  },
  "env": {
    "node": true,
  }
}

It's work on react native.

[jozan]

Cannot get @yutin1987's example to work on my React Native project. Am I missing something?

Error:

path/to/app/Components/Restaurant.js
   7:17  error  Unable to resolve path to module '../Data/Api'           import/no-unresolved
   8:21  error  Unable to resolve path to module '../Data/Storage'       import/no-unresolved
   9:19  error  Unable to resolve path to module '../Utils/utils'        import/no-unresolved
  11:22  error  Unable to resolve path to module './MenuView'            import/no-unresolved
  12:21  error  Unable to resolve path to module './Spinner'             import/no-unresolved
  13:32  error  Unable to resolve path to module './DateRowPlaceholder'  import/no-unresolved

.eslintrc:

{
  "extends": "airbnb-base",
  "parser": "babel-eslint",
  "plugins": [
    "react",
    "react-native"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".ios.js", ".android.js"]
      }
    }
  },
  "env": {
    "es6": true,
    "node": true,
  },
  "rules": {
    "react-native/no-unused-styles": 0,
    "react-native/split-platform-components": 2,
    "react-native/no-inline-styles": 2,
    "react-native/no-color-literals": 0,
    "react/jsx-uses-react": 2,
    "react/jsx-uses-vars": 2,

    "no-use-before-define": 0,
    "jsx-quotes": 2,
  }
}

Restaurant.js

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';

import API from '../Data/Api';
import Storage from '../Data/Storage';
import utils from '../Utils/utils';

import MenuView from './MenuView';
import Spinner from './Spinner';
import DateRowPlaceholder from './DateRowPlaceholder';

... snip ...

package.json

{
  "name": "Kuu",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "lint": "eslint index.*.js app/*"
  },
  "dependencies": {
    "moment": "^2.13.0",
    "react": "^15.1.0",
    "react-native": "^0.27.0-rc2",
    "react-native-code-push": "^1.12.0-beta",
    "react-native-collapsible": "^0.6.0",
    "react-native-vector-icons": "^2.0.3"
  },
  "devDependencies": {
    "babel-eslint": "^6.1.0",
    "eslint": "^2.13.1",
    "eslint-config-airbnb-base": "^3.0.1",
    "eslint-import-resolver-node": "^0.2.1",
    "eslint-plugin-import": "^1.9.2",
    "eslint-plugin-react": "^5.2.2",
    "eslint-plugin-react-native": "^1.1.0"
  }
}

[benmosher]

@jozan not sure, looks good from what you've posted. What is the extension on ../Data/Api?

[jozan]

@jozan not sure, looks good from what you've posted. What is the extension on ../Data/Api?

It's .js.

Could it be that uppercase pathnames confuse the resolver somehow?

[benmosher]

re: uppercase -- Unlikely. The outcry would be deafening, I think. 😁 Works fine for me with all mixes of case.

The case does need to match the FS, though, even on case-insensitive filesystems like Windows and OSX.

Also: on Windows, some users have reported that running in a terminal where the CWD casing doesn't match the FS can result in what you're seeing.

[jozan]

I will do some testing during the weekend on a fresh project. The project I'm trying to set up eslint and eslint-plugin-import has been created in around React Native 0.10 and updated since then to the almost latest version. Maybe there is some cruft that should be removed. Quite unlikely but I assume this might be a weird environment issue rather than plugin problem. I'll keep you posted.

[ssamkough]

when setting extensions to .eslintrc

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".ios.js", ".android.js"]
      }
    }
  },
  "env": {
    "node": true,
  }
}

It's work on react native.

Since I'm using Typescript, I had to change up the value for extensions to: "extensions": ['.tsx', '.ios.tsx', '.android.tsx']

[ljharb]

@ssamkough the latter two aren’t needed; a file can only have one extension.