Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of what the 16 practical attributes in the vscode Prettier option are, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value, I believe you will gain something after reading the 16 practical attributes in this vscode Prettier option, let's take a look.

Prettier introduction and usage configuration:

     Prettier is a tool that supports code formatting in multiple programming languages with less configuration, and has integrated and provided plug-ins in most commonly used editors.

     We can use the address of the plug-in provided at the end of the article or search the store in VSCode to find the one with the largest number of downloads. After installing the plug-in, we can configure a style that conforms to our customization by configuring the .prettierrc file in the project root directory, which is recommended to be in JSON format. Of course, other configuration file naming and writing methods are also supported, and the corresponding address of the original document is also provided at the end of the document. Remember to choose the default formatter as Prettier.

Property description:

Print Width:

Introduction and description: for the width of lines of code, it is generally recommended that the maximum length of each line is 100amp 120, but it is best not to exceed these two numbers.

API:printWidth

Parameter type: int

Default value: 80

Tab Width:

Introduction and description: specify the number of spaces to indent each time.

API:tabWidth

Parameter type: int

Default value: 2

Tabs:

Introduction and description: whether to use tabs instead of spaces to perform indentation.

API:useTabs

Parameter type: bool

Default value: false

Semicolons:

Introduction and description: whether to add a semicolon at the end of the code statement.

API:semi

Parameter type: bool

Default value: true

Quotes

Introduction and description: whether to use single quotation marks or not, JSX is set separately.

API:singleQuote

Parameter type: bool

Default value: false

JSX Quotes

Introduction and description: whether to use single quotation marks in JSX.

API:jsxSingleQuote

Parameter type: bool

Default value: false

Trailing Commas

Introduction and explanation: add trailing commas to multiple lines separated by commas as much as possible.

API:trailingComma

Parameter type: es5 / none / all

Default value: es5

Es5 is supplemented in ES5, for example, (object, array) none does not supplement all as much as possible, including function parameters, function calls, and support for TSBracket Spacing

Introduction and description: whether to fill in spaces between object properties and curly braces.

API:bracketSpacing

Parameter type: bool

Default value: true

Bracket Line

Introduction and description: whether the right angle bracket of the opening tag follows at the end of the last line of attributes.

Premise: non-self-ending tags, HTML multiline attributes (HTML, JSX, Vue, Angular)

API:bracketSameLine

Parameter type: bool

Default value: false

Arrow Function Parentheses

Introduction and description: the arrow function for a single parameter uses parentheses.

API:arrowParens

Parameter type: always / avoid

Default value: always

Require Pragma

Introduction and description: whether there is only 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 description: whether to insert a tag 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 description: whether to indent the code and tags in the Vue file, the script and style sections.

API:vueIndentScriptAndStyle

Parameter type: bool

Default value: false

End of Line

Introduction and description: set line wrap style to avoid a large number of code diff 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 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 description: whether to force each attribute to occupy a row in Html,Vue,JSX.

API:singleAttributePerLine

Parameter type: bool

Default value: false

This is the end of the article on "what are the 16 practical attributes in the vscode Prettier option?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what are the 16 practical attributes in the vscode Prettier option". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.