VS code 保存會(huì)自動(dòng)格式化。以前都是alt+shift+F格式化的，現(xiàn)在一保存就格式化。剛寫好的代碼，格式化之后就亂套了，特別是用了eslint之后運(yùn)行項(xiàng)目各種報(bào)錯(cuò)頻頻出現(xiàn)。往往會(huì)添加一些并不是我們想要的補(bǔ)齊

一、常見的eslint錯(cuò)誤：

• error Strings must use singlequote quotes
  字符串必須使用單引號(hào)

• error Extra semicolon semi
  額外分號(hào)半 (;)

• error Trailing spaces not allowed no-trailing-spaces
  不允許有尾隨空格沒(méi)有尾隨空格

• error Missing space before function parentheses space-before-function-paren
  函數(shù)前缺少空格括號(hào)函數(shù)前有空格括號(hào)

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

  這個(gè)錯(cuò)誤很神奇代碼，必須在代碼結(jié)尾增加一個(gè)換行，多一個(gè)換行空格都不行

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

二、Prettier - Code formatter 插件

中文意思是“漂亮的、機(jī)靈的”，也是一個(gè)流行的代碼格式化工具的名稱，它能夠解析代碼，使用你自己設(shè)定的規(guī)則來(lái)重新打印出格式規(guī)范的代碼。

官方文檔...

Prettier具有以下幾個(gè)有優(yōu)點(diǎn)：
1.可配置化
2.支持多種語(yǔ)言
3.集成多數(shù)的編輯器
4.簡(jiǎn)潔的配置項(xiàng)
使用Prettier在code review時(shí)不需要再討論代碼樣式，節(jié)省了時(shí)間與精力。

三、配置settings.json文件

{
  "files.autoSave": "afterDelay",
  "liveServer.settings.CustomBrowser": "chrome",
  // #每次保存的時(shí)候自動(dòng)格式化 
  "editor.formatOnSave": false,
  "html.format.indentInnerHtml": true,
  "html.format.indentHandlebars": true,
  "eslint.format.enable": true,
  "prettier.requirePragma": true,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  //分號(hào)
  "prettier.semi": false,
  //單引號(hào)包裹字符串
  "prettier.singleQuote": true,
  //html格式化依賴  默認(rèn)為none
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  //函數(shù)前加空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  //沒(méi)有下邊這個(gè) 上邊不生效
  "vetur.format.defaultFormatter.js": "vscode-typescript",
 // 禁止標(biāo)簽屬性換行
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 120,
      "wrap_attributes": "auto",
      "end_with_newline": false
    }
  },
}

這樣基礎(chǔ)的配置就完了，格式化快捷鍵依舊可以使用，不會(huì)默認(rèn)加上分號(hào)（;），字符串雙引號(hào)等。