先在vscode安装依赖的Vetur，ESlint，Prettier插件

image.png

打开配置信息
在vscode设置中点击右上角的open settings（JSON）

{
  "editor.minimap.enabled": true,
  "team.showWelcomeMessage": false,
  "editor.fontSize": 16,
  "search.followSymlinks": false,
  "workbench.colorTheme": "Material Theme Darker",
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.iconTheme": "vscode-icons",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "terminal.integrated.rendererType": "dom",
  "files.associations": {
    "*.wpy": "vue"
  },
  "git.confirmSync": false,
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // #去掉代码结尾的分号
  "prettier.semi": false,
  // #使用带引号替代双引号
  "prettier.singleQuote": true,
  // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  },
  "workbench.activityBar.visible": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

配置完成后重启vscode，发现vue文件能正常格式化了！
好景不长啊。。。。。。
后来更新vscode之后发现js文件格式化后又添加上分号和双引号了！
网上苦苦搜寻，皇天不负有心人！
在项目中安装prettier

npm install prettier -D

然后在项目主目录新建.prettierrc.json文件，注意前面的.点，写入

{
  "singleQuote": true,
  "semi": false
}

其他参考文件

// ---------------------- .eslintrc.js
// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint"
  },
  env: {
    browser: true
  },
  globals: {
    scope: true
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    "plugin:vue/essential",
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    "standard"
  ],
  // required to lint *.vue files
  plugins: ["vue"],
  // add your custom rules here
  rules: {
    // allow async-await
    "generator-star-spacing": "off",
    // allow debugger during development
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  }
};
// ---------------------- .eslintignore
/build/
/config/
/dist/
/*.js
// ---------------------- .editorconfig
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true