This is the second day of my participation in Gwen Challenge

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Prettier is an opinionated code formatter. It achieves a consistent style by parsing the code and reprinting it using its own rules (taking into account the maximum line length) and wrapping it if necessary.

Plug-in Installation List

  • Vetur (0.24.0)

  • Prettier (4.4.0)

  • Manta’s Stylus Supremacy (2.15.0)

Simple configuration to save file formatting

Go to settings.json and copy the following configuration code

To open VSCode’s system settins.json file, CTRL + Shift + P, search open Settings (json)

// Format the Settings
"editor.formatOnSave": true.// Whether to format when saving
"editor.minimap.maxColumn": 80.// Right thumbnail width dimensions
"editor.detectIndentation": false.// Turn off the option to automatically set tabsize based on the file type
"vetur.format.defaultFormatter.html": "prettier"."vetur.format.defaultFormatter.js": "prettier"."vetur.format.defaultFormatter.less": "prettier"."vetur.format.defaultFormatter.css": "none"."vetur.format.options.useTabs": true.// Use TAB formatting instead of Spaces
"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
},
"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "printWidth": 120.// Code width
        "singleQuote": false.// Whether to use single quotation marks
        "semi": true.// Use a semicolon at the end
        "tabWidth": 4.// Indent units
        "arrowParens": "avoid".// Whether parentheses are required when the function body is an argument
        "bracketSpacing": true.// Add a space between the array parentheses and the text in the object "{foo: bar}"
        "proseWrap": "preserve" // If the code is out of line, the code should be changed to preserve it}},// Use to format the stylus
"stylusSupremacy.insertColons": false.// Whether to insert a colon
"stylusSupremacy.insertSemicolons": false.// Whether to insert semicolons
"stylusSupremacy.insertBraces": false.// Whether to insert braces
"stylusSupremacy.insertNewLineAroundImports": false.// whether the import is followed by a line break
"stylusSupremacy.insertNewLineAroundBlocks": false.// Is there a line break between the two selectors
Copy the code

Complete configuration (personal)

{
    // Format the Settings
    "editor.formatOnSave": true.// Whether to format when saving
    "editor.minimap.maxColumn": 80.// Right thumbnail width dimensions
    "editor.detectIndentation": false.// Turn off the option to automatically set tabsize based on the file type
    "vetur.format.defaultFormatter.html": "prettier"."vetur.format.defaultFormatter.js": "prettier"."vetur.format.defaultFormatter.less": "prettier"."vetur.format.defaultFormatter.css": "none"."vetur.format.options.useTabs": false.// Use TAB formatting instead of Spaces
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "printWidth": 120.// Code width
            "singleQuote": false.// Whether to use single quotation marks
            "semi": true.// Use a semicolon at the end
            "tabWidth": 4.// Indent units
            "arrowParens": "avoid".// Whether parentheses are required when the function body is an argument
            "bracketSpacing": true.// Add a space between the array parentheses and the text in the object "{foo: bar}"
            "proseWrap": "preserve" // If the code is out of line, the code should be changed to preserve it}},// Manta's stylus supremacy
    "stylusSupremacy.insertColons": false.// Whether to insert a colon
    "stylusSupremacy.insertSemicolons": false.// Whether to insert semicolons
    "stylusSupremacy.insertBraces": false.// Whether to insert braces
    "stylusSupremacy.insertNewLineAroundImports": false.// whether the import is followed by a line break
    "stylusSupremacy.insertNewLineAroundBlocks": false.// Is there a line break between the two selectors
    / / less Settings
    "less.compile": {
        "compress": false."sourceMap": false."out": ". \ \".// This represents the location of the compiled CSS file. The current format indicates that the index. CSS file is generated in the current directory
    },
    "files.exclude": {
        "**/node_modules/*/**": true
    },
    "vetur.format.options.tabSize": 4."diffEditor.ignoreTrimWhitespace": false."editor.fontSize": 17."explorer.confirmDelete": false."[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "window.zoomLevel": 1."prettier.jsxBracketSameLine": true."prettier.vueIndentScriptAndStyle": true."cSpell.words": [
        "border"."continuest"."get"."groupmanage"."jjsg"."jobsmanage"."realname"."state"."dev"."docs"."open"."vitepress"],}Copy the code

Document Configuration Parameter List (Excerpt)

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

Official full configuration document hyperlink