Add ESLint, Prettier run-on-save VSCode settings

[aentwist]

Description

When using ESLint, add a lint-on-save VSCode setting.

When using Prettier, add format-on-save and default formatter settings.

Proposed Solution

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[html][css][less][scss][sass][javascript][typescript][javascriptreact][typescriptreact][vue][json][jsonc][yaml][markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

Notes

Cross reference the Prettier language support with VSCode language identifiers and add everything applicable.

See https://prettier.io/docs/en/index.html
and https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers

[aentwist]

willing to pull for this

[wakefun]

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[html][css][less][scss][sass][javascript][typescript][javascriptreact][typescriptreact][vue][json][jsonc][yaml][markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

The writing style conforms to the vscode specifications.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[sass]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

[cexbrayat]

@aentwist I like this suggestion as well.
Are you still interested in opening a PR for this?

[aentwist]

Don't care anymore but maybe I'll get around to these two.

Between specifying file types for Prettier and simply not, what do you think? After this time has passed I might now prefer to see

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

I can't really remember why I used to like scoping them at this point.

[cexbrayat]

If you don't care anymore, you can simply close this issue, no worries.

If you want to implement this, I think that, ideally, if the user picked prettier, then we should suggest the prettier vscode extension, and add the settings. But I don't know what happens if the settings is added and vscode can't find the extension (I suppose it is fine? But that should be checked)

[Yordan-Ramchev]

@aentwist This suggestion is implemented and is part of the latest release. You can close this issue. :)

[yoshi-pi]

How about adding ESLint settings as well?

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

[aentwist]

I'm not sure exactly what npm init vue likes to use, but after testing this I have an extensions.json with prettier, however there is no settings.json.

@yoshi-pi that is no longer supported. The current version would be either "source.fixAll.eslint": "explicit" or "source.fixAll.eslint": "always". Personally I have taken to "always" but I believe "explicit" is the less aggressive equivalent of true here.

[yoshi-pi]

@aentwist
Since the release of v3.10.0, settings.json are now also created for prettier.

Thank you for letting me know. I think it's best to use "explicit" as described in the ESLint extension:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}