VS code 自动保存与vue cli+eslint格式化冲突简单解决办法

VS code 保存会自动格式化。以前都是alt+shift+F格式化的，现在一保存就格式化。刚写好的代码，格式化之后就乱套了，特别是用了eslint之后运行项目各种报错频频出现。往往会添加一些并不是我们想要的补齐

一、常见的eslint错误：

• error Strings must use singlequote quotes
  字符串必须使用单引号

• error Extra semicolon semi
  额外分号半 (;)

• error Trailing spaces not allowed no-trailing-spaces
  不允许有尾随空格没有尾随空格

• error Missing space before function parentheses space-before-function-paren
  函数前缺少空格括号函数前有空格括号

• error Newline required at end of file but not found eol-last
  在文件末尾需要换行符，但在最后一个eol中找不到。

  这个错误很神奇代码，必须在代码结尾增加一个换行，多一个换行空格都不行

因此我们需要将VS code 的某些格式化功能清除掉

二、Prettier - Code formatter 插件

中文意思是“漂亮的、机灵的”，也是一个流行的代码格式化工具的名称，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。

官方文档...

Prettier具有以下几个有优点：
1.可配置化
2.支持多种语言
3.集成多数的编辑器
4.简洁的配置项
使用Prettier在code review时不需要再讨论代码样式，节省了时间与精力。

三、配置settings.json文件

{
  "files.autoSave": "afterDelay",
  "liveServer.settings.CustomBrowser": "chrome",
  // #每次保存的时候自动格式化 
  "editor.formatOnSave": false,
  "html.format.indentInnerHtml": true,
  "html.format.indentHandlebars": true,
  "eslint.format.enable": true,
  "prettier.requirePragma": true,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  //分号
  "prettier.semi": false,
  //单引号包裹字符串
  "prettier.singleQuote": true,
  //html格式化依赖  默认为none
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  //函数前加空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  //没有下边这个 上边不生效
  "vetur.format.defaultFormatter.js": "vscode-typescript",
 // 禁止标签属性换行
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 120,
      "wrap_attributes": "auto",
      "end_with_newline": false
    }
  },
}

这样基础的配置就完了，格式化快捷键依旧可以使用，不会默认加上分号（;），字符串双引号等。