Linting JSON

[gavinorland]

I wondered if you guys have any recommendation of the best way currently to lint (and fix) JSON files - maybe this is worth mentioning. ESLint doesn't seem to do it, although there do seem to be plugins. I think Prettier supports it, but not via the eslint-plugin-prettier (which is how I'm using it).

Also re. JSON it might be worth recommending a config file format, as there are several to choose from, and saying why the JSON extension is the best choice, if it is.

[sapegin]

Prettier supports formatting of JSON files, not linting. Not sure about ESLint. Have you tried to run in on JSON files?

We recommend JSON because it’s easier to manipulate via code, using Mrm for example.

[gavinorland]

@sapegin What I get when I run node_modules/.bin/eslint .eslintrc.json is:

0:0 warning File ignored by default. Use a negated ignore pattern (like "--ignore-pattern '!<relative/path/to/filename>'") to override

I guess Prettier will do its formatting if run directly, but not if run via eslint --fix with the plugin (I gather in this case Prettier passes ESLint further rules to fix).

[sapegin]

Yeah, looks like they don’t support JSON.

[gavinorland]

That's right - apparently ESLint does not support JSON. Prettier can format it, but not via the eslint-plugin-prettier.

Things seem to be in a bit of a state of flux at the moment - I suppose they always are - what with ESLint and Stylelint both having --fix capability and Prettier also able to make change to the code. It seems that both ESLint and Prettier are worth using for JS - ESLint because it finds syntax issues Prettier doesn't, and Prettier because 1) it fixes some formatting issues ESLint doesn't and 2) it supports further languages extensions (JSON, JSX).

I'm using Prettier via ESLint, having it over-ride ESLint's rules. The only thing I have tweaked with it is to have single quotes, to fit in more with Airbnb config, which I am using.

[sapegin]

You should disable all style rules in ESLint otherwise you’ll have funny conflicts between ESLint and Prettier ;-)

ESLint supports JSX too, but Prettier supports CSS and GraphQL. I’m not sure that formatting of JSON is very useful ;-)

[gavinorland]

You should disable all style rules in ESLint otherwise you’ll have funny conflicts between ESLint and Prettier ;-)

Yes, I do that using this, otherwise ESLint objects to Prettier's formatting, which seems to be dominant.

I think it's possible for JSON to get into a bit of a mess - I like anything that can auto-format things perfectly! :) Might be especially good for teams, with beginners etc.

[sapegin]

I think it depends on what kind of JSON files you have. Files like package.json, .eslintrc, etc. are mostly autogenerated and look good enough.

[sapegin]

Is there anything we should improve in the book about this?

[bebraw]

Maybe we could show how to validate JSON (precommit). It’s easy to break if you are in a rush and perform manual changes.