Skip to content

Bug: [naming-convention] Default import config clashes with common npm import patterns (PascalCase and other-cased imports) #7838

@karlhorky

Description

@karlhorky

Originally reported over here + confirmed by @JoshuaKGoldberg :

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.
  • I have searched for related issues and found none that matched my issue.
  • I have read the FAQ and my problem is not listed.

Playground Link

https://typescript-eslint.io/play/#ts=5.2.2&fileType=.tsx&code=JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4AoIA&eslintrc=N4KABGBEBOCuA2BTAzpAXGUEKQAIBcBPABxQGNoBLY-AWhXkoDt8B6JgQwFtmBzWsgHsmAN0QtKw9GADa4bDkTRog6JAA08hVgXZIyREjL5V0yABNEAMw4J8GrbshXVXDvYxzdTst0MBhDgNIRwUAXU1vHCQOcz4AVSZLaGQhaEQzDnh4QQB3ByiofGgOSkYmXkTk1NUMjEgsnPzQsABfSN0db31DRGNTepEOKg4AIyQCqOdXd2kvQqhfLgCgjI7CyHiABS2AUQAlAH1-AEEAZV2QwoiW6MRYhKSlGvTM7LzJ7uLS8sqnlLSdSgjQ%2BLXaLS6TgMRhManqRFIABlKABrNa3KAuaBuDyyDE4LZBXzwQLBDFhMGOCkQVogVpAA&tsconfig=N4KABGBEDGD2C2AHAlgGwKYCcDyiAuysAdgM6QBcYoEEkJemy0eAcgK6qoDCAFutAGsylBm3TgwAXxCSgA&tokens=false

Screenshot 2023-10-25 at 15 11 52

Repro Code

import React from 'react';

ESLint Config

This is using [the default rule configuration mentioned in the docs](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/naming-convention.md#options):


// the default config is similar to ESLint's camelcase rule but more strict
const defaultOptions: Options = [
  {
    selector: 'default',
    format: ['camelCase'],
    leadingUnderscore: 'allow',
    trailingUnderscore: 'allow',
  },

  {
    selector: 'variable',
    format: ['camelCase', 'UPPER_CASE'],
    leadingUnderscore: 'allow',
    trailingUnderscore: 'allow',
  },

  {
    selector: 'typeLike',
    format: ['PascalCase'],
  },
];


module.exports = {
  parser: "@typescript-eslint/parser",
  rules: {
    "@typescript-eslint/naming-convention": ["error", ...defaultOptions],
  },
};

tsconfig

{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

Expected Result

Just upgraded to @​typescript-eslint/eslint-plugin@6.9.0 with the new import option for naming-convention config and received a number of new warnings, such as this one:

checkbox/index.js
Warning:   1:8  warning  Import name `React` must match one of the following formats: camelCase  @typescript-eslint/naming-convention

With this code:

import React from 'react';

I guess this is going to be a pretty common pattern that gets rejected now. 😬

Actual Result

Maybe the default configuration should accept every format as an import? (format: null)

Alternative: expect all users with default PascalCase imports (pretty common across the npm ecosystem, incl. React) and other case format eg. UPPER_CASE or snake_case to add the following to their config:

// the default config is similar to ESLint's camelcase rule but more strict
const defaultOptions: Options = [
  // ...

+  // Disable @typescript-eslint/naming-convention format for imports
+  // https://github.com/typescript-eslint/typescript-eslint/pull/7269#issuecomment-1777628591
+  {
+    selector: 'import',
+    format: null,
+  },
];

Additional Info

No response

Metadata

Metadata

Labels

accepting prsGo ahead, send a pull request that resolves this issuebugSomething isn't workingpackage: eslint-pluginIssues related to @typescript-eslint/eslint-plugin

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy