.eslintrc.js

module.exports = {
  env: {
    browser: true, // window object etc part of browser are made available globally.
    es2020: true, // to include BigInt support
    es6: true,
    commonjs: true,
    node: true,
  },
  extends: [
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended",
  ],
  settings: {
    react: {
      version: "detect",
    },
    // We need this for the import/extensions rule to work: https://github.com/import-js/eslint-plugin-import#importextensions
    "import/resolver": {
      node: {
        extensions: [".js", ".jsx", ".ts", ".tsx", ".svg", ".json"],
      },
    },
  },
  overrides: [
    {
      files: [".eslintrc.js", ".prettierrc.js", "app/assets/**/*", "*.json"],
      rules: {
        "import/order": "off",
        "react-hooks/rules-of-hooks": "off",
      },
    },
    {
      files: ["app/javascript/packs/**/*.{js,jsx}"],
      rules: {
        "no-redeclare": "off",
      },
    },
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: "module",
  },
  parser: "@babel/eslint-parser",
  plugins: [
    "react",
    "prettier",
    "import",
    "react-hooks",
    "promise",
    "jam3",
    "unused-imports",
  ],
  rules: {
    "react/jsx-props-no-spreading": "off",
    quotes: ["error", "double"],
    // auto-fixable: Respect all Prettier rules and apply it.
    "prettier/prettier": "error",
    // not-auto-fixable: No unused variables allowed.
    "no-unused-vars": [
      "error",
      {
        args: "all",
        argsIgnorePattern: "^_",
        destructuredArrayIgnorePattern: "^_",
        caughtErrors: "all",
      },
    ],
    // not-auto-fixable: No undefined variables allowed.
    "no-undef": "error",
    // not-auto-fixable: Dont use console statements. Use logger which babel will remove during bundling.
    "no-console": "error",
    // not-auto-fixable: require `return` statements to either always or never specify values.
    "consistent-return": "error",
    // auto-fixable: disallows repeating variable name when declaring object properties.
    "object-shorthand": "error",
    // auto-fixable: sadly this doesn't support guard clauses yet.
    "padding-line-between-statements": [
      "error",
      { blankLine: "always", prev: "if", next: ["if", "return"] },
      // The newline-before-return rule is deprecated in favor of the following:
      { blankLine: "always", prev: "*", next: "return" },
      // Add newline between function declarations
      {
        blankLine: "always",
        prev: [
          "block",
          "multiline-block-like",
          "function",
          "iife",
          "multiline-const",
          "multiline-expression",
        ],
        next: ["function", "iife", "multiline-const", "multiline-expression"],
      },
    ],
    // auto-fixable: Single line statements needn't have any braces. But in all other cases enforce curly braces.
    curly: ["error", "multi-line"],
    // auto-fixable: Remove the else part, if the "if" or "else-if" chain has a return statement
    "no-else-return": "error",
    // not-auto-fixable: Prevent un-sanitized dangerouslySetInnerHTML.
    "jam3/no-sanitizer-with-danger": [
      2,
      {
        wrapperName: ["dompurify", "sanitizer", "sanitize"],
      },
    ],
    // auto-fixable: Requires trailing commas when the last element or property is in a different line than the closing ] or }
    "comma-dangle": [
      "error",
      {
        arrays: "always-multiline",
        objects: "always-multiline",
        imports: "always-multiline",
        exports: "always-multiline",
        functions: "never",
      },
    ],
    // auto-fixable: If a variable is never reassigned, using the const declaration is better.
    "prefer-const": "error",
    // auto-fixable: It is considered good practice to use the type-safe equality operators === and !==.
    eqeqeq: "error",
    // not-auto-fixable: Rule flags optional chaining expressions in positions where short-circuiting to undefined causes throwing a TypeError afterward.
    "no-unsafe-optional-chaining": "error",
    // auto-fixable: Remove all unused imports.
    "unused-imports/no-unused-imports": "error",
    // auto-fixable-1-level-deep: Using nested ternary operators make the code unreadable. Use if/else or switch with if/else. If it's JSX then move it out into a function or a variable. It's fine to use nestedTernary in JSX when it makes code more readable.
    "no-nested-ternary": "warn",
    // auto-fixable: Enforces no braces where they can be omitted.
    "arrow-body-style": ["error", "as-needed"],
    // auto-fixable: Suggests using template literals instead of string concatenation.
    "prefer-template": "error",
    // auto-fixable: Disallows ternary operators when simpler alternatives exist.
    "no-unneeded-ternary": ["error", { defaultAssignment: false }],
    // not-auto-fixable: Enforces declaring default params last
    "default-param-last": "error",
    // not-auto-fixable: Remove redundant async-awaits
    "no-return-await": "warn",
    // not-auto-fixable: Disallow empty block statements
    "no-empty": ["error", { allowEmptyCatch: true }],
    // not-auto-fixable: Enforce return statements in callbacks of array methods.
    "array-callback-return": ["error"],
    // auto-fixable: Partially fixable. Unless there's a need to the this keyword, there's no advantage of using a plain function.
    "prefer-arrow-callback": ["error", { allowUnboundThis: true }],
    // not-auto-fixable: Convert multiple imports from same module into a single import.
    "no-duplicate-imports": ["error", { includeExports: true }],
    // auto-fixable: Partially fixable. In JavaScript, there are a lot of different ways to convert value types. Allow only readable coercions.
    "no-implicit-coercion": ["error", { allow: ["!!"] }],
    // auto-fixable: Require let or const instead of var.
    "no-var": "error",
    // auto-fixable: This rule conflicts with prettier rules. Thus we've NOT kept this rule in react file. This rule ensures we don't add blank lines in JSX.
    "react/jsx-newline": ["error", { prevent: true }],
    // not-auto-fixable: Prevent missing props validation in a React component definition.
    "react/prop-types": "off",
    // not-auto-fixable: Detect unescaped HTML entities, which might represent malformed tags.
    "react/no-unescaped-entities": "off",
    // not-auto-fixable: Prevent missing displayName in a React component definition. Useful when using React extensions in browser and checking for component name.
    "react/display-name": "error",
    // not-auto-fixable: Reports when this.state is accessed within setState.
    "react/no-access-state-in-setstate": "error",
    // not-auto-fixable: Prevent usage of dangerous JSX props. Currently jam3 plugin will take care of handling this.
    "react/no-danger": "off",
    // not-auto-fixable: Report when a DOM element is using both children and dangerouslySetInnerHTML.
    "react/no-danger-with-children": "warn",
    // not-auto-fixable: Prevent definitions of unused prop types.
    "react/no-unused-prop-types": "error",
    // not-auto-fixable: Report missing key props in iterators/collection literals. Important rule!
    "react/jsx-key": ["error", { checkFragmentShorthand: true }],
    // not-auto-fixable: Enforce no duplicate props.
    "react/jsx-no-duplicate-props": "error",
    // not-auto-fixable: Disallow undeclared variables in JSX.
    "react/jsx-no-undef": "error",
    // not-auto-fixable: Enforce PascalCase for user-defined JSX components.
    "react/jsx-pascal-case": ["error", { allowNamespace: true }],
    // not-auto-fixable: Prevent React to be incorrectly marked as unused.
    "react/jsx-uses-react": "error",
    // not-auto-fixable: Prevent variables used in JSX to be marked as unused.
    "react/jsx-uses-vars": "error",
    // not-auto-fixable: Ensures https://reactjs.org/docs/hooks-rules.html.
    "react-hooks/rules-of-hooks": "error",
    // not-auto-fixable: Ensures https://reactjs.org/docs/hooks-rules.html - Checks effect dependencies.
    "react-hooks/exhaustive-deps": "warn",
    // auto-fixable: A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
    "react/jsx-no-useless-fragment": ["error", { allowExpressions: true }],
    // auto-fixable: Prefer arrow function expressions for component declaration.
    "react/function-component-definition": [
      "error",
      {
        namedComponents: "arrow-function",
        unnamedComponents: "arrow-function",
      },
    ],
    // auto-fixable: Components without children can be self-closed to avoid unnecessary extra closing tag.
    "react/self-closing-comp": [
      "error",
      {
        component: true,
        html: true,
      },
    ],
    // auto-fixable: Wrapping multiline JSX in parentheses can improve readability and/or convenience.
    "react/jsx-wrap-multilines": [
      "error",
      {
        declaration: "parens-new-line",
        assignment: "parens-new-line",
        return: "parens-new-line",
        arrow: "parens-new-line",
        condition: "parens-new-line",
        logical: "parens-new-line",
        prop: "ignore",
      },
    ],
    // not-auto-fixable: Make sure files containing JSX is having .jsx extension.
    "react/jsx-filename-extension": ["error", { allow: "as-needed" }],
    // auto-fixable: Omit mentioning the "true" value if it can be implicitly understood in props.
    "react/jsx-boolean-value": "error",
    // auto-fixable: Partially fixable. Make sure the state and setter have symmertic naming.
    "react/hook-use-state": "error",
    // auto-fixable: Shorthand notations should always be at the top and also enforce props alphabetical sorting.
    "react/jsx-sort-props": [
      "error",
      {
        callbacksLast: true,
        shorthandFirst: true,
        multiline: "last",
        reservedFirst: false,
        locale: "auto",
      },
    ],
    // auto-fixable: Disallow unnecessary curly braces in JSX props and/or children.
    "react/jsx-curly-brace-presence": [
      "error",
      {
        props: "never",
        children: "never",
        // JSX prop values that are JSX elements should be enclosed in braces.
        propElementValues: "always",
      },
    ],
    // not-auto-fixable: ensure people use async/await promising chaining rather than using "then-catch-finally" statements
    "promise/prefer-await-to-then": "error",
    // auto-fixable: avoid calling "new" on a Promise static method like reject, resolve etc
    "promise/no-new-statics": "error",
    // not-auto-fixable: Prefer a default export if module exports a single name.
    "import/prefer-default-export": "off",
    // not-auto-fixable: Forbid a module from importing a module with a dependency path back to itself.
    "import/no-cycle": ["warn", { maxDepth: 1, ignoreExternal: true }],
    // not-auto-fixable: Prevent unnecessary path segments in import and require statements.
    "import/no-useless-path-segments": ["error", { noUselessIndex: true }],
    // not-auto-fixable: Report any invalid exports, i.e. re-export of the same name.
    "import/export": "error",
    // not-auto-fixable: Forbid the use of mutable exports with var or let.
    "import/no-mutable-exports": "error",
    // not-auto-fixable: Ensure all imports appear before other statements.
    "import/first": "error",
    // not-auto-fixable: Ensure all exports appear after other statements.
    "import/exports-last": "error",
    // auto-fixable: Enforce a newline after import statements.
    "import/newline-after-import": ["error", { count: 1 }],
    // auto-fixable: Remove file extensions for import statements.
    "import/extensions": [
      "error",
      "never",
      {
        ignorePackages: true,
        pattern: { json: "always", ico: "always" },
      },
    ],
  },
};