Using with Prettier extension for VSCode

[ahmed-sigmalux]

How can I use this ESLint plugin with the Prettier extension for VSCode?

[kuceb]

@ahmed-sigmalux I'm not sure what you're asking. This works for the eslint-vscode extension. What have you tried so far?

[ahmed-sigmalux]

I'm using the Prettier extension esbenp.prettier-vscode for VSCode. Per Prettier's instructions (https://prettier.io/docs/en/integrating-with-linters.html), my settings.json looks something like:

{
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode",
		"editor.formatOnSave": true,
	},
	"[json]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode",
		"editor.formatOnSave": true,
	},
	"[jsonc]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode",
		"editor.formatOnSave": true,
	},
	"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
	},
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.formatOnSave": true,
	"eslint.autoFixOnSave": true,
}

And my .eslintrc.json looks something like:

{
  "env": {
    "es2017": true,
    "node": true
  },
  "extends": [
    "standard",
    "prettier/standard"
  ],
  "parserOptions": {
    "ecmaVersion": 2017,
    "impliedStrict": true,
    "sourceType": "module"
  },
  "plugins": [
    "json-format",
    "standard",
    "prettier"
  ],
  "settings": {
    "json/ignore-files": ["**/package-lock.json"],
    "json/json-with-comments-files": ["**/tsconfig.json", ".vscode/**"],
    "json/sort-package-json": "standard"
  }
}

Prettier and ESLint work on JavaScript, but they don't work on JSON.

How can I get your plugin to work with this setup?

[kuceb]

@ahmed-sigmalux can you format your json with eslint through the CLI? It's best to get the cli tools working first before tackling editor integration

[ahmed-sigmalux]

Yes, it works with CLI. I'm only having trouble getting it to work with Prettier for VSCode.

PS: All the other ESLint plugins I use work with Prettier for VSCode; it's only this extension that doesn't work with my configuraiton.

[kuceb]

@ahmed-sigmalux I only use vscode-eslint as my formatter and avoid prettier altogether, so I'm not sure if this is possible to get working. Prettier I believe has its own json formatter built in, and personally I have never understood the whole prettier/eslint integration.

If you get it working let me know, good luck!

[x3cion]

@ahmed-sigmalux I suggest using ESLint as linter tool and integrating Prettier into ESLint per eslint-plugin-prettier. That way everything runs over ESLint.

That way you only need to integrate ESLint into vscode by extension and should be able to drop the prettier extension.

[ghost]

Currently, this plugin ignores stylistic rules from the prettier eslint plugin (like indentation size, indentation style, EOL etc) and just does its own thing. This might work well for you, but others prefer their own coding style and currently, this plugin ignores that. It would be great if you could remove all default styling from this plugin and let prettier (or your own eslint rules) do the formatting job.

[kuceb]

@GitGangGuy not sure the use case for installing this plugin if you already have prettier formatting your json...