ESLint聽vs聽Prettier

Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

ESLint
ESLint

5.1K
3.5K
+ 1
17
Prettier
Prettier

482
207
+ 1
0
Add tool

ESLint vs Prettier: What are the differences?

Developers describe ESLint as "The fully pluggable JavaScript code quality tool". A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease. On the other hand, Prettier is detailed as "Prettier is an opinionated code formatter". Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

ESLint and Prettier can be primarily classified as "Code Review" tools.

ESLint and Prettier are both open source tools. It seems that Prettier with 32.6K GitHub stars and 1.81K forks on GitHub has more adoption than ESLint with 14.4K GitHub stars and 2.46K GitHub forks.

Asana, Rainist, and Intuit are some of the popular companies that use ESLint, whereas Prettier is used by Swat.io, HousingAnywhere, and Quizlet. ESLint has a broader approval, being mentioned in 541 company stacks & 592 developers stacks; compared to Prettier, which is listed in 63 company stacks and 60 developer stacks.

What is ESLint?

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

What is Prettier?

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

Why do developers choose ESLint?
Why do developers choose Prettier?
    Be the first to leave a pro

    Sign up to add, upvote and see more prosMake informed product decisions

      Be the first to leave a con
        Be the first to leave a con
        What companies use ESLint?
        What companies use Prettier?

        Sign up to get full access to all the companiesMake informed product decisions

        What tools integrate with ESLint?
        What tools integrate with Prettier?

        Sign up to get full access to all the tool integrationsMake informed product decisions

        What are some alternatives to ESLint and Prettier?
        TSLint
        An extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.
        JSLint
        It is a static code analysis tool used in software development for checking if JavaScript source code complies with coding rules. It is provided primarily as a browser-based web application accessible through their domain, but there are also command-line adaptations.
        JSHint
        It is a community-driven tool to detect errors and potential problems in JavaScript code. It is open source and can easily adjust in the environment you expect your code to execute.
        SonarQube
        SonarQube provides an overview of the overall health of your source code and even more importantly, it highlights issues found on new code. With a Quality Gate set on your project, you will simply fix the Leak and start mechanically improving.
        Code Climate
        After each Git push, Code Climate analyzes your code for complexity, duplication, and common smells to determine changes in quality and surface technical debt hotspots.
        See all alternatives
        Decisions about ESLint and Prettier
        Russel Werner
        Russel Werner
        Lead Engineer at StackShare | 7 upvotes 190.1K views
        atStackShareStackShare
        Prettier
        Prettier
        ESLint
        ESLint
        WebStorm
        WebStorm
        Visual Studio Code
        Visual Studio Code

        We use Prettier because when we rebooted our front-end stack, I decided that it would be an efficient use of our time to not worry about code formatting issues and personal preferences during peer review. Prettier eliminates this concern by auto-formatting our code to a deterministic output. We use it along with ESLint and have 1st-class support in our WebStorm and Visual Studio Code editors.

        See more
        Johnny Bell
        Johnny Bell
        Senior Software Engineer at StackShare | 17 upvotes 624.1K views
        Webpack
        Webpack
        Node.js
        Node.js
        Yarn
        Yarn
        npm
        npm
        Babel
        Babel
        Prettier
        Prettier
        ESLint
        ESLint
        #ES6
        #ES5

        So when starting a new project you generally have your go to tools to get your site up and running locally, and some scripts to build out a production version of your site. Create React App is great for that, however for my projects I feel as though there is to much bloat in Create React App and if I use it, then I'm tied to React, which I love but if I want to switch it up to Vue or something I want that flexibility.

        So to start everything up and running I clone my personal Webpack boilerplate - This is still in Webpack 3, and does need some updating but gets the job done for now. So given the name of the repo you may have guessed that yes I am using Webpack as my bundler I use Webpack because it is so powerful, and even though it has a steep learning curve once you get it, its amazing.

        The next thing I do is make sure my machine has Node.js configured and the right version installed then run Yarn. I decided to use Yarn because when I was building out this project npm had some shortcomings such as no .lock file. I could probably move from Yarn to npm but I don't really see any point really.

        I use Babel to transpile all of my #ES6 to #ES5 so the browser can read it, I love Babel and to be honest haven't looked up any other transpilers because Babel is amazing.

        Finally when developing I have Prettier setup to make sure all my code is clean and uniform across all my JS files, and ESLint to make sure I catch any errors or code that could be optimized.

        I'm really happy with this stack for my local env setup, and I'll probably stick with it for a while.

        See more
        Joshua Dean K眉pper
        Joshua Dean K眉pper
        CEO at Scrayos UG (haftungsbeschr盲nkt) | 1 upvotes 1K views
        atScrayos UG (haftungsbeschr盲nkt)Scrayos UG (haftungsbeschr盲nkt)
        ESLint
        ESLint
        JSHint
        JSHint

        We use ESLint because we like to remove the general thinking-overhead when writing software. ESLint offers many presets, while also providing users with a lot of customization features. We use ESLint in conjunction with the javascript "standard" configuration (and for our vueJS-projects the "recommended" settings).

        The other option we considered was JSHint, but we scrapped that, as forward-compatibility is essential for us and ESLint is more fast-paced in its development and supports ESnext natively.

        See more
        Francisco Quintero
        Francisco Quintero
        Tech Lead at Dev As Pros | 7 upvotes 282.6K views
        atDev As ProsDev As Pros
        Node.js
        Node.js
        Rails
        Rails
        Amazon EC2
        Amazon EC2
        Heroku
        Heroku
        RuboCop
        RuboCop
        JavaScript
        JavaScript
        ESLint
        ESLint
        Slack
        Slack
        Twist
        Twist

        For many(if not all) small and medium size business time and cost matter a lot.

        That's why languages, frameworks, tools, and services that are easy to use and provide 0 to productive in less time, it's best.

        Maybe Node.js frameworks might provide better features compared to Rails but in terms of MVPs, for us Rails is the leading alternative.

        Amazon EC2 might be cheaper and more customizable than Heroku but in the initial terms of a project, you need to complete configurationos and deploy early.

        Advanced configurations can be done down the road, when the project is running and making money, not before.

        But moving fast isn't the only thing we care about. We also take the job to leave a good codebase from the beginning and because of that we try to follow, as much as we can, style guides in Ruby with RuboCop and in JavaScript with ESLint and StandardJS.

        Finally, comunication and keeping a good history of conversations, decisions, and discussions is important so we use a mix of Slack and Twist

        See more
        Buzz Zhang
        Buzz Zhang
        CTO at Qiban | 7 upvotes 17.7K views
        at浼佸姙浼佸姙
        Visual Studio Code
        Visual Studio Code
        ESLint
        ESLint
        Prettier
        Prettier

        I use Visual Studio Code because plugins. For choosing IDE, the most important part is not IDE itself, but plugins. Some may argues that Visual Studio Code is not IDE, but I like to call it IDE, any text editor can do debug is IDE. Visual Studio Code can do it, and can use ESLint and Prettier , so it's IDE.

        See more
        Forrest Norvell
        Forrest Norvell
        engineering manager at self-employed | 6 upvotes 122K views
        TSLint
        TSLint
        ESLint
        ESLint
        Flow (JS)
        Flow (JS)
        Visual Studio Code
        Visual Studio Code
        TypeScript
        TypeScript

        I use TypeScript because the tooling is more mature (the decision to discontinue TSLint in favor of moving all its checks to ESLint is a thoughtful and mature decision), there's a ton of examples and tutorials for it, and it just generally seems to be where the industry is headed. Flow (JS) is a fine tool, but it just hasn't seen the uptake that TS has, and as a result is lacking a lot of the nicer small things, like thorough Visual Studio Code integration, offered by TS.

        See more
        Gustavo Mu帽oz
        Gustavo Mu帽oz
        Web UI Developer at Globant | 4 upvotes 2.7K views
        ESLint
        ESLint
        Prettier
        Prettier
        Sass
        Sass
        #Airbnb

        I decided to use ESLint over other tools like Prettier because I think it's better to show your fails than fix them without knowing what you are doing. It's a better way to learn. I know it's slower, but you are fully conscious of your work. I also use Sass linters for the same reason. I recommend Prettier when you are already a senior developer, but try to use linters instead when you start coding. It will help you to improve a lot. I recommend you #Airbnb rules set. Strict, but well written. Very useful even for accesibility.

        See more
        Carlos Benavides
        Carlos Benavides
        Sass Lint
        Sass Lint
        Stylelint
        Stylelint
        gulp
        gulp
        ESLint
        ESLint
        Prettier
        Prettier

        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.

        See more
        Interest over time
        Reviews of ESLint and Prettier
        No reviews found
        How developers use ESLint and Prettier
        Avatar of Volkan 脰z莽elik
        Volkan 脰z莽elik uses ESLintESLint

        JavaScript is a language that works wonders when there are tools like ESLint, Prettier, and FlowType that cover your back.

        I use my IDE鈥檚 (Visual Studio Code) ESLint integration to validate the code I write in realtime.

        Avatar of Jack Littleton
        Jack Littleton uses ESLintESLint

        I use ESLint to ensure my JavaScript code meets my team's coding standards, and to avoid known pitfalls. The extensibility allows me to write specialized modules that detect team-specific issues as they occur.

        Avatar of Promethean TV
        Promethean TV uses ESLintESLint

        ESLint is used in the build process for the Promethean TV Broadcast Center Tool.

        Avatar of Ataccama
        Ataccama uses ESLintESLint

        A must-have tool to catch bugs and enforce a consistent code style.

        Avatar of Coolfront Technologies
        Coolfront Technologies uses ESLintESLint

        Code checking and normalization for Coolfront Mobile code-base.

        Avatar of DevExpress Reimagined
        DevExpress Reimagined uses PrettierPrettier

        Forget code formatting

        How much does ESLint cost?
        How much does Prettier cost?
        Pricing unavailable
        Pricing unavailable
        News about Prettier
        More news