DESOSA 2022

Prettier

Prettier is an opinionated code formatter that supports many languages such as JavaScript, TypeScript, JSX, Angular, Vue, Flow, CSS, Less, SCSS, HTML, JSON, GraphQL, Markdown, YAML and has plugins for many more. Prettier removes the old code styling and makes sure that the code follows a consistent style. Prettier helps the codebase having a consistent common style without programmers having to decide on all the style choices.

Prettier is low overhead. It helps newcomers, people used to other code styles, it is easy to adopt and easy to use for cleaning up an existing codebase. Prettier is only used for formatting so linters such as ESLint, TSLint or Stylelint is still useful to have for catching bugs.

Prettier can be added to the specific project, as an extension in the integrated development environment and in the continuous integration-pipeline. Prettier has extensions for:

  • Visual Studio Code
  • Visual Studio
  • Emacs
  • Vim
  • Atom
  • Sublime Text
  • Espresso
  • JetBrains’ WebStorm, PHPStorm, PyCharm
Project Site | Project Source

Authors

Hallvard Molin Morstøl

Exchange student from the Norwegian University of Science and Technology specializing in the Software track.

Akram Hamdi

MSC Computer Science and Cybersecurity student, did BsC of CS at Leiden University, hi.

Rutger Doting

MSc Computer Science, completed my BSc Computer Science at Leiden University

Niklas Vatn

Exchange student from KTH Royal Institute of Technology in Stockholm. I like typed programming languages.

Prettier - Scalability

Introduction to Prettier Prettier is an opinionated code formatter with support for a wide range of programming languages and frameworks1. Prettier can be run either locally, via a CLI2, a pre-commit hook3, or in a supported IDE. Some companies also run Prettier in their CI/CD-pipeline. Prettier should cover a lot of different use cases, from the programmer wanting to format the single file he is currently working on through his IDE, to huge companies wanting to format their whole codebase in a CI/CD-pipeline.
Prettier
March 23, 2022

Prettier - Quality and Evolution

Satisfaction of Quality Attributes Usability Since Prettier does not have a graphical user interface, it focuses on smoothly integrating into users’ existing coding tools. Prettier can therefore be used in a variety of IDEs, in the shell, and in a CI/CD-pipeline. Prettier enables users to format their code automatically, with the click of a button, or with a command. The fact that users can decide for themselves how to use Prettier makes it easy for them to learn and memorize its use.
Prettier
March 9, 2022

Prettier - From Vision to Architecture

Prettier is an opinionated code formatter for JavaScript and many other web languages. It was released in 2017 and now about 60% of JavaScript developers used it regularly in 20201 2. We have previously written a post about Prettier’s vision and the problem it tries to solve. We will dive into the project’s architecture in this post. Main architectural patterns We start our analysis by getting an overview of the system.
Prettier
March 2, 2022

Prettier - Product Vision and Problem Analysis

What the project aims to achieve Prettier is an opinionated code formatter with support for a wide range of programming languages and frameworks, like JavaScript, TypeScript, Vue, and Angular1. It aims to be the definitive “style guide” that that everybody uses, by having a formatter that automatically takes care of all the formatting for you. This means that teams and projects will not have to argue over which style to use anymore, since Prettier does all the work for them.
Prettier
February 19, 2022

Contributions

Allow template lang-attribute to be empty string or undefined

prettier/prettier

In the Prettier repository there was an open issue where the Prettier parser failed if the HTML lang-attribute was set to an empty string for the Vue-parser. We added a fix for that issue to allow <template lang="">. The maintainers liked the fix, but would also like it to accept <template lang>. We therefore, updated the contribution and it is merged.

merged
Open PR

Fix lowercasing postcss values

prettier/prettier

In the Prettier repository there was an open issue where the Prettier parser incorrectly formatted a file when it used PostCSS with the @value and @value...from syntax-extensions. The problem was that Prettier changed the casing of values which broke the CSS-file. The example from the issue was that 4XLarge became 4xlarge. Changing the case of the value is an error as it violates the “Correctness” principle of Prettier.

merged
Open PR

Fix typo in blog about paying maintainers

prettier/prettier

We found a typo in a blog post when researching for essay 1. We decided to push a fix to learn how the contribution process works.

merged
Open PR

Parenthesize compare sequence

prettier/prettier

In the Prettier repository there was an open issue that reported that Prettier does not parenthesize sequences of comparison expressions, e.g. a < b < c was not changed into (a < b) < c. Prettier does this for sequences of boolean operators like a || b &&c is formatted to a || (b && c). Prettier does this to teach the users what their expressions mean and to make certain bugs more apparent. In the case of a < b < c, parenthesis would make it clear that it does not equal a < b && b < c.

open
Open PR