Clean up key-spacing documentation

[not-an-aardvark]

As of ESLint v4.16.0, the key-spacing documentation is difficult to understand. All of the options are presented in a single list in the Options section, but there are actually multiple categories of options, and some options can be nested under other options, and it's not clear what is allowed from reading the top of the file. I think we should reorganize the documentation to more clearly describe what configurations are allowed without relying so much on examples.

[abiduzz420]

Let me look into the issue. I shall take it up.

EDIT: Did not get to work on it from past few days, on the task right now

[platinumazure]

Thanks @abiduzz420! Let us know if we can help.

[abiduzz420]

What do you guys think about it: https://gist.github.com/abiduzz420/75d6f8b8508eb3d9fed8137c2ccefc20
Open to changes.

[platinumazure]

@abiduzz420 Looks promising! Go ahead and open a PR and we can take a closer look.

[abiduzz420]

One of the problems I faced while reading the examples is they're not properly highlighted. Meaning I need to clearly read whether it's the correct code or incorrect code example. May be we could have incorrect code examples in warning boxes (bootstrap way) and show correct code snippets in green.
Another alternative of showing code examples could be showing it side by side (incorrect and the correct code)

[platinumazure]

Strange, we are supposed to have code that highlights examples based on the immediately preceding text (to wit, Examples of **incorrect** code vs Examples of **correct** code). Let me dig into that on the side...

EDIT: Never mind, our code just adds an icon (thumbs-up or thumbs-down) before the paragraph in question. I agree it would be nice to style the examples' <pre> blocks a little better. Would you like to open an issue on our website repo? Thanks!

[abiduzz420]

Yeah sure I will do it.

[platinumazure]

@abiduzz420 Actually I decided to try to see if I could solve the example styling problem and I came up with something simple pretty quickly. So no need to create an issue. Please feel free to follow eslint/archive-website#453 if you want to track the progress of that enhancement 😄

Also, here's how the key-spacing page (without your changes) would look with the style change, so feel free to comment on the link above if you think it could be improved. https://5a7dce1f7b6ee879dfded597--eslint.netlify.com/docs/rules/key-spacing

[abiduzz420]

I'll look into it in the evening. Differentiating incorrect code snippet from correct code would help.

[platinumazure]

@abiduzz420 I did some preliminary digging and documented my findings here: eslint/archive-website#454