In this post, I will share how to integrate StyleLint with a Phoenix project. It’s quite useful for automation validating your CSS code and avoid some common errors.
The main idea is to install the
package.json, but we don’t use it in Webpack. We use
mix command instead.
Let start the first step, by adding the
stylelint and its related packages to
devDependencies section of the
stylelint config file file
assets/.stylelintrc, this config is be loaded automatically by
For more details about supporting rules and configurations, you can check here https://stylelint.io/user-guide/rules/about then update it to adapt your project requirements.
Let’s move on to the next step, we need to add StyleLint to Phoenix Mix Task by open
mix.es file, then add these lines to the existing method
You can change
codebase.fix to whatever you want.
From now on, we can use the command
mix codebase or
mix codebase.fix to check or clean your stylesheet code.
We also run this command on the CI as well, so it will help us validate the style files on CI.
Thanks my co-worker has suggested me this approach. It’s great. :)
- Check how to integrate it with Webpack.
- Integrate with Intellij Idea.