vscode 遵循 ESLint 格式化代碼(vue)

ESlint 是個好東西，誰用誰說好

咱們開發代碼，多人維護，須要你們風格統一，這樣代碼維護方便，整潔清爽

針對於不一樣項目咱們在工程中新建 .vscode文件夾

文件夾中新建文件 settings.json

輸入如下內容

{
  "eslint.autoFixOnSave": true,
  // #這個按用戶自身習慣選擇
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // eslint 檢測文件類型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // vetur 的自定義設置
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  }
}
複製代碼

而後全局 settings.json 中輸入如下內容

{
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    // 100 列後換行
    "editor.wordWrapColumn": 100,
    "editor.renderControlCharacters": true,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
}
複製代碼

此時效果： 只須要寫完代碼就換頁面，不用管代碼，會自動保存而且將代碼格式化， 分享給團隊，共同風格，很是舒服