typescript-plugin-css-modules
typescript-plugin-css-modules copied to clipboard
Add ESLint plugin to workaround lack of `tsc` support
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?
.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"]
}
`
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.
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
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 that would certainly help from my perspective!
@mrmckeb +1 to eslint plugin support!