Need advice about which tool to choose?Ask the StackShare community!
ESLint vs Stylelint: What are the differences?
Introduction:
In modern web development, it is essential to maintain code quality and consistency. Two widely used tools for linting and enforcing coding style are ESLint and Stylelint. While both tools serve similar purposes, there are key differences between them.
Architecture: ESLint is designed to lint and enforce coding style for JavaScript, while Stylelint is specifically built for linting CSS and its pre-processors. This means that ESLint focuses on JavaScript-specific rules and conventions, while Stylelint focuses on CSS-specific rules and conventions.
Configuration: ESLint uses a single configuration file, typically named
.eslintrc, which allows developers to define rules and configurations for their entire JavaScript project. On the other hand, Stylelint allows configuration through multiple files, such as.stylelintrcor through package.json. This provides flexibility to configure specific rules for different CSS files or modules.Supported Rules: ESLint provides a wide range of rules that cover various aspects of JavaScript coding style, including best practices, syntax errors, and possible bugs. Stylelint, on the other hand, focuses on CSS-specific rules, such as indentation, selector specificity, naming conventions, and property orders.
Integration with Build Tools: ESLint integrates seamlessly with popular build tools and editors, such as webpack, Babel, and Visual Studio Code. This enables developers to receive real-time feedback and linting suggestions while writing code. Stylelint also offers similar integrations with popular editors and build tools, enhancing the CSS linting experience.
Plugin Ecosystem: ESLint has a vast plugin ecosystem, allowing developers to extend its functionalities and enforce custom rules specific to their projects. This makes ESLint highly customizable and adaptable. Stylelint also has a plugin ecosystem, providing additional rules and integrations, albeit more focused on CSS and related technologies.
Community and Adoption: ESLint has gained widespread adoption across the JavaScript community, making it the de facto linter for JavaScript projects. It has a large and active community, ensuring regular updates, bug fixes, and improvements. Stylelint, although not as widely adopted as ESLint, has also gained popularity within the CSS community, with an increasing number of developers using it for linting CSS code.
In summary, ESLint and Stylelint differ in their focus on JavaScript and CSS, respectively. ESLint has more extensive JavaScript-related rules, while Stylelint has a narrower focus on CSS-specific rules. Both tools offer flexible configuration options, integrations with popular build tools, and active plugin ecosystems.
Scenario: I want to integrate Prettier in our code base which is currently using ESLint (for .js and .scss both). The project is using gulp.
It doesn't feel quite right to me to use ESLint, I wonder if it would be better to use Stylelint or Sass Lint instead.
I completed integrating ESLint + Prettier, Planning to do the same with [ Stylelint || Sasslint || EsLint] + Prettier.
And have gulp 'fix' on file save (Watcher).
Any recommendation is appreciated.
In the case of .js files I would recommend using both Eslint and Prettier.
You can set up Prettier as an Eslint rule using the following plugin:
https://github.com/prettier/eslint-plugin-prettier
And in order to avoid conflicts between Prettier and Eslint, you can use this config:
https://github.com/prettier/eslint-config-prettier
Which turns off all Eslint rules that are unnecessary or might conflict with Prettier.
Pura vida! Well, I had a similar issue and at the end I decided to use Stylelint + Prettier for that job, in our case, we wanted that our linting process includes the SCSS files and not only the JS file, base on that we concluded that using only ESLint to do both things wasn't the best option, so, we integrated prettier with Stylelint, and for that we used a neat plugin that allowed us to use Prettier inside Stylelint here is the link, https://github.com/prettier/stylelint-prettier#recommended-configuration, I hope that this can help you, hasta pronto!, :)
you don't actually have to choose between these tools as they have vastly different purposes. i think its more a matter of understanding how to use them.
while eslint and stylelint are used to notify you about code quality issues, to guide you to write better code, prettier automatically handles code formatting (without notifying me). nothing else.
prettier and eslint both officially discourage using the eslint-plugin-prettier way, as these tools actually do very different things. autofixing with linters on watch isnt a great idea either. auto-fixing should only be done intentionally. you're not alone though, as a lot of devs set this up wrong.
i encourage you to think about what problem you're trying to solve and configure accordingly.
for my teams i set it up like this: - eslint, stylelint, prettier locally installed for cli use and ide support - eslint config prettier (code formatting rules are not eslints business, so dont warn me about it) - vscode workspace config: format on save - separate npm scripts for linting, and formatting - precommit hooks (husky)
so you can easily integrate with gulp. its just js after all ;)
Pros of ESLint
- Consistent javascript - opinions don't matter anymore8
- Free6
- IDE Integration6
- Customizable4
- Focuses code review on quality not style2
- Broad ecosystem of support & users2
Pros of Stylelint
- Great way to lint your CSS or SCSS5
- Only complains about real problems1
Sign up to add or upvote prosMake informed product decisions
What is ESLint?
What is Stylelint?
Need advice about which tool to choose?Ask the StackShare community!
What companies use Stylelint?
Sign up to get full access to all the companiesMake informed product decisions
Sign up to get full access to all the tool integrationsMake informed product decisions
Blog Posts
+43