Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Q: Is it possible to use this with typescript? #43

Open
damiangreen opened this issue Sep 5, 2018 · 5 comments
Open

Q: Is it possible to use this with typescript? #43

damiangreen opened this issue Sep 5, 2018 · 5 comments
Labels

Comments

@damiangreen
Copy link

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?

@atfzl
Copy link
Owner

atfzl commented Sep 7, 2018

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

@atfzl atfzl added the question label Sep 7, 2018
@jch254
Copy link

jch254 commented Aug 16, 2019

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

@damiangreen
Copy link
Author

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?

@jch254
Copy link

jch254 commented Aug 18, 2019

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.

@astorije
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants