typescript-plugin-css-modules icon indicating copy to clipboard operation
typescript-plugin-css-modules copied to clipboard

Add ESLint plugin to workaround lack of `tsc` support

Open DelliriumX opened this issue 2 years ago • 5 comments

Describe the bug I have a project that uses this plugin and ts, as well as eslint with an extensive ruleset. For some reason I keep getting linting errors. Does this plugin not have eslint support?

image

.tsconfig.json

{
  "compilerOptions": {
    "plugins": [{
      "name": "typescript-plugin-css-modules",
      "options": {
        "classnameTransform": "camelCaseOnly",
      }
    }],
    "newLine": "CRLF",
    "noEmit": true,
    "sourceMap": true,
    "target": "ES5",
    "jsx": "preserve",
    "lib": ["DOM", "WebWorker", "DOM.Iterable", "ESNext"],
    "module": "ES6",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": true,
    "skipLibCheck": true,
    "allowJs": true,
    "checkJs": true,
    "experimentalDecorators": true,
    "strict": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "noImplicitReturns": true,
    "useUnknownInCatchVariables": true,
    "noPropertyAccessFromIndexSignature": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": false
  },
  "watchOptions": {
    "excludeDirectories": ["**/node_modules", "_build"]
  },
  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "src/types/.d.ts"],
  "exclude": ["node_modules", "_build"]
}
`

DelliriumX avatar Nov 16 '22 15:11 DelliriumX

I've managed to resolve this issue but it caused a different issue instead. By adding the custom definitions as per the instructions that react-scripts users can skip, now the linter recognizes these imports as non-any but rather a properly shaped objects... however now the compiler demands these fields be accessed via index key.

image

DelliriumX avatar Nov 16 '22 15:11 DelliriumX

By disabling the noPropertyAccessFromIndexSignature rule in the .tsconfig.json I got this to work but this is not really an ideal solution, seeing as I'd generally want that TS rule active. Initially my issue was probably related to the fact that I didn't setup the type definitions for .module.css as a global module declaration, as per the instructions. But having that setup makes this conflict with the tsconfig.json. Anyone got a better idea? The plugin itself works as far as IDE is concerned, its just that ESLint doesn't recognize imports as anything other than wait for it..... => any

DelliriumX avatar Nov 16 '22 16:11 DelliriumX

Hi @DelliriumX, we've been talking about shipping an ESLint plugin as a part of this plugin (if possible). Do you think that would help?

Unfortunately, there's a restriction in TypeScript which means that plugins are only run in the language service for VSCode, not outside of the IDE.

See: https://github.com/typescript-eslint/typescript-eslint/issues/3645

mrmckeb avatar Nov 22 '22 06:11 mrmckeb

@mrmckeb that would certainly help from my perspective!

durandj avatar Nov 30 '22 19:11 durandj

@mrmckeb +1 to eslint plugin support!

jordanmnunez avatar Feb 27 '23 16:02 jordanmnunez