Snippet

ESLint Config for React/React Native

This configuration will get you started with ESLint for either web or mobile project. Comes with package.json script and VSCode support.

Sunny Golovine


React Native

javascript

module.exports = {
  env: {
    es6: true,
    es2017: true,
    es2020: true,
    es2021: true,
    "react-native/react-native": true,
  },
  plugins: ["react", "react-native", "@typescript-eslint", "import"],
  extends: ["plugin:react/recommended", "prettier"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: "latest",
  },
  settings: {
    react: {
      version: "detect",
    },
  },
  rules: {
    "import/first": 2,
    "import/no-default-export": 2,
    "import/no-self-import": 2,
    "import/no-cycle": 2,
    "react-native/no-unused-styles": 2,
    "react-native/no-inline-styles": 2,
    // Re-enable later
    // 'react-native/no-color-literals': 2,
    "react/no-unescaped-entities": 0,
    "sort-imports": [
      "error",
      {
        ignoreCase: false,
        ignoreDeclarationSort: true,
        ignoreMemberSort: false,
        allowSeparatedGroups: false,
      },
    ],
    "import/order": [
      "error",
      {
        alphabetize: { order: "asc", caseInsensitive: true },
      },
    ],
    "no-restricted-imports": [
      "error",
      {
        paths: [
          {
            name: "react-native-gesture-handler",
            importNames: [
              "TouchableOpacity",
              "ScrollView",
              "TextInput",
              "FlatList",
            ],
            message: "Please use imports from react-native instead",
          },
          {
            name: "react-native",
            importNames: ["SafeAreaView"],
            message:
              "Please use SafeAreaView from react-native-safe-area-context",
          },
        ],
      },
    ],
  },
}

React Web

javascript

module.exports = {
  env: {
    es6: true,
    es2017: true,
    es2020: true,
    es2021: true,
  },
  plugins: ["react", "@typescript-eslint", "import"],
  extends: ["plugin:react/recommended", "prettier"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: "latest",
  },
  settings: {
    react: {
      version: "detect",
    },
  },
  rules: {
    "import/first": 2,
    "import/no-default-export": 2,
    "import/no-self-import": 2,
    "import/no-cycle": 2,
    // Re-enable later
    // 'react-native/no-color-literals': 2,
    "react/no-unescaped-entities": 0,
    "sort-imports": [
      "error",
      {
        ignoreCase: false,
        ignoreDeclarationSort: true,
        ignoreMemberSort: false,
        allowSeparatedGroups: false,
      },
    ],
    "import/order": [
      "error",
      {
        alphabetize: { order: "asc", caseInsensitive: true },
      },
    ],
  },
}

VSCode Configuration

json

{
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.lintTask.enable": true,
  "eslint.lintTask.options": "eslint \"**/*.{ts,tsx}\"",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

package.json script

json

{
  "lint": "eslint \"**/*.{ts,tsx}\""
}

Copyright 2022, Sunny Golovine

Version: 1.2.0 (44875ce)