用vue手腳架生成項目後，修改.Vue檔案後，直接儲存編譯報一大堆錯誤，解決辦法如下：

顯示錯誤截圖如下：

因為直接用vue腳手架初始化建立項目，會選擇是否選用eslint文法檢查，選擇了之後，修改.vue檔案報以上截圖錯誤

解決辦法如下：

1. 直接重新初始化關掉eslint文法，但是這樣子做的話，有點麻煩。
2. 直接在檔案根目錄下的

   .eslintrc.j

   s檔案加入如下代碼，直接忽略掉就行了

   rules: {
   // allow async-await
   'generator-star-spacing': 'off',
   // allow debugger during development
   'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
   'no-trailing-spaces': 'off',
   'indent': 'off',
   'spaced-comment': 'off',
   'no-trailing-spaces': 'off',
   'no-new': 'off',
   'key-spacing': 'off',
   'comma-dangle': 'off',
   'eol-last': 'off',
   'quotes': 'off',
   'semi': 'off',
   'keyword-spacing': 'off',
   'space-before-blocks': 'off',
   'comma-spacing': 'off',
   'space-before-function-paren': 'off',
   'space-infix-ops': 'off',
   'no-multiple-empty-lines': 'off',
   'block-spacing': 'off',
   'padded-blocks': 'off',
   'arrow-spacing': 'off',
   'no-sequences': 'off',
   'no-unused-expressions': 'off',
   'no-multi-spaces': 'off',
   'no-unused-vars': 'off',
   'camelcase ': 'off',
   }
              

具體截圖如下：

關于開發Vue項目格式化問題配置

大家用VSCode開發vue項目格式化的時候總是有一些行尾加；，空格等問題，其實下載下傳插件直接解決就OK了，給你一個清爽的代碼體驗，具體步驟如下：

1. 下載下傳插件vetur（開發vue必備）、prettier（代碼潔癖必備）、beautify
2. Ctrl+Shift+p 找到使用者設定 -----> setting.json中設定
3. 直接把下面的json格式代碼複制即可

{
 "files.autoSave": "off",
  //是讓vue字尾的檔案就當作vue檔案格式來解析
  "files.associations": {
    "*.vue": "vue"
  },
  //eslint代碼格式化相關配置
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // 重新設定tabsize
  "editor.tabSize": 2,
  // 儲存自動化
  "editor.formatOnSave": true,
  // 儲存時自動fix
  "eslint.autoFixOnSave": true,
  "eslint.run": "onSave",
  //  #讓函數(名)和後面的括号之間加個空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 使用插件格式化 html
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue元件中html代碼格式化樣式
    }
  },
  //  #去掉代碼結尾的分号 
  "prettier.semi": false,
  //  #使用帶引号替代雙引号 
  "prettier.singleQuote": true,
  //預設浏覽器為chrome浏覽器打開
  "open-in-browser.default": "chrome",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "One Dark Pro",
  "code-runner.runInTerminal": true,
  "vsicons.dontShowNewVersionMessage": true,
  // "[html]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  "workbench.activityBar.visible": true,
  // "workbench.colorCustomizations": {
  //   // 設定guide線高亮顔色
  //   "editorIndentGuide.activeBackground": "#e82d6b"
  // },
  "workbench.sideBar.location": "left",
  "powermode.enabled": true, //是否開啟
  "powermode.enableShake": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "previewServer.port": 9030, //動畫效果
  //git配置檔案，路徑是git.exe絕對路徑
  "git:path": "E:\\software\\Git-2.21.0\\Git\\bin\\git.exe",
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "svn.enableProposedApi": "none",
  //敲代碼的爆炸效果的設定                         
  "powermode.presets": "exploding-rift",
  "powermode.comboThreshold": 1,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "editor.mouseWheelZoom": true,
  "terminal.integrated.rendererType": "dom",
  "explorer.confirmDragAndDrop": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "explorer.confirmDelete": false,
  // Bracket-Pair-Colorizer-2括号着色自定義
  "bracket-pair-colorizer-2.activeScopeCSS": [
    "borderStyle : solid",
    "borderWidth : 2px",
    "borderColor : {#f22f75}",
    "opacity: 1"
  ],
  // 在裝訂線中顯示活動範圍括号
  "bracket-pair-colorizer-2.showBracketsInGutter": true,
  }
           

具體的詳細配置在上面了，大家自己看需求配置就OK了！