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

Question

我想根据.eslintrc文件中的规则选择“格式化文档”。

我有ESLint和Vetur扩展。

目前，项目配置没有使用分号。但是每当我使用"Format Document“函数时，它都会添加一堆分号，这告诉我它没有遵循我的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用于其他用途，否则您不需要"eslint.format.enable": true,，因为vetur正在处理格式化：

Answer 2

我在vscode版本1.52的vscode settings.json中使用了它。

{
      // 窗口失去焦点自动保存 
      "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"
    }