VScode formatted code configuration and plugin

Open the setting (the new version of vscode is opened in 2019)
Code --> preferences -->setting (You can also open it directly with the shortcut key command +, (mac))

What you see now is the interface configuration mode. Click the red box icon in the upper right corner (as shown below) to open the settings.json file

Shortcut for formatting
Windows: Shift + Alt + F
Mac: Shift + Option + F
Ubuntu: Ctrl + Shift + I

After installing Elinst Vetur Prettier, you only need this configuration to handle the problems between these plug-ins:

wildcard: This configuration supports the formatting of CSS, HTML, JS, and Vue files. You can refer to it and configure it according to your own needs. If there is no special requirement, you can use it directly

{
    
    
  // vscode默认启用了根据文件类型自动设置tabsize的选项
   "editor.detectIndentation": false,
  // tab 大小为2个空格
  "editor.tabSize": 2,
  // 100 列后换行
  "editor.wordWrapColumn": 100,
  // 保存时格式化
  "editor.formatOnSave": true,
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  // prettier 设置语句末尾不加分号
  "prettier.semi": false,
  // prettier 设置强制单引号
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 选择 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "prettyhtml",
  // 显示 markdown 中英文切换时产生的特殊字符
  "editor.renderControlCharacters": true,
  // 设置 eslint 保存时自动修复
  "eslint.autoFixOnSave": true,
  // eslint 检测文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
    
    
      "language": "html",
      "autoFix": true
    },
    {
    
    
      "language": "vue",
      "autoFix": true
    }
  ],
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    
    
    "prettier": {
    
    
      "singleQuote": true,
      "semi": false
    }
  }
}