Prettier - formatter kodu

Updated 595 Days AgoPublic

Actions

Prettier is an automatic code formatter. Unlike other linters, it doesn't just complain when the code doesn't adhere to formatting standards, but it can also automatically fix it.

Using Prettier eliminates arguments about code formatting and allows you to focus on what the code does during reviews, rather than how it looks :)

Example

You can see Prettier in action here

Installation

To install Prettier, run:

# npm install -g prettier

Make sure you're using prettier 1.15.1 or newer:

$ prettier -v                                                                                                                   
1.15.1

Then configure your IDE to use Prettier for supported languages:

https://github.com/prettier/prettier#editor-integration

Use this prettier config: https://hub.sealcode.org/diffusion/PLAY/browse/master/.prettierrc

You can put a copy of the above linked file in the root of your project - then your IDE should automatically pick that up and pass to Prettier.

Emacs

If you're using straight, this config should work fine:

(setq exec-path (append exec-path '("/home/kuba/.nvm/versions/node/v6.11.2/bin"))) ;; find your path to prettier with `which prettier` and remove `prettier` from the path and use that path as the string in this setting


(use-package prettier
  :straight t
  :hook (typescript-ts-mode
         js-ts-mode
         web-mode
         html-mode
         css-mode
         scss-mode
         css-ts-mode
         json-mode
         yaml-mode
         json-ts-mode
         tsx-ts-mode
         yaml-ts-mode
         typescript-ts-base-mode))

VS Codium / VS Code

After installing Prettier on your system (see the commands at the beginning of this article), open VS Codium, launch the "Command Palette" using the key combination ⌃+shft+P.

Type "Install extensions" and press ⏎.

In the extensions search bar, type "prettier" and select the first option:

After successful installation, click "reload":

Prettier is now installed! Now it's time to configure it. Open the "Settings" view using the Command Palette:

Type "prettier" in the search bar:

and then set the following options to the specified values:

In the configuration, also set "format on save" to true:

If saving still doesn't work, try setting Prettier as the default formatter: [Ctrl+,] -> "Editor: Default Formatter" -> "esbenp.prettier-vscode".