1. Install the plug-in

2. Vscode Settings configuration

    // item.prettierrc File path configuration
    "prettier.configPath": ".prettierrc".// Format the file
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
Copy the code

3. Create the. Prettierrc file in the project root directory

{
  // The configuration of prettier
 "printWidth": 120.// Over the maximum line break
 "tabWidth": 4.// Indent the number of bytes
 "useTabs": false.// Indent instead of TAB, use Spaces
 "semi": true.// Add a semicolon at the end of a sentence
 "singleQuote": true.// Use single quotes instead of double quotes
 "proseWrap": "preserve".// Default value. Folds markdown text style due to the use of some fold-sensitive renderer (such as GitHub Comment)
 "arrowParens": "avoid".// (x) => {} arrow function with only one argument whether to have parentheses. Avoid: omit parentheses
 "bracketSpacing": true.// Add a space between the object, array bracket and text "{foo: bar}"
 "disableLanguages": ["vue"].// Do not format the vue file, the vue file formatting is set separately
 "endOfLine": "auto".// It ends with \n\r \n\r auto
 "eslintIntegration": false.// Don't let Prettier use ESLint's code format for validation
 "htmlWhitespaceSensitivity": "ignore"."ignorePath": ".prettierignore".// Fill in the. Prettier ignore file of the project without the formatting of prettier
 "jsxBracketSameLine": false.// Whether to put '>' on a single line in JSX
 "jsxSingleQuote": false.// Use single quotes instead of double quotes in JSX
 "parser": "babylon".// Formatted parser, default to Babylon
 "requireConfig": false.// Require a 'prettierconfig' to format prettier
 "stylelintIntegration": false.// Don't let Prettier use the code format of stylelint to check
 "trailingComma": "es5".// Whether to place a comma after the last element of an object or array (as in ES5)
 "tslintIntegration": false // Don't let Prettier use tsLint's code format for validation
}
Copy the code