Skip to content

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

Closed
@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/[email protected] 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