Outline
When you develop the web service, you use CSS(Cascading Style Sheets) to manage the styles. In this blog post, I will introduce how to use Stylelint to check the style code in CSS, SCSS, and CSS-in-JS.
Stylelint for CSS
You can use Stylelint to check the style code in the CSS file. To check the code in the CSS file, execute the following command to install Stylelint.
npm install --save-dev stylelint stylelint-config-standard
To use Stylelint installed like this, create the .stylelintrc.json file and modify it like the following.
{
"extends": "stylelint-config-standard"
}
After installing and setting Stylelint, you can check the contents in the CSS file by running the following command.
npx stylelint "**/*.css"
Also, you can make a command to execute Stylelint by modifying the package.json file like the following.
{
...
"scripts": {
...
"lint:css": "stylelint --ignore-path .gitignore '**/*.css'"
},
...
}
And then, you can use lint:css by executing the following command.
npm run lint:css
Stylelint for SCSS
You can use Stylelint to check the style code in the SCSS file. To check the style in the SCSS file, execute the following command to install Stylelint.
npm install --save-dev stylelint stylelint-config-standard-scss
To use Stylelint installed like this, create the .stylelintrc.json file and modify it like the following.
{
"extends": "stylelint-config-standard-scss"
}
After installing and setting Stylelint, you can run the following command to check the contents in the SCSS file.
npx stylelint "**/*.scss"
Also, you can make a command to execute Stylelint by modifying the package.json file like the following.
{
...
"scripts": {
...
"lint:css": "stylelint --ignore-path .gitignore '**/*.scss'"
},
...
}
And then, you can use lint:css by executing the following command.
npm run lint:css
Stylelint for CSS-in-JS
You can use Stylelint to check the style code in the JS(JavaScript) file. To check the style code in the JS file, execute the following the command to install Stylelint.
npm install --save-dev stylelint stylelint-config-standard postcss-styled-syntax
To use Stylelint installed like this, create the .stylelintrc.json file and modify it like the following.
{
"extends": "stylelint-config-standard",
"customSyntax": "postcss-styled-syntax",
}
After installing and setting Stylelint, you can run the following command to check the contents in the JS file.
npx stylelint "**/*.(css|tsx)"
Also, you can make a command to execute Stylelint by modifying the package.json file like the following.
{
...
"scripts": {
...
"lint:css": "stylelint --ignore-path .gitignore '**/*.(css|tsx)'"
},
...
}
And then, you can use lint:css by executing the following command.
npm run lint:css
stylelint-order
When writing CSS, the order of style properties is often different each time you write it. At this time, you can use stylelint-order to sort the CSS property alphabetically.
- stylelint-order: https://github.com/hudochenkov/stylelint-order
To use stylelint-order, execute the following command to install stylelint-order.
npm install stylelint-order --save-dev
Next, open the .stylelintrc.json file and modify it like the following.
{
"extends": ["stylelint-config-standard"],
"customSyntax": "postcss-styled-syntax",
"plugins": ["stylelint-order"],
"rules": {
"order/properties-alphabetical-order": true
}
}
And then, when you execute the following command, you can see that Stylelint throws an error if the style properties are not in alphabetical order.
npm run lint:css
Completed
Done! We’ve seen how to use Stylelint to check the style contents in the CSS and SCSS files. Also, we’ve seen how to check the styles in the CSS-in-JS format, such as styled-components and Emotion.
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
