**[Prettier] Introduction to Code Formatting**

Help quickly understand Prettier and how to use it.

#What is Prettier

Prettier (hereinafter referred to as Prt) is a code formatting tool that supports the following languages:

• JavaScript (including experimental features)
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, and SCSS
• HTML
• Ember/Handlebars
• JSON
• GraphQL
• Markdown, including GFM and MDX v1
• YAML

It removes all original styling and ensures that all output code conforms to a consistent style rule.

Essentially, Prt reads the user's code and rewrites it according to certain style rules, helping users quickly format code style through this styling.

#Installation and Usage

#Install via npm

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

Now we can format code using the commands provided by Prt. Prt will detect and process files in the current folder, but first let's create a Prt configuration file to make better use of Prt.

#Configuration File

The official website example creates a configuration file via a Node command:

shell
node --eval "fs.writeFileSync('.prettierrc','{}\n')"

This script essentially creates a .prettierrc configuration file via Node; we can also directly create an empty .prettierrc file in the current folder. Prt will automatically load the configuration file and apply its settings.

At the same time, we also need to create a .prettierignore file, which is used to configure files that Prt should ignore during formatting (ignoring files that do not need formatting). For example:

shell
# Ignore artifacts:

# Ignore files under build and coverage folders
build
coverage

# Ignore all HTML files:
**/*.html

So even if you don't configure an ignore file, your final .prettierignore will not be empty, but will look like this:

shell
**/.git
**/.svn
**/.hg
**/node_modules

Prettier uses cosmiconfig for configuration file support. This means you can configure Prettier via (in order of precedence):

Prt uses cosmiconfig to provide configuration file support, which means you can control the priority of configuration files:

• A "prettier" key in your package.json file. The prettier field in package.json.
• A .prettierrc file written in JSON or YAML. .prettierrc file
• A .prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.
• A .prettierrc.js, or prettier.config.js file that exports an object using export default or module.exports (depends on the type value in your package.json).
• A .prettierrc.mjs, or prettier.config.mjs file that exports an object using export default.
• A .prettierrc.cjs, or prettier.config.cjs file that exports an object using module.exports.
• A .prettierrc.toml file.

The configuration file will be resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn’t) found.

The configuration file will start resolving from the location of the file being formatted and search up the file tree until a config file is (or isn’t) found.

#Run Prt Script to Format Code

shell
npx prettier . --write

We can also specify the directory of files to format:

shell
prettier --write app/

Or specify a certain file:

shell
prettier --write app/components/Button.js

Maybe you just want to check whether the code has been formatted by Prt, you can use the --check flag:

shell
npx prettier . --check

#Use in Editor

Formatting code via command line can be tedious; you might think of using Node listeners or other methods to detect file changes and automatically execute the Prt formatting script. But we have a more convenient way — many editors now support Prt, allowing us to quickly format files while developing code.

The Prt official website shows ways to integrate Prt with some commonly used editors. Here we only briefly introduce how to use it in VSCode.

Search for Prettier - Code formatter in the VSCode extensions and install the plugin.

After installing the plugin, it is automatically enabled. Now let's modify the VSCode settings so that when we finish editing a file and save it (Ctrl + S), Prt will trigger formatting of the file.

In the top menu bar of VSCode, click File → Preferences → Settings → User → Text Editor → Formatting. Check Format on Save.

In theory, saving a code file supported by Prt will successfully trigger formatting, and VSCode will automatically load the Prt configuration file in the current directory. For users who use TypeScript or have installed the ESLint plugin, these tools themselves provide their own formatting rules. If your Prt configuration does not take effect, you can right-click the file, choose ... Format Document → Configure Default Formatter... → Prettier - Code formatter to switch the formatter used by VSCode.

#Configuration

The reason Prt was created is to get rid of the cumbersome configuration options in other formatting tools, which cause inconsistent formatting across different terminals in the same project. Therefore, Prt has very few style configuration options — since you are using Prt, you must first accept Prt's own set of rules.

You can view Prt's configuration items by clicking here to go to the official website.

#File Parsing

When running, Prt automatically selects the corresponding parser based on the file extension. You can configure Prt to handle files it cannot understand:

js
{
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

// Prt cannot understand .prettierrc files, so we add this configuration to let Prt parse .prettierrc files as JSON