Take a look at the 16 practical attributes in the vscode Prettier option to make your code beautiful!

This article takes a look at the options of Prettier, and summarizes and shares 16 attributes that make your code beautiful. I hope it will be helpful to everyone!

I have been doing front-end development for a long time, but every time I rely on scaffolding or open source code templates to write code in a unified style. When I encounter something I don’t like, I don’t know how to adjust it. , Baidu failed to do it several times, so it could only make do with it. This time, I specifically took a look at the

option, and figured it out in one go. This is quite used in code formatting scenarios (20,533,053 installations )Tool of. [Recommended study: "vscode Getting Started Tutorial"]

Prettier introduction and usage configuration:    

is a tool that supports multiple programming languages ​​for code formatting with less configuration, and has integrated and provided plug-ins in most commonly used editors. We can use the plug-in address provided at the end of the article or search in the store in

to find the one with the largest download volume. After installing the plug-in, we can configure a style that matches our customization by configuring the .prettierrc file in the project root directory. It is recommended to use JSON format combination for the file content. Of course, other configuration file naming and writing methods are also supported. The corresponding address of the original document is also provided at the end of the article. Remember to select the default formatter as Prettier.

It is also recommended to format the code when saving in VSCode under the project configuration, and automatically save when the window status changes, because Too many saves can cause unnecessary trouble.

Attribute introduction:

• API:
printWidth
• Parameter type: int
• Default value: 80

• API:
tabWidth
• Parameter type: int
• Default value: 2

• API:
useTabs
• Parameter type: bool
• Default value: false

• API:
semi
• Parameter type: bool
• Default value: true

• API:
singleQuote
• Parameter type: bool
• Default value: false

• API:
jsxSingleQuote
• Parameter type: bool
• Default value: false

• API:
trailingComma
• Parameter type: es5 / none / all
• Default value: es5

Bracket Spacing

• Introduction and description: Whether to fill spaces between object properties and braces.
• API: bracketSpacing
• Parameter type: bool
• Default value: true

Bracket Line

• Introduction and explanation: Whether the right angle bracket of the start tag follows the end of the last line of attributes.
• Prerequisite: non-self-ending tag, HTML multi-line attributes (HTML, JSX, Vue, Angular)
• API: bracketSameLine
• Parameter type: bool
• Default value: false

Arrow Function Parentheses

• Introduction and explanation: Single parameter arrow functions use parentheses.
• API: arrowParens
• Parameter type: always / avoid
• Default value: always

Require Pragma

• Introduction and explanation: Whether to format only the code with special comments at the beginning of the format file.
• API: requirePragma
• Parameter type: bool
• Default value: false

/**
 * @prettier
 */
 or
/**
 * @format
 */

Insert Pragma

• Introduction and explanation: Whether to insert a mark in the file indicates that the file has been formatted.
• API: insertPragma
• Parameter type: bool
• Default value: false

Vue files script and style tags indentation

• Introduction and explanation: Whether to indent the code and tags in the Vue file, script and style parts.
• API: vueIndentScriptAndStyle
• Parameter type: bool
• Default value: false

End of Line

• Introduction and explanation: Set the newline style to avoid a large number of code diffs caused by different operating systems.
• API: endOfLine
• Parameter type: lf / crlf / cr / auto
• Default value: lf

Embedded Language Formatting

• Introduction and description: Whether to format the style of code snippets that are embedded in some files, if the plug-in can recognize it.
• API: embeddedLanguageFormatting
• Parameter type: off / auto
• Default value: auto

##Single Attribute Per Line

Introduction and explanation: Whether to force each attribute to occupy one line in Html, Vue, and JSX.
• API:
• singleAttributePerLine
Parameter type: bool
• Default value: false

Write at the end ：

Link arrangement:

• Prettier: https://prettier.io/

##Prettier (vscode plug-in): https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Configuration file: https://prettier.io/docs/en /configuration.html
Online debugging: https://prettier.io/playground/
For more knowledge about VSCode, please Visit:

! !

The above is the detailed content of Take a look at the 16 practical attributes in the vscode Prettier option to make your code beautiful!. For more information, please follow other related articles on the PHP Chinese website!