VSCode：如何使用 vue 和 eslint 配置格式化程序

Question

我想根據我的.eslintrc文件中的規則選擇“格式化文檔”。

我有 ESLint 和 Vetur 擴展。

目前該項目配置為不帶分號。 但是，每當我使用“格式文檔”function 時，它都會添加一堆分號，這告訴我它沒有遵循我的 lint 配置。

我嘗試調整 ESLint 和 Vetur 的一系列設置，但我所做的似乎沒有讓它遵循配置。 我不知道整個事情是如何運作的，什么優先，等等......

相關的：

"eslint.format.enable": true,
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.format.enable": true,

Answer 1

上周早些時候我在 vetur 上創建了一個問題，上游已經修復了這個特定prettier-eslint問題。

https://github.com/vuejs/vetur/issues/2480

https://github.com/vuejs/vetur/commit/005669957593f2d862b9c4057e6cbc2163340b30

將模塊安裝到您的項目文件夾：

yarn add --dev eslint prettier prettier-eslint

確保將您的settings.json為：

"vetur.useWorkspaceDependencies": true
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.format.defaultFormatter.html": "prettier",

將vue擴展設置為使用 vetur 進行默認格式設置：

"[vue]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "octref.vetur",
}

您不需要"eslint.format.enable": true,除非您將eslint用於其他事情，因為 vetur 正在處理格式：

Answer 2

我在 vscode 設置中使用這個。json 用於 vscode 版本 1.52

{
      // 窗口失去焦點自動保存 
      "files.autoSave": "onFocusChange",
      // 編輯粘貼自動格式化 
      "editor.formatOnPaste": true,
      // 通過使用鼠標滾輪同時按住 Ctrl 可縮放編輯器的字體 
      "editor.mouseWheelZoom": false,
      // 行太長自動換行 
      "editor.wordWrap": "on",
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
      ],
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "dart.flutterSdkPath": "/Users/macbeans/flutter",
      "dart.debugExternalLibraries": false,
      "dart.debugSdkLibraries": false,
      "workbench.editorAssociations": [],
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_attributes": "auto"
        }
      },
      "vetur.format.defaultFormatter.js": "none",
      "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
      },
      "vetur.format.defaultFormatter.ts": "vscode-typescript"
    }