Linting CSS in Create React App project

Install dependencies

# Yarn
yarn add -D stylelint stylelint-config-standard

# NPM
npm install -D stylelint stylelint-config-standard

Configure your stylelint

"stylelint": {
  "extends": [
    "stylelint-config-standard"
  ]
}

Add script to your package.json

"lint:css": "stylelint src/**/*.css"

Stylelint with Prettier

Install dependencies

# Yarn
yarn add -D stylelint-prettier stylelint-config-prettier

# NPM
npm install -D stylelint-prettier stylelint-config-prettier

Configure your stylelint with prettier rules

"stylelint": {
  "extends": [
    "stylelint-config-standard",
    "stylelint-prettier/recommended"
  ]
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s