eslint-plugin-css-modules
eslint-plugin-css-modules copied to clipboard
Q: Is it possible to use this with typescript?
I'm migrating my JSX to TSX and would like to still have this plugin work. Is there an equivalent tslint plugin? Or can this be configured?
@damiangreen i am not sure, maybe you can by using typescript-eslint-parser. So you run eslint on your typescript code.
It is possible and works well, you'll need to use @typescript-eslint/parser, @typescript-eslint/eslint-plugin and this plugin. I migrated from using TSLint at the same time so have a .eslintrc.js
file as below
module.exports = {
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint',
'@typescript-eslint/tslint',
'css-modules'
],
parserOptions: {
project: './tsconfig.json',
sourceType: 'module',
tsconfigRootDir: __dirname,
ecmaVersion: 2019,
},
overrides: [
{
files: ["*.ts", "*.tsx"],
rules: {
"@typescript-eslint/tslint/config": ["error", { lintFile: "./tslint.json" }],
"css-modules/no-unused-class": ['error', {}],
"css-modules/no-undef-class": ['error', {}]
}
}
]
};
You'll also need to make sure you import CSS in your TSX files like import styles from './File.css';
not const styles = require('./File.css');
. This will require you to declare a *.css in your project's typings somewhere: declare module "*.css";
Thanks @jch254 i'm trying to modify my settings to match yours i dont get no-unused-class errors still though (which is the core bit i wanted), should the files
array include '.css files for this to work?
Here is a Typescript/React project I've set up eslint-plugin-css-modules https://github.com/jch254/starter-pack. I didn't have to add .css to the overrides section.
FWIW, we're using ESLint with TypeScript and setting up this plugin, and it seems to work with no particular setup, so I think this issue can be closed. Additionally, TSLint has been deprecated since 2019 and their authors suggest switching to ESLint (which we did at my company and very much enjoying the outcome).