CODEWITHSUNDEEP
vue.jseslintvisual-studio-code
martixy
martixy

Reputation: 932

VSCode: How to configure formatter with vue and eslint

I want to have the option to "Format Document" according to the rules in my .eslintrc file.

I have the ESLint and Vetur extensions.

Currently the project is configured without semicolons. But whenever I use the "Format Document" function it adds a bunch of semicolons, which tells me that it's not following my lint config.

I tried tweaking a bunch of settings of both ESLint and Vetur, but nothing I do seems to make it follow the config. I am lost as to how the whole thing works, what takes precedence, etc...

Relevant ones:

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

Upvotes: 3

Views: 9173

Answers (2)

anson
anson

Reputation: 1482

I using this in vscode settings.json for vscode version 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"
    }

Upvotes: 2

anakha
anakha

Reputation: 1260

I had created an issue with vetur earlier last week, and this specific prettier-eslint issue has been fixed by the upstream.

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

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

Install modules to your project folder:

yarn add --dev eslint prettier prettier-eslint

Make sure to set your settings.json to:

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

set vue extension to use vetur for default formatting:

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

You don't need "eslint.format.enable": true, unless you use eslint for other things, since the vetur is handling the formatting :

Upvotes: 3

Related Questions