[SOLVED] How to make Visual Studio Code show errors when using missing SCSS styles in a React app?

How to make Visual Studio Code show errors when using missing SCSS styles in a React app?

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 ?

Solution

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