After vs code is formatted, the function name will be automatically followed by a space

1. brief introduction

hi , Hello everyone ！ Today I'd like to share with you , How the vscode Add a space after the function name in , Give Way Function names and （） There's a space between , Everyone here should Be careful Yes. ：Prettier - Code formatter This function cannot be realized , We need to With the help of Vetur To achieve , Xiaobian used to be very fascinated , Why are all configurations configured . We are still There is no effect , It's actually Wrong plug-in , We Should use the Vetur.

2. setting.json Configuration code

Be careful ： Here are just some code snippets , here You need to install Vetur This plugin , Then configure .

//  Here is the effect of realizing that there is a space after the function name 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

3. setting.json All configuration

Here are just some simple places , There is one Path Autocomplete This plugin , This It's also very easy to use , If there is You can configure what you like , The corresponding configuration is in the second comment

{
    
  //  Basic configuration 
  "editor.fontSize": 18,
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "window.zoomLevel": 2,

  /*  Path auto prompt configuration  + PathA... */
  "path-autocomplete.extensionOnImport": true,
  "path-autocomplete.pathMappings": {
    
    "@": "${folder}/src"
  },

  //  Use vscode-icons The theme 
  "workbench.iconTheme": "vscode-icons",

  //  Every time you save, fix the code according to the format 
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    
    "source.fixAll": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "[javascript]": {
    
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    // "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[vue]": {
    
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    // "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[jsonc]": {
    
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  //vetur  formatting code 
  // "vetur.format.defaultFormatter.js": "prettier",
  //  Here is the effect of realizing that there is a space after the function name 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.completion.autoImport": true,
  "vetur.format.defaultFormatterOptions": {
    
    "prettier": {
    
      //  No semicolon at the end 
      "semi": false,
      //  exceed 140 Character line feed 
      "printWidth": 300,
      //  Use single quotes 
      "singleQuote": true,
      //  No trailing comma 
      "trailingComma": "none",
      //  Arrow function without semicolon for single parameter 
      "arrowParens": "avoid"
    },
    "prettyhtml": {
    
      "printWidth": 300
    }
  },

  //  ditto prettier formatting code 
  "prettier.semi": false,
  "prettier.printWidth": 300,
  "prettier.tabWidth": 2,
  "prettier.trailingComma": "none",
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid",
  "prettier.eslintIntegration": true,
  "files.associations": {
    
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  //  Appoint wxml Formatting 
  "minapp-vscode.wxmlFormatter": "prettyHtml",
  "minapp-vscode.disableAutoConfig": true,
  "workbench.sideBar.location": "right",
  "editor.formatOnType": true
}

4. summary

Actually , It's suggested that you should be in To configure setting.json When , Configure what you need and Aware of , otherwise , Lots of configurations , You are also I don't know how to control , What's wrong , Also very depressed , There's no way to start .