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"
    }