Prettier logo

Prettier

Prettier is an opinionated code formatter.
704
276
+ 1
0

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.
Prettier is a tool in the Code Review category of a tech stack.
Prettier is an open source tool with 36.6K GitHub stars and 2.3K GitHub forks. Here鈥檚 a link to Prettier's open source repository on GitHub

Who uses Prettier?

Companies
156 companies reportedly use Prettier in their tech stacks, including Stack, Revolut, and Kaidee.

Developers
291 developers on StackShare have stated that they use Prettier.

Prettier Integrations

Pros of Prettier
Be the first to leave a pro
Private Decisions at about Prettier

Here are some stack decisions, common use cases and reviews by members of with Prettier in their tech stack.

Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare | 19 upvotes 230.3K views

I've been in the #frontend game for about 7 years now. I started coding in Sublime Text because all of the tutorials I was doing back then everyone was using it. I found the speed amazing compared to some other tools at the time. I kept using Sublime Text for about 4-5 years.

I find Sublime Text lacks some functionality, after all it is just a text editor rather than a full fledged IDE. I finally converted over to PhpStorm as I was working with Magento and Magento as you know is mainly #PHP based.

This was amazing all the features in PhpStorm I loved, the debugging features, and the control click feature when you click on a dependency or linked file it will take you to that file. It was great.

PhpStorm is kind of slow, I found that Prettier was taking a long time to format my code, and it just was lagging a lot so I was looking for alternatives. After watching some more tutorial videos I noticed that everyone was using Visual Studio Code. So I gave it a go, and its amazing.

It has support for everything I need with the plugins and the integration with Git is amazing. The speed of this IDE is blazing fast, and I wouldn't go back to using PhpStorm anymore. I highly recommend giving Visual Studio Code a try!

See more
Omid Farhang
Omid Farhang
Sr. Full Stack Developer | 8 upvotes 9.7K views

My Favorite #IDE is Visual Studio Code bundled with Prettier and #TSLint and #GitLens for better Git management, Bracket Pair Colorizer 2 has been also a big help over time. Also #Protobuf support has been a big help in our recent project. And the most addictive shortcut has been Ctrl + Shift + I to organize imports

See more
Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare | 17 upvotes 821.6K views

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
Gustavo Mu帽oz
Gustavo Mu帽oz
Web UI Developer at Globant | 4 upvotes 2.7K views
Shared insights
on
ESLintESLintPrettierPrettierSassSass

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
Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare | 9 upvotes 12K views

Prettier not formatting code on save in Visual Studio Code? - I've come across the same issue and took me a long time googling around to find the issue.

It is actually a very simple fix. Add the below to your Visual Studio Code settings.json

"[javascript]": {
    "editor.formatOnSave": true
},
"[javascriptreact]": {
  "editor.formatOnSave": true
}
See more

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
Public Decisions about Prettier

Here are some stack decisions, common use cases and reviews by companies and developers who chose Prettier in their tech stack.

Simon Reymann
Simon Reymann
Senior Fullstack Developer at QUANTUSflow Software GmbH | 23 upvotes 229.2K views

Our whole DevOps stack consists of the following tools:

  • GitHub (incl. GitHub Pages/Markdown for Documentation, GettingStarted and HowTo's) for collaborative review and code management tool
  • Respectively Git as revision control system
  • SourceTree as Git GUI
  • Visual Studio Code as IDE
  • CircleCI for continuous integration (automatize development process)
  • Prettier / TSLint / ESLint as code linter
  • SonarQube as quality gate
  • Docker as container management (incl. Docker Compose for multi-container application management)
  • VirtualBox for operating system simulation tests
  • Kubernetes as cluster management for docker containers
  • Heroku for deploying in test environments
  • nginx as web server (preferably used as facade server in production environment)
  • SSLMate (using OpenSSL) for certificate management
  • Amazon EC2 (incl. Amazon S3) for deploying in stage (production-like) and production environments
  • PostgreSQL as preferred database system
  • Redis as preferred in-memory database/store (great for caching)

The main reason we have chosen Kubernetes over Docker Swarm is related to the following artifacts:

  • Key features: Easy and flexible installation, Clear dashboard, Great scaling operations, Monitoring is an integral part, Great load balancing concepts, Monitors the condition and ensures compensation in the event of failure.
  • Applications: An application can be deployed using a combination of pods, deployments, and services (or micro-services).
  • Functionality: Kubernetes as a complex installation and setup process, but it not as limited as Docker Swarm.
  • Monitoring: It supports multiple versions of logging and monitoring when the services are deployed within the cluster (Elasticsearch/Kibana (ELK), Heapster/Grafana, Sysdig cloud integration).
  • Scalability: All-in-one framework for distributed systems.
  • Other Benefits: Kubernetes is backed by the Cloud Native Computing Foundation (CNCF), huge community among container orchestration tools, it is an open source and modular tool that works with any OS.
See more
Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare | 19 upvotes 230.3K views

I've been in the #frontend game for about 7 years now. I started coding in Sublime Text because all of the tutorials I was doing back then everyone was using it. I found the speed amazing compared to some other tools at the time. I kept using Sublime Text for about 4-5 years.

I find Sublime Text lacks some functionality, after all it is just a text editor rather than a full fledged IDE. I finally converted over to PhpStorm as I was working with Magento and Magento as you know is mainly #PHP based.

This was amazing all the features in PhpStorm I loved, the debugging features, and the control click feature when you click on a dependency or linked file it will take you to that file. It was great.

PhpStorm is kind of slow, I found that Prettier was taking a long time to format my code, and it just was lagging a lot so I was looking for alternatives. After watching some more tutorial videos I noticed that everyone was using Visual Studio Code. So I gave it a go, and its amazing.

It has support for everything I need with the plugins and the integration with Git is amazing. The speed of this IDE is blazing fast, and I wouldn't go back to using PhpStorm anymore. I highly recommend giving Visual Studio Code a try!

See more
Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare | 17 upvotes 821.6K views

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
Simon Reymann
Simon Reymann
Senior Fullstack Developer at QUANTUSflow Software GmbH | 16 upvotes 69.4K views

Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:

  • Nuxt.js consisting of Vue CLI, Vue Router, vuex, Webpack and Sass (Bundler for HTML5, CSS 3), Babel (Transpiler for JavaScript),
  • Vue Styleguidist as our style guide and pool of developed Vue.js components
  • Vuetify as Material Component Framework (for fast app development)
  • TypeScript as programming language
  • Apollo / GraphQL (incl. GraphiQL) for data access layer (https://apollo.vuejs.org/)
  • ESLint, TSLint and Prettier for coding style and code analyzes
  • Jest as testing framework
  • Google Fonts and Font Awesome for typography and icon toolkit
  • NativeScript-Vue for mobile development

The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:

  • Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
  • Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
  • Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
  • Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
  • Large scaling. Vue.js can help to develop pretty large reusable templates.
  • Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
See more
Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare | 11 upvotes 123.2K views

When I switched to Visual Studio Code 12 months ago from PhpStorm I was in love, it was great. However after using VS Code for a year, I see myself switching back and forth between WebStorm and VS Code. The VS Code plugins are great however I notice Prettier, auto importing of components and linking to the definitions often break, and I have to restart VS Code multiple times a week and sometimes a day.

We use Ruby here so I do like that Visual Studio Code highlights that for me out of the box, with WebStorm I'd need to probably also install RubyMine and have 2 IDE's going at the same time.

Should I stick with Visual Studio Code, or switch to something else? #help

See more
Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare | 9 upvotes 12K views

Prettier not formatting code on save in Visual Studio Code? - I've come across the same issue and took me a long time googling around to find the issue.

It is actually a very simple fix. Add the below to your Visual Studio Code settings.json

"[javascript]": {
    "editor.formatOnSave": true
},
"[javascriptreact]": {
  "editor.formatOnSave": true
}
See more

Prettier Alternatives & Comparisons

What are some alternatives to Prettier?
EditorConfig
It is a file format and collection of text editor plugins. It helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
ESLint
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
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.
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

Prettier's Followers
276 developers follow Prettier to keep up with related blogs and decisions.
Francis Niu
Matheus  de Souza Pessanha
Vladimir  Shakurov
Mykhailo Seniutovych
Jemar Medina
qiyih
Radek L
Brandon Clarke
bryceremick
hanhchodo1069