Need advice about which tool to choose?Ask the StackShare community!
Prettier vs Stylelint: What are the differences?
Introduction:
Both Prettier and Stylelint are popular tools used in web development to ensure consistent and clean code. While Prettier focuses on code formatting, Stylelint is a linter tool specifically designed for CSS. Although they share a similar goal of improving code quality, there are several key differences between them.
Integration: Prettier can easily be integrated with various programming languages, including CSS, HTML, and JavaScript. It offers a consistent code formatting experience across different file types. On the other hand, Stylelint is specifically built for CSS and SCSS, providing more comprehensive linting and styling rules for CSS codebases.
Code Formatting vs. Linting: Prettier primarily focuses on automatic code formatting, applying a consistent style to code regardless of the developer's preferences. It enforces a set of opinionated rules to ensure code consistency and readability. In contrast, Stylelint is a linter tool that analyzes code to catch errors, enforce code standards, and maintain code quality. It provides more granular control over coding styles through customizable linting rules.
Configurability: Prettier has a limited configurability compared to Stylelint. It aims to minimize configuration and eliminate the need for bikeshedding over code styles. Prettier provides a set of default options that cannot be overridden. On the other hand, Stylelint allows developers to fine-tune and customize the linting rules based on their specific requirements. It offers a wide range of configuration options and supports the use of plugins and extensions to extend its functionality.
Scope: Prettier focuses on code formatting and does not offer complex code analysis or strict adherence to coding conventions. It has a narrow scope and aims to format the code consistently. In contrast, Stylelint covers a broader range of linting and styling rules for CSS. It performs more in-depth code analysis, detects potential errors, and enforces coding conventions specific to CSS.
Workflow Integration: Prettier can easily integrate into the development workflow without disrupting the existing linting tools. It can be used alongside other linter tools like ESLint with a seamless setup. Stylelint, on the other hand, can also work alongside Prettier, providing complementary functionality for CSS code analysis and advanced styling rules. It can be used independently or alongside other CSS preprocessors like SCSS, Less, and PostCSS.
Adoption and Community: Prettier has gained significant adoption and popularity due to its simplicity and ease of use. It has a large and active community of contributors, providing regular updates and continuous improvements. Stylelint also has a thriving community but is specifically tailored towards CSS code quality, making it a preferred choice for CSS-centric projects.
In Summary, Prettier focuses on code formatting across different programming languages, while Stylelint is a dedicated CSS linter tool with comprehensive linting and styling rules for CSS codebases. Prettier's strength lies in its integration capabilities and ease of use, while Stylelint offers more configurability and advanced linting features specific to CSS.
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.
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 ;)
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!, :)
Pros of Prettier
- Customizable2
- Open Source1
- Atom/VSCode package1
- Follows the Ruby Style Guide by default1
- Runs offline1
- Completely free1
Pros of Stylelint
- Great way to lint your CSS or SCSS5
- Only complains about real problems1
