Detailed tutorial on using the Prettier Code plugin in vscode

Detailed tutorial on using the Prettier Code plugin in vscode

Why use prettier?

In large companies, front-end development code may have its own code standards. How can you quickly generate your own code standards? Using Prettier is a better choice!

How to install Prettier Code plugin?

insert image description here

In the last option in the sidebar, search for Prettier Code in the search bar and install it.

How to configure in the project

In your new project, you can create two new configuration files, one is the .prettierignore file, which is similar to the .gitignore file in order to ignore files; the other is the .prettierrc.js file, which is used to configure your code verification rules.

.prettierignore is configured as follows

**/*.md
**/*.svg
**/*.ejs
**/*.html
package.json
.umi
.umi-production
.umi-test

.prettierrc.js is configured as follows

module.exports = {
    // A line can contain up to 100 characters printWidth: 100,
    // Use 2 spaces to indent tabWidth: 2,
    // Do not use indentation characters, but use spaces useTabs: false,
    // A semicolon is required at the end of the line semi: true,
    // Use single quotes singleQuote: true,
    // Object keys are quoted only when necessary quoteProps: 'as-needed',
    // jsx does not use single quotes, but double quotesjsxSingleQuote: false,
    // No trailing comma required trailingComma: 'all',
    // Spaces are required at the beginning and end of the braces bracketSpacing: true,
    // The reverse angle brackets of jsx tags need to be wrapped jsxBracketSameLine: false,
    // Arrow function, when there is only one parameter, also needs brackets arrowParens: 'always',
    // The range of each file format is the entire content of the file rangeStart: 0,
    rangeEnd: Infinity,
    // No need to write @prettier at the beginning of the file
    requirePragma: false,
    // No need to automatically insert @prettier at the beginning of the file
    insertPragma: false,
    // Use the default line wrapping standard proseWrap: 'preserve',
    //Determine whether to wrap HTML based on display style htmlWhitespaceSensitivity: 'css',
    // Use lf for line breaks
    endOfLine: 'auto',
};

Now all the configurations are complete. Every time you write code, right-click and select Format Document .

This is the end of this article about the detailed tutorial on using the Prettier Code plug-in in vscode. For more relevant content about using Prettier Code in vscode, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • vscode configure eslint and prettier correct method
  • Detailed explanation of using code to format configuration using the Prettier plugin in vscode
  • vscode configures vue+vetur+eslint+prettier automatic formatting function
  • Configuration of eslint plugin in vscode (prettier configuration is invalid)

<<:  MySQL 5.7.29 + Win64 decompression version installation tutorial with pictures and text

>>:  Alibaba Cloud Server Domain Name Resolution Steps (Tutorial for Beginners)

Recommend

Unicode signature BOM (Byte Order Mark) issue for UTF-8 files

I recently encountered a strange thing when debug...

How to add Nginx to system services in CentOS7

Introduction After compiling, installing and solv...

Detailed explanation of Angular structural directive modules and styles

Table of contents 1. Structural instructions Modu...

Future-oriented all-round web design: progressive enhancement

<br />Original: Understanding Progressive En...

jQuery implements accordion small case

This article shares the specific code of jQuery t...

8 tips for Vue that you will learn after reading it

1. Always use :key in v-for Using the key attribu...

IE6 web page creation reference IE6 default style

This is not actually an official document of IE. I...

Example code for css flex layout with automatic line wrapping

To create a flex container, simply add a display:...

nginx+tomcat example of accessing the project through the domain name

I was curious about how to access the project usi...

JavaScript implements div mouse drag effect

This article shares the specific code for JavaScr...

5 Tips for Protecting Your MySQL Data Warehouse

Aggregating data from various sources allows the ...

In-depth understanding of the vertical-align property and baseline issues in CSS

vertical-align attribute is mainly used to change...

Detailed tutorial for installing ElasticSearch:7.8.0 cluster with docker

ElasticSearch cluster supports動態請求的方式and靜態配置文件to ...

Implementation steps for docker deployment of springboot and vue projects

Table of contents A. Docker deployment of springb...

CSS3 animation to achieve the effect of streamer button

In the process of learning CSS3, I found that man...