CODEWITHSUNDEEP
javascriptreact-nativeeslinteslintrc
Sonny
Sonny

Reputation: 325

Why my ESLint configuration file do not work with React Native?

Using VSCode, i created a React Native app using expo-cli. I want to use ESLint and Prettier to improve my code quality.
I expected ESLint printed out error in my Problems tab, e.g if i had this line var asd = 1; in App.js ESLint will print out Unexpected var, use let or const instead.
I had ESLint config file setup, i intentionally code wrong to test if ESLint is working, but i did not see any errors.
ESLint for VSCode has already been installed with version 1.9.1 and in the link contains my project's structure.

This is my App.js code with 2 places i expect to generate errors:

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

var asd = 1; // this should show error

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

const zzz = StyleSheet.create({
  // this should show error based on react-native/no-unused-styles rule in eslint config
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

This is my .eslintrc.json file:

{
  "extends": [
    "airbnb",
    "prettier",
    "plugin:node/recommended",
    "plugin:react/recommended"
  ],
  "plugins": ["prettier", "react", "react-native"],
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "react-native/react-native": true
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "prettier/prettier": "warn",
    "no-unused-vars": "warn",
    "no-console": "off",
    "func-names": "off",
    "no-process-exit": "off",
    "no-alert": "warn",
    "object-shorthand": "off",
    "class-methods-use-this": "off",
    "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
    "react-native/no-unused-styles": "error"
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".ios.js", ".android.js"]
      }
    }
  }
}

Upvotes: 2

Views: 7088

Answers (2)

mainak
mainak

Reputation: 2311

Just paste this in .eslintrc.js:

module.exports = {
  root: true,
  extends: '@react-native',
};

Upvotes: 2

Sonny
Sonny

Reputation: 325

My parserOptions in the config file is not details enough. I need to update it like below:

"parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module",
  "ecmaFeatures": {
      "jsx": true
  }
},

Upvotes: 1

Related Questions