Need advice about which tool to choose?Ask the StackShare community!
Prettier vs Sass Lint : What are the differences?
Introduction
In this Markdown code snippet, we will present the key differences between Prettier and Sass Lint, two popular and widely used tools in web development for code formatting and linting. Markdown code formatting will be used to present the information in a website-friendly manner.
Configuration: Prettier does not require any configuration and follows a set of default rules, making it easier and faster to set up. On the other hand, Sass Lint allows extensive configuration to customize linting rules according to specific project requirements.
Language Support: Prettier is a code formatter that supports a wide range of programming languages, including HTML, CSS, JavaScript, and more. In contrast, Sass Lint is specifically designed for linting Sass code, focusing on CSS preprocessors like Sass, SCSS, and Less.
Formatting vs Linting: Prettier focuses mainly on code formatting and auto-formatting capabilities, ensuring consistent and aesthetically pleasing code style. Sass Lint, on the other hand, emphasizes linting, which involves analyzing code for potential errors, performance issues, and adherence to coding conventions and best practices.
Rule Categories: Prettier provides a single set of formatting rules that are applied globally to the code. It does not have separate rule categories. In contrast, Sass Lint offers distinct rule categories, such as "Possible Errors," "Stylistic Issues," and "Best Practices," allowing developers to enable or disable specific rule categories based on their needs.
Integration with Build Processes: Prettier can be easily integrated into build processes and workflows through tools like ESLint or IDE plugins, enabling developers to automatically format code during development or as part of a continuous integration/delivery pipeline. Sass Lint, on the other hand, may require additional configuration or plugins to seamlessly integrate into build processes.
Error Reporting: Prettier focuses on formatting code and does not provide detailed error reporting. It may not highlight specific linting issues such as unused variables or missing semicolons. Sass Lint, being a dedicated linter, provides more detailed error reporting, enabling developers to quickly identify and fix specific code quality issues.
In summary, Prettier is a versatile code formatter with minimal configuration requirements, while Sass Lint is a specialized linter tailored specifically for Sass/SCSS code with extensive customization options. Prettier focuses on formatting, while Sass Lint provides linting capabilities and detailed error reporting for Sass code.
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
