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

Q: Is it possible to use this with typescript?

Open damiangreen opened this issue 5 years ago • 5 comments

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 avatar Sep 05 '18 15:09 damiangreen

@damiangreen i am not sure, maybe you can by using typescript-eslint-parser. So you run eslint on your typescript code.

atfzl avatar Sep 07 '18 10:09 atfzl

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";

jch254 avatar Aug 16 '19 01:08 jch254

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?

damiangreen avatar Aug 17 '19 20:08 damiangreen

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.

jch254 avatar Aug 18 '19 06:08 jch254

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).

astorije avatar Aug 22 '23 18:08 astorije