prettier

What is prettier?

Prettier is an opinionated code formatter that supports many languages and integrates with most editors. It removes all original styling and ensures that all outputted code conforms to a consistent style.

What are prettier's main functionalities?

Code Formatting

Formats all .js files in the src directory and its subdirectories. When run, this command will process each JavaScript file and reformat it according to Prettier's rules.

prettier --write 'src/**/*.js'

Configuration Overrides

Allows customization of Prettier's default formatting rules. For example, this JSON configuration disables semicolons at the end of statements and enforces single quotes.

{
  'semi': false,
  'singleQuote': true
}

Ignoring Code

You can prevent a section of code from being formatted by Prettier by adding a special comment, `// prettier-ignore`, before it.

// prettier-ignore
let untouched = 'This code will not be formatted by Prettier.';

Integration with Editors

Prettier can be integrated into many code editors to automatically format files on save or during editing, enhancing the developer's workflow.

N/A

Support for Multiple Languages

Prettier supports a wide range of languages and frameworks, including but not limited to JavaScript, TypeScript, CSS, HTML, and Markdown, making it a versatile tool for many developers.

N/A

Other packages similar to prettier

eslint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the ability to fix many issues automatically. While it can also format code, its primary focus is on code quality and adherence to coding standards, unlike Prettier which is solely focused on code formatting.

stylelint

Stylelint is a modern linter that helps you avoid errors and enforce conventions in your stylesheets. It is to CSS what ESLint is to JavaScript, and while it can fix code style issues, it is more focused on maintaining code quality rather than just formatting.

beautify

Beautify, available as 'js-beautify' for npm, is a code beautifier that can format HTML, CSS, and JavaScript. It is less opinionated than Prettier and offers more configuration options, but it might not enforce as consistent a style as Prettier does.

standard

Standard is a JavaScript style guide, linter, and formatter that enforces a strict coding standard. Unlike Prettier, Standard also includes rules that aim to prevent bugs and improve code clarity.

README

jscodefmt

This is a JavaScript pretty-printer that is opinionated. All it takes is a width to format the code to and it does the rest. Zero config: it just works! Integrate this into your editor to get immediate feedback, or run it across an entire project to format all your files.

Details

This is a fork of recast's printer because it already handles a lot of edge cases like handling comments. The core algorithm has been rewritten to be based on Wadler's "A prettier printer" paper, however. Recast also supported only re-printing nodes that changed from a transformation, but we avoid that and always pretty-print the entire AST so it's always consistent.

That paper allows a flexible formatting that will break expressions across lines if they get too big. This means you can sloppily write code as you need and just format it, and it will always produce consistent output.

The core of the algorithm is implemented in pp.js. The printer should use the basic formatting abstractions provided to construct a format when printing a node. Parts of the API only exist to be compatible with recast's previous API to ease migration, but over time we can clean it up.

The following commands are available:

• concat

Combine an array into a single string.

• group

Mark a group of items which the printer should try to fit on one line. This is the basic command to tell the printer when to break. Groups are usually nested, and the printer will try to fit everything on one line, but if it doesn't fit it will break the outermost group first and try again. It will continue breaking groups until everything fits (or there are no more groups to break).

• multilineGroup

This is the same as group, but with an additional behavior: if this group spans any other groups that have hard breaks (see below) this group always breaks. Otherwise it acts the same as group.

For example, an array will try to fit on one line:

[1, "foo", { bar: 2 }]

However, if any of the items inside the array have a hard break, the array will always break as well:

[
  1,
  function() {
    return 2
  },
  3
]

Functions always break after the opening curly brace no matter what, so the array breaks as well for consistent formatting. See the implementation of ArrayExpression for an example.

• join

Join an array of items with a separator.

• line

Specify a line break. If an expression fits on one line, the line break will be replaced with a space. Line breaks always indent the next line with the current level of indentation.

• softline

Specify a line break. The difference from line is that if the expression fits on one line, it will be replaced with nothing.

• hardline

Specify a line break that is always included in the output, no matter if the expression fits on one line or not.

• literalline

Specify a line break that is always included in the output, and don't indent the next line. This is used for template literals.

• indent

Increase the level of indentation.

Example

For an example, here's the implementation of the ArrayExpression node type:

return multilineGroup(concat([
  "[",
  indent(options.tabWidth,
         concat([
           line,
           join(concat([",", line]),
                path.map(print, "elements"))
         ])),
  line,
  "]"
]));

This is a group with opening and closing brackets, and possibly indented contents. Because it's a multilineGroup it will always be broken up if any of the sub-expressions are broken.

TODO

There is a lot to do:

1. Most importantly, finish the migration of recast's printing. Many node types have not been converted from recast's old ways of doing things, so need to finish converting them. The easiest way to do this is search for \n in the printer; there should be no uses of it because we use line instead. For example see DoWhileStatement.
2. Remove any cruft leftover from recast that we don't need
3. Polish the API (it was currently designed to be "usable" and compatible with what recast did before)
4. Better editor integration
5. Better CLI

Contributing

$ git clone https://github.com/jlongster/jscodefmt.git
$ cd jscodefmt
$ npm install
$ ./bin/jscodefmt file.js

Tests

A few snapshot tests are currently implemented. See tests. To run the tests simply run npm test in the root directory.

Editors

It's most useful when integrated with your editor, so see editors for editor support. Atom and Emacs is currently supported.

More docs on editor integration will come soon. To integrate in Emacs, add the following code. This will format the file when saved.

(require 'jscodefmt)
(add-hook 'js-mode-hook
          (lambda ()
            (add-hook 'before-save-hook 'jscodefmt-before-save)))

Changelog

0.0.10

diff

• Add description to package.json (#320)
• Fix crash for single rest on class declaration (#315)
• Add canonical link to Prettier SublimeText package. (#318)
• Properly escape JSXText (#329)
• Hug objects and arrays inside of JSXExpressionContainer (#213)
• Add quotes around unicode keys in flow parser (#328)
• Add tests for comments (#330)
• Print dangling comments in blocks (#331)
• Remove Printer module in favor of single function (#333)
• Split pp.js into doc-{printer,builders,utils}.js (#334)
• Fix node 4 (#336)
• Remove unused functions from recast (#337)
• Kill fromString (#335)
• Extract parser.js (#338)
• Normalize exports (#339)
• Refactor index.js (#340)
• Add semicolon to more default exports (#343)
• Introduce --parser/parser option and deprecate --flow-parser/useFlowParser (#342)
• Remove parens around AwaitExpression in ternary (#346)
• Indent while test the same way as if test (#352)
• Add debugging support for doc IR (#347)