"Format Document" command should use ESLint

[WraithKenny]

There didn't seem to be any mention of this functionality, except a by implication in "formatOnSave" issues.

VSCode has a JavaScript formatter, but ESLint should replace it, not use a secondary one with a different conflicting command.

[David-Else]

Yes! Please just build this into VS Code! There is literally no point in having a crummy linter that no body uses built into VS Code and the good one that everyone uses as a plugin!

VS Code is advertised as having linting built in, this is a perfect opportunity to simplify and save time and effort for the user while eliminating the need for maintaining multiple plugins (bits of VS Code). Please hurry this along and add it to the next insiders! :)

[moltar]

I can't believe this is not a thing. I was so sure that it is how the extension is supposed to work that I spent an hour reading the README, code and VS Code settings to understand why it is not working. Only to realize, via this issue, that there is no actual support for this yet. I think it's a must-have feature.

[Hirse]

You can run ESLint in --fix-mode with the "eslint.executeAutofix" command. If you re-map that to the format-shortcut, it comes pretty close to this request. 😄

[nschurmann]

@Hirse excellent!, how to do that also on save? 😄

[schmic]

@nschurmann I think you have to disable editor.formatOnSave and do it manually before you save. Otherwise the default formatter will overwrite what eslint "fixed".

[David-Else]

I ended up installing the prettier plugin and changing my configs. Prettier formats on save.

It makes sense to have one plugin deal with all the formatting (prettier) and the other for the actual code best practice (eslint).

I use the airbnb eslint config, so I installed the command line tool for prettier that detects clashing rules:

https://github.com/prettier/eslint-config-prettier

and then manually deleted them all from my eslint config. Took about half an hour copying from the command line results and finding/deleting in the eslint config in vscode , sorted :)

[schmic]

@David-Else That's how we do it as well ... Prettier + ESLint

[rochdev]

This actually seems to affect JavaScript embedded in Markdown as well.

[Bessonov]

Prettier is too opinionated and can't be really configured. Please, don't make it depend on prettier.

[nevercast]

clang-format hooks into vscode's Format Document functionality by providing a language formatter, eslint should do the same if it is not already. Seems Prettier does this also. Hopefully that is sufficient examples to inspire someone.

[simkessy]

If I run eslint . --fix which is suppose to lint my entire directory, it works but if I open the files and save them, formatting is changed, but my eslint-config is suppose to use the prettier plugging, so I'm not really sure why I'm getting different formatting between linting and formatting on save.

[regalstreak]

As @Hirse said, this works as expected. But would love to have a GUI option nonetheless!

File > Preferences > Keyboard Shortcuts > edit keybindings.json

// Place your key bindings in this file to overwrite the defaults
[
    ...

    {
        "key": "ctrl+alt+l (or whatever)",
        "command": "eslint.executeAutofix"
    }
]

Edit: Press the shortcut multiple times to get it fully formatted. Yet to find a fix for this.

[WraithKenny]

The key-bind workaround does seem like it comes sorta close, but ... it hardly seems right. It's only in a very narrow case that it works as expected. It's not just the key-bind that is the expectation, but the command, which can be called via other code, tasks, or other extensions.

[ianwremmel]

It's only in a very narrow case that it works as expected

agreed. prettier, as an example, is able to format while typing and work with other formatters to arrive at a stable final result. because eslint has its own format command that mostly only runs on save, format document and eslint fix fight eachother. Moreover, eslint fix seems to need to be run multiple times to get the same result that the running eslint --fix from the command line would produce (which, arguably, is probably a different bug; i mention it here because solving it feels like a probably side effect of using the formatter api).

[smokku]

"eslint.autoFixOnSave": true, works for me.

[WraithKenny]

Yes, 1 thing of the many involved works with a setting, but none of the other important things work.

[yukal]

It should be an automatic mechanism accepting the .eslintrc.json from the root directory of the project. As example: settings from the .vscode/*. If .eslintrc.json is absent - just ignore and turn on standard formatting.

[beeplin]

yes, I strongly agree that vscode-eslint should be able to bind to shift-alt-f (format).

[TomaszWaszczyk]

CTRL + SHIFT + P then >Eslint: Fix all auto-fixable Problems

Here more productive tips for programmer: https://github.com/TomaszWaszczyk/keyboard-shortcuts-productive-hacks

[edarioq]

Like others have said, the easiest fix is to install Prettier from the VS Extension Marketplace. Create a prettierrcfile, copy and paste the following:

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true
  }

Works well with Airbnb eslint rules.

[aMarCruz]

Also there's a eslint-plugin-prettierx with more options than the default Prettier ones (I'm the author).

For example, this is an .eslintrc.json with the "default" preset:

{
  "root": true,
  "plugins": ["prettierx"],
  "extends": [
    "eslint:recommended",
    "plugin:prettierx/default"
  ]
}

It works like any other ESLint plugin, it can be used with the VS Code ESlint or in the command line with eslint --fix.

The plugin includes Prettierx, no need to install Prettier nor the VS Code Prettier extension, and it is not recommended as Prettier (w/o "x") is not compatible with ESLint.

I am using it with "eslint.autoFixOnSave": true in 2 medium sized projects without any issues.

[SzHeJason]

https://github.com/ryuta46/vscode-multi-command

// settings.json
{
 "multiCommand.commands": [
    {
      "command": "multiCommand.formatAndfix",
      "sequence": [
        "eslint.executeAutofix",
        "workbench.action.files.save",
        "editor.action.formatDocument"
      ]
    }
  ]
}

// keybindings.json
{
    "key": "shift+alt+f",
    "command": "multiCommand.formatAndfix",
    "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
  }

[linkdesu]

"eslint.autoFixOnSave": true, works for me.

You need to install ESLint plugin first, then this will work really well.

[qguv]

A couple things I'd like to point out here:

• binding to the built-in VS Code formatter is a single function call and is done by other projects such as Beautify (registration code) and typescript-language-features (registration code)
• other extensions integrate with formatters registered in this way, such as VSCodeVim which binds = to call the default formatter registered with VS Code, so registering ESLint auto-fix as a formatter would improve the experience for users of such extensions
• if there's more than one formatter available for a file, VS Code will prompt you the first time to choose a default, which will then be saved in settings:

• when the default formatter and ESLint disagree on how a file should be formatted, any extension that triggers the default formatter on save (like VSCodeVim) will introduce linting errors every time the file is saved, which is also annoying and would also be fixed by registering ESLint auto-fix as a formatter

[electric-skeptic]

With ESLint's existing level of integration, and ever -increasing use, this seems so close to being perfect and harmonious.
Format Document's old js-beautify does a great job of making something mangled into something quite readable, but with hardly any configurability exposed it's frustrating that this helpful formatter is always going to fight our linter.

[AndreyPatseiko]

I use in default react native project this settings.
Install yarn add --dev eslint @react-native-community/eslint-config.
.eslintrc.js

module.exports = {
   root: true,
   extends: "@react-native-community",
   rules: {
        "prettier/prettier": 0,
         "jsx-quotes": ["error", "prefer-double"]
   }
};

then open short keys JSON not default
And set keybindings.json:

[
    {
        "key": "cmd+s",
        "command": "workbench.action.files.saveAll"
    },
   {
       "key": "shift+alt+f",
       "command": "eslint.executeAutofix",
   },
]

[WraithKenny]

There's an Extension API, which means that extensions may trigger code to Format Document, or execute code on Format Document, and simply doing a key-bind or on-save is completely irrelevant to the issue.

[WraithKenny]

The patch on the other hand looks great!

[jgwinner]

This really needs to be "Fixed". Basically, the defaults on loading VSCode should 'just work'. Instead, every time you edit a file, all hell breaks loose. This is annoying and you lose productivity this way.

I should be coding, not getting irritated and surfing the web on an ocean of orange underlines.

[dbaeumer]

This will be available in the next version. Please see #815 if you want to help test this.

[alamothe]

@dbaeumer Thanks so much for working on this!

Ideally, the formatter should only fix formatting rules, not code smells. The problem with auto-fixing on format is that it changes what the code does, and can sometimes produce a bug.

Can you please consider using --fix-type layout as documented by ESLint CLI for formatting? This setting should only apply formatting rules.

[dbaeumer]

@alamothe I created #828 to track this. Please note the the fixType option is already supported however can not be separately be controlled for the formatting.

[dbaeumer]

Fixed in 2.0.4. See eslint.format.enable.

[joaohenrifranco]

eslint.format.enable had no effect here. Had to switch back to v1.9

[dbaeumer]

@joaohenriquef did you have another JavaScript formatter set as a default formatter. Then the eslint one will not win. To force the use of the eslint one you need to configure: "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }. In total

	"eslint.format.enable": true,
	"[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }

[dbaeumer]

@joaohenriquef if you execute Format Document With from the context menu which opens do you get presented ? You should see something like:

[joaohenrifranco]

@dbaeumer I'm not sure about what happened, ESLint wasn't showing up on that list, even after reinstalling the extension and double checking that the formatter was enabled in settings.

Now, trying to replay this bug I upgraded it again but somehow everything worked fine, maybe I missed something. Thanks for your help and quick reply!

[dbaeumer]

@joaohenriquef no problem. You are welcome.

[joaohenrifranco]

Same problem reappeared, I haven't changed any settings. Any ideas?

[dbaeumer]

@joaohenriquef did you open a TS / JS file before. ESLint is only registered inside VS Code for a formatter if a corresponding file is open.

[HuangHongRui]

// vscode config >  setting.json
// 新增
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }

or

[paulbargaoanu]

@joaohenriquef, I'm having the same issue.

Working on a React Native project, VS Code sees the .js files I am working on as 'Javascript' language mode, I've enabled ESLint as a formatter in VS Code's settings, both in the workspace and User (global) settings. Still can't see ESLint as an option for a formatter.
I've also tried manually setting "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" } and after doing so and attempting to format a file/selection, I get the 'ESLint cannot format [filename.js]'.
I'm running mac OS Catalina, latest version of VS Code and"eslint": "5.16.0" within the workspace.
Any help or tips would be greatly appreciated.

[pruett]

Might be worth mentioning:

If you do have the Prettier extension installed, you may have to add the following to your settings.json in order for ESLint to appear as a formatter:

  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]

[paulbargaoanu]

Might be worth mentioning:

If you do have the Prettier extension installed, you may have to add the following to your settings.json in order for ESLint to appear as a formatter:

  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]

This was it! Now I can format in VS Code using ESLint.

Thank you so much!

[pruett]

@paulbargaoanu Glad that helped!