/format-web-frontend-code-using-prettier

Code formatting via prettier.

Primary LanguageTypeScriptMIT LicenseMIT

code style: prettier

Format web front-end code using Prettier

By utilizing a tool, the whole team could have a consistent code formatting style.

Prettier is an opinionated code formatter with support for:

  • JavaScript, including ES2017
  • JSX
  • Flow
  • TypeScript
  • CSS, Less, and SCSS
  • JSON
  • GraphQL
  • Markdown, including GFM
  • YAML

Install into Visual Studio Code

Download Visual Studio Code and install this extension.

  • Open Extensions
  • Search Prettier - Code formatter with publisher name Esben Petersen
  • Click Install

Install as npm package

npm install --save-dev --save-exact prettier

Format code

Visual Studio Code

  • Right click code area and select Format Document, or
  • Use shortcut Ctrl + Alt + F on Windows, or
  • Enable format on save

CLI

# user manual: https://prettier.io/docs/en/cli.html
npx prettier ./test/format-me.ts --write

Format settings

Settings will be read from (listed by priority):

We should use a .editorconfig file together, as modern editors like Visual Studio Code could make use of it.