Configuration Guide for Prettier

theme: smartblue highlight: a11y-dark

Prettier for your reference. Because personal understanding ability is limited, if there is a mistake, please don’t hesitate to comment.

A, install,

Install command

//npm
npm install --save-dev --save-exact prettier
//yarn
yarn add --dev --exact prettier
Copy the code

Ii. Document preparation

The file needed to create Prettier

Example Create the. Prettierrc. js configuration file and the. Prettierignore ignore file in the root directory

Create the configuration

1. Create a formatting reference rule

Prettierrc.js Write the following in.prettierrc.js:

// The rules here are for your reference. Most of them are actually default values, which can be changed according to personal habits
module.exports = {
  printWidth: 80.// Single line length
  tabWidth: 2.// Indent length
  useTabs: false.// Use Spaces instead of TAB indentation
  semi: true.// Use a semicolon at the end of a sentence
  singleQuote: true.// Use single quotes
  quoteProps: 'as-needed'.// Add quotes to the key of the object only when necessary
  jsxSingleQuote: true.// JSX uses single quotes
  trailingComma: 'all'.Print trailing commas if possible for multiple lines
  bracketSpacing: true.// Add Spaces before and after the object -eg: {foo: bar}
  jsxBracketSameLine: true.// Multi-attribute HTML tag '>' folded line placement
  arrowParens: 'always'.// Use parentheses around the arguments of the single-argument arrow function -eg: (x) => x
  requirePragma: false.// Format without top comments
  insertPragma: false.// Add annotations at the top of files that have been formatted by Preitter
  proseWrap: 'preserve'.// Don't know how to translate
  htmlWhitespaceSensitivity: 'ignore'.// Not sensitive to HTML global whitespace
  vueIndentScriptAndStyle: false.// Do not indent script and style tags in vue
  endOfLine: 'lf'.// End the line form
  embeddedLanguageFormatting: 'auto'.// Format the reference code
};
Copy the code

Formatting rules can also be written in the following files (in descending order of priority) :

1. Projectpackage.jsonIn the file

2. .prettierrc.jsonor.prettierrc.ymlIn the file

// A sample format
{
  "trailingComma": "es5"."tabWidth": 4."semi": false."singleQuote": true
}
Copy the code

3. .prettierrc.jsorprettier.config.cjsIn the file

// A sample format
module.exports = {
  trailingComma: 'es5'.tabWidth: 4.semi: false.singleQuote: true};Copy the code

In addition, there are many other types that can be written in the preitter website.

2. Configure the ignore file

In. Prettierignore, write the following:

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
*.html
Copy the code

Format the document

1. Format the command line

(1) Format all documents

NPX prettier --write. // or yarn prettier --write.Copy the code

(2) Format the specified document

NPX prettier --write SRC /components/ button. js // or yarn Prettier --write SRC /components/ button. jsCopy the code

(3) Check whether the document has been formatted

NPX prettier --check. // or yarn prettier --checkCopy the code

2. Use the editor plug-in for formatting

Search for the corresponding Prettier installation in an editor and format it using the editor shortcut keys.

Important: The formatting rule for Prettier in the editor can also be written in Settings, but local rules take precedence when executed.

3. Integrate with ESlint

ESlint and Prettier may conflict, so you need to do the following:

//1. Install the eslint-config-prettier plug-in
npm i -D eslint-config-prettier
//2. Write the following to the esLint configuration file
 extends: ['plugin:prettier/recommended'].Avoid conflict with Prettier
Copy the code

4. Integrate in git lifecycle

Passage Ten Complete with Lint-passage and Husky

—– End the text —–

—– The following is the beautification effect corresponding to the previous rule (3-1). For details, see —– to configure the debugging address

Beautify the front:

function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {
  
  
  let quotePropsDemo = {
    a:1.'b-2':2.'c':3
  }

  let arrowParensDemo =x= >x
  
  if(! greeting){return null};

     // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig."")

  return <div className='HelloWorld' title={`You are visitor numberThe ${num} `}onMouseOver={onMouseOver}>

    <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>{greeting.endsWith(",") ? "" :<span style={{color: '\grey'}} >","</span> }
    <em>
	{ greeted }
	</em>{ (silent) ? ". ", "!" }</div>;

}
Copy the code

After the beautification:

function HelloWorld({
  greeting = 'hello',
  greeted = '"World"',
  silent = false,
  onMouseOver,
}) {
  let quotePropsDemo = {
    a: 1.'b-2': 2.c: 3};let arrowParensDemo = (x) = > x;

  if(! greeting) {return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1e7)
    .toString()
    .replace(/\.\d+/gi.' ');

  return (
    <div
      className="HelloWorld"
      title={`You are visitor numberThe ${num} `}onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>{greeting.endsWith(',') ? (' ') : (<span style={{ color: 'grey' }}>","</span>
      )}
      <em>{greeted}</em>
      {silent ? '.' : '!'}
    </div>
  );
}

Copy the code