CODEWITHSUNDEEP
reactjsvisual-studio-codescss-lint
Tom Smykowski
Tom Smykowski

Reputation: 26119

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 ?

Upvotes: 1

Views: 1357

Answers (2)

JMC
JMC

Reputation: 76

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

Upvotes: 1

Javvy7
Javvy7

Reputation: 146

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

Upvotes: 1

Related Questions