vscode保存代码,自动按照eslint规范格式化代码设置

1. 安装 eslint 插件
2. 打开用户配置
   文件 -> 首选项 -> 设置
   搜索setting.json填写如下配置

{
  "workbench.colorTheme": "Atom Material Theme",
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true,
    "build/": true,
    "temp/": true,
    "library/": true,
    "**/*.anim": true,
  },
  "files.associations": {
    "*.vue": "html"
  },
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/*.meta": true,
    "**/.history": true,
    "**/.idea": true,
    "**/idea": true,
    "**/logs": true,
    "**/target": true,
    "**/pid": true,
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true,
  },

  // editor ----------------------------------------

  // 保存时-自动格式化 - 容易跟Eslint冲突，建议禁止
  // "editor.formatOnSave": true,

  // 保存时-自动格式化 - 启用eslint
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 每次保存的时候将代码按eslint格式进行修复
  },
  // 粘贴时-自动格式化
  "editor.formatOnPaste": false,


  // 缩进 ------------------------------------------

  // 自动调整缩进, 默认值：full
  // "editor.autoIndent": "none",

  // 字体大小
  "editor.fontSize": 14,
  // tab空格为2
  "editor.tabSize": 2,

  // 按 "Tab" 时插入空格。
  // "editor.insertSpaces": true,

  // VS Code分析打开的文件并确定文档中使用的缩进。自动检测到的缩进将覆盖您的默认缩进设置"editor.tabSize" 和 "editor.insertSpaces"
  // 。检测到的设置显示在状态栏的右侧：
  "editor.detectIndentation": false,

  // 不要自动换行
  "beautify.config": {
    "brace_style": "collapse,preserve-inline"
  },

  
  //关闭迷你图快速预览
  // "editor.minimap.enabled": false,
  
  // eslint --------------------------------------

  // 此设置已被弃用
  // "eslint.enable":false, 

  // 此设置已过时，用下句
  // "eslint.autoFixOnSave": true, 

  // 保存时 - 将代码按eslint格式进行修复
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
    // {   
    //     "language": "html",
    //     "autoFix": true    默认就启用，所以直接用字符串格式即可。
    // },
  ],
  "window.zoomLevel": 0,
  "explorer.confirmDelete": false,
  // "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "[vue]": {},
  "workbench.activityBar.visible": true,
  "[json]": {
  
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace"
  },


  /* 根据不同语言设置选项 ----------------------------------------------

    "[xx语言]": {
      "editor.formatOnSave": true,
      "editor.formatOnPaste": true
    },

    "[javascript]": {
      "editor.defaultFormatter": "HookyQR.beautify"
    },
    // 启用后会自动按4个空格格式化
    "[html]": {
      "editor.defaultFormatter": "HookyQR.beautify"
    },
    
    // #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  
  */
  /* prettier  ----------------------------------------------

    // #让prettier使用eslint的代码格式进行校验 
    "prettier.eslintIntegration": true,
    // #去掉代码结尾的分号 
    "prettier.semi": false,
    // #使用带引号替代双引号 
    "prettier.singleQuote": true,
    
  */
  /* vetur 语法高亮 (避免代码一片漆黑）----------------------------------------------
    
    // #这个按用户自身习惯选择 
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按编辑器自带的ts格式进行格式化 
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_line_length": 120,
        "wrap_attributes": "auto"
        // #vue组件中html代码格式化样式
      }
    } 
  
  */

  
  /* VS的格式化程序 ----------------------------------------------

    VS Code具有JavaScript，TypeScript，JSON和HTML的默认格式化程序。
    每种语言都有特定的格式设置选项（例如html.format.indentInnerHtml），
    您可以在用户或工作空间设置中将其调整为自己的偏好。如果安装了另一个扩展程序，可以提供相同语言的格式设置，则也可以禁用默认语言格式程序。
    "html.format.enable": false
    除了手动调用代码格式外，您还可以根据用户手势（例如键入，保存或粘贴）来触发格式。这些默认情况下是关闭的，但是您可以通过以下设置启用这些行为：

    editor.formatOnType -键入后设置行格式。
    editor.formatOnSave -保存时格式化文件。
    editor.formatOnPaste -格式化粘贴的内容 
  */
  
}