0

In my React app I import styles from a SCSS file like this:

import styles from './index.module.scss';

To use a particular SCSS style I set up a className on a component and grab a style from a styles array:

<span className={styles['product-price__sign--negative']}>

When I will make a typo in the class name like this:

<span className={styles['product-price__sign--neg']}>

There is no SCSS style of this type in the styles file. In this case, Visual Studio Code should show an error indicating I am trying to use a style that is missing.

However, it does not happen, and I don't see any warning or error.

What to do to make Visual Studio Code show a warning/error when I am using a style that is missing in the SCSS file when coding with React ?

Gama11
  • 31,714
  • 9
  • 78
  • 100
Tom Smykowski
  • 25,487
  • 54
  • 159
  • 236

2 Answers2

1

Will this extension help ? - [https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss]

Javvy7
  • 146
  • 1
  • 8
1

You could install eslint module and this package: eslint-plugin-react-css-modules It shows you if your scss classes doesn't exist

JMC
  • 21
  • 3
  • The package seems like exactly what I need. Do you know any alternative for tslint? – Tom Smykowski Jul 04 '21 at 12:23
  • I don't know any package of this sort for tslint, but you should move from tslint to eslint because it is now deprecated: https://code.visualstudio.com/api/advanced-topics/tslint-eslint-migration – JMC Jul 04 '21 at 13:52
  • I have switched from tslint to eslint, and installed the extension. However it does not work – Tom Smykowski Jul 04 '21 at 14:27
  • Did you create your .eslintrc.json file in your repo with the necessary data? Otherwise, i'm sorry but i won't be able to help you on this – JMC Jul 04 '21 at 15:06
  • Maybe you could use the default creat-react-app with typescript .eslintrc.json and add the plugin and the rule in it – JMC Jul 05 '21 at 08:30
  • I have migrated from tslint, .eslint... was created automatically. I have added the plugin and the rule, but it does not seem to work – Tom Smykowski Jul 05 '21 at 11:56