Code Monkey home page Code Monkey logo

Comments (7)

rishavpandey43 avatar rishavpandey43 commented on September 12, 2024 1
    "@typescript-eslint/eslint-plugin": "^6.2.1",
    "@typescript-eslint/parser": "^6.2.1",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-graphql": "^4.0.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-redux": "^0.1.0",
    "eslint-plugin-redux-saga": "^1.3.2",
    "eslint-plugin-cypress": "^2.13.4",
    "eslint-plugin-unused-imports": "^2.0.0",

I tried adding off for a few rules 'import/namespace': 'off', 'import/default': 'off', but then it's breaking for another one.

only import/order is working.

Do I need to make extra changes since this is mono-repo?

I found these tips https://nx.dev/recipes/tips-n-tricks/eslint on nx, on how to use tsconfig.json in eslint which is not commonly done in a standalone app, but even after this import plugin is breaking.

Also, I remembered, import/resolver is necessary when creating path aliasing, Otherwise you will get error of Unable to resolve path to module '@pay/old/hooks/useGetConfig/useGetConfig'.eslint[import/no-unresolved](https://github.com/import-js/eslint-plugin-import/blob/v2.29.1/docs/rules/no-unresolved.md)

Let me try creating a test app, I'll have to create several dummy files/folders with code to ensure we solve the problem correctly.

from eslint-plugin-import.

rishavpandey43 avatar rishavpandey43 commented on September 12, 2024 1

Hi @ljharb

I tried creating a demo app for this but encountered a new issue of 1:24 error Unable to resolve path to module '@demo-org/ui-lib' import/no-unresolved.

Unable to re-create the above main issue. I'll try and update soon.

I have successfully set the setting of import/resolver as said in https://stackoverflow.com/a/55280867/7888165

This is a demo app - https://github.com/rishavpandey43/eslint-import-issue-check

https://github.com/rishavpandey43/eslint-import-issue-check

from eslint-plugin-import.

rishavpandey43 avatar rishavpandey43 commented on September 12, 2024 1

Hey @ljharb

I guess I found something.

This time inside my apps/pay-platform/.eslintrc.js I removed extending the global eslint config and put all the rules in a single file itself.

It works now.

This is the current value of apps/pay-platform/.eslintrc.js-

const dotenv = require('dotenv');
dotenv.config();

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/recommended',
    'plugin:import/typescript',
    'plugin:jsx-a11y/recommended',
    'plugin:prettier/recommended',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
    project: 'apps/pay-platform/tsconfig.*?.json',
  },
  plugins: [
    'prettier',
    'react',
    'import',
    'jsx-a11y',
    '@typescript-eslint',
    'graphql',
  ],
  root: true,
  ignorePatterns: [
    '**/*.generated.tsx',
    '**/*.generated.ts',
    '**/*.coreTypes.ts',
    '**/*.cmsTypes.ts',
  ],
  // These rules are either not present in the plugins or have stricter settings than the default ones.
  rules: {
    // *** ESLint Recommended Rules with Stricter Settings ***
    eqeqeq: 'error',
    'array-callback-return': 'error',
    'no-sequences': 'error',
    'no-useless-concat': 'error',
    'no-redeclare': 'error',
    'no-lone-blocks': 'error',
    'no-extra-boolean-cast': 'error',
    'no-unexpected-multiline': 'error',
    'no-var': 'error',
    'prefer-spread': 'error',
    'prefer-rest-params': 'error',
    'no-console': ['error', { allow: ['warn', 'error'] }],
    'max-lines': [
      'off',
      { max: 500, skipComments: true, skipBlankLines: true },
    ],

    // *** General JavaScript Rules ***
    'no-template-curly-in-string': 'error',
    'no-restricted-globals': 'error',

    // *** React and JSX Rules ***
    'react/react-in-jsx-scope': 'off',
    'react/jsx-uses-react': 'off',
    'react/prop-types': 'off',
    'react/jsx-uses-vars': 'error',
    'react/jsx-filename-extension': ['error', { extensions: ['.jsx', '.tsx'] }],
    'react/display-name': 'off',
    'react-hooks/exhaustive-deps': 'off',
    'react/jsx-no-useless-fragment': 'error',

    // *** TypeScript Rules ***
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/consistent-type-definitions': ['off', 'interface'],
    '@typescript-eslint/no-duplicate-enum-values': 'error',
    '@typescript-eslint/await-thenable': 'error',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
      },
    ],

    // *** Import Rules ***
    'import/no-named-as-default-member': 'error',
    'import/no-named-as-default': 'error',
    'import/no-duplicates': 'error',
    'import/order': [
      'error',
      {
        groups: [
          'builtin',
          'external',
          'internal',
          'parent',
          'sibling',
          'index',
        ],
        pathGroups: [
          {
            pattern: '@pay/**',
            group: 'internal',
            position: 'before',
          },
        ],
        'newlines-between': 'always',
      },
    ],
  },
  overrides: [
    {
      files: ['*.graphql'],
      parser: '@graphql-eslint/eslint-plugin',
      plugins: ['@graphql-eslint'],
      rules: {
        '@graphql-eslint/known-type-names': 'error',
        'graphql/template-strings': 'error',
        '@graphql-eslint/unique-operation-name': 'error',
        '@graphql-eslint/no-unreachable-types': 'error',
      },
      parserOptions: {
        schema: [
          process.env.VITE_API_GRAPHQL_BASE_URL,
          process.env.VITE_API_CMS_GRAPHQL_BASE_URL,
        ],
      },
    },
  ],
  env: {
    browser: true,
    node: true,
  },
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
        project: 'apps/pay-platform/tsconfig.*?.json',
      },
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
};

Earlier I tried to maintain one global .eslintrc.js file which will hold generic rules applicable to all my internal apps and packages, and then project-specific rules in respective projects. But this is failing with eslint-plugin-import plugin other rules were working fine.

But, now when I merged everything in a single internal app-level eslint config, things worked out.

Also, I tried creating an Nx-based monorepo but was unable to do. Encountering a lot of version mismatches, and even after that, the dummy project will not have that many files where imports are checked.

from eslint-plugin-import.

ljharb avatar ljharb commented on September 12, 2024

You do need those import/resolver settings.

from eslint-plugin-import.

rishavpandey43 avatar rishavpandey43 commented on September 12, 2024

Still, there is the same issue.
Btw in my standalone app, I needed settings for import/resolver so that it identifies absolute import path definitions like @pay.

In the standalone app, everything is perfect, even --fix is working for import/order but here its breaking.

from eslint-plugin-import.

ljharb avatar ljharb commented on September 12, 2024

What version of eslint and this plugin are you using?

It would be most helpful if you could create a minimal repro repo - I realize this is a tough ask.

from eslint-plugin-import.

ljharb avatar ljharb commented on September 12, 2024

@rishavpandey43 does that mean you're using flat config, in eslint 8?

from eslint-plugin-import.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.