需要下载的插件

ESLint Prettier - Code formatter

如果用vue-cli生成项目，把ESLint 相关的选上
如果没选上在根目录下新建.eslintrc.js，.gitignore
需要安装的插件

yarn add @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/eslint-config-prettier babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue prettier

.eslintrc.js，.gitignore 文件在这里：https://www.jianshu.com/p/389fe2309514

保存后可自动格式化
如果设置了没效果，可能是当前窗口打开了多个项目，当前窗口只打开当前配置了eslint的项目才有效
如果项目在vue-element下面的element-pro里，打开的时候是打开element-pro而不是vue-element

image.png

setting.json

{
  "files.autoSave": "afterDelay",
  "http.proxyAuthorization": null,
  "workbench.colorTheme": "One Dark Pro",
  "typescript.validate.enable": true,
  "javascript.validate.enable": true,
  "window.openFilesInNewWindow": "on",
  "git.ignoreMissingGitWarning": true,
  "editor.minimap.enabled": false,
  "workbench.editor.enablePreview": false,
  "window.menuBarVisibility": "default",
  "editor.fontFamily": "Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "window.zoomLevel": 0,
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "workbench.tree.renderIndentGuides": "always",
  "emmet.triggerExpansionOnTab": true,
  "workbench.colorCustomizations": {},
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.lineHeight": 22,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  //  #使用单引号替代双引号
  "editor.tokenColorCustomizations": {
    "keywords": "#C678DD",
    "variables": "#c97874",
    "strings": "#98C379",
    "functions": "#61AFEF",
    "numbers": "#FFB639",
    "comments": "#5C6370",
    "types": "#489c3c",
    "textMateRules": [
      {
        "name": "CSS: Property Names",
        "scope": [
          "meta.property-name",
          "support.type.property-name"
        ],
        "settings": {
          "foreground": "#92920b"
        }
      }
    ]
  },
  "editor.fontSize": 15,
  "window.openFoldersInNewWindow": "on",
  "css.lint.duplicateProperties": "warning",
  "editor.rulers": [],
  "auto-close-tag.activationOnLanguage": [
    "xml",
    "php",
    "blade",
    "ejs",
    "jinja",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "vue",
    "liquid",
    "erb",
    "lang-cfml",
    "cfml",
    "HTML (EEx)",
    "HTML (Eex)",
    "plist"
  ],
  "explorer.confirmDragAndDrop": false,
  "editor.detectIndentation": false,
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "prettier.semi": true, //去掉代码结尾的分号
  "prettier.singleQuote": true, //使用带引号替代双引号
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  // eslint配置
  "eslint.format.enable": true, // eslint格式化开启
  "eslint.validate": [
    // eslint校验的文件列表
    "javascript",
    "vue",
    "html"
  ],
  /* 添加如下配置 */
  "vetur.format.defaultFormatter.js": "vscode-typescript", // 取消vetur默认的JavaScript格式化工具
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint" // 只采用eslint的格式化
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur" // vue文件还是采用vetur格式化
  },
  // 格式化
  // "[javascript]": {
  //   "editor.defaultFormatter": "vscode.typescript-language-features"
  // },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}