Suggestion: support official plugins like markdown, css, json

[snitin315]

What problem do you want to solve?

Currently, there is no playground for official plugins like markdown, CSS, json, etc. We have #714 which will add typescript-eslint parser support. I think it make sense to support official language plugins as well.

What do you think is the correct solution?

How about:

• Adding a language/plugin dropdown that would change the editor to lint that perticular language.
• Initially we had some designs for something similar, but this is a pending todo

https://github.com/eslint/eslint.org/blob/fbd0591a5b8b44441921c332870fae662a9e4daf/src/playground/components/Configuration.js#L624

Participation

• [x] I am willing to submit a pull request for this change.

Additional comments

No response

[nzakas]

I'd like to see some design concepts before committing to it. My main concern is that it will make the UI more complicated.

[lumirlumir]

I'm personally in favor of this change. 👍

[JoshuaKGoldberg]

I'm also in favor. It's been a little inconvenient working around the other plugins without playground support. 😄

+1 to asking for design concepts. Right now the playground is hardcoded to always be JavaScript and single-file. Going multi-file would be a lot more work, so perhaps we can keep to the single-file paradigm and have a "language mode" for that file? The language mode would contain:

• Parser: default to the current JS one; also allow css, markdown, json
• Rules: sourcing the list from the plugin corresponding to the parser

How about storing this under Versioning and Config?

Related: #709 for TypeScript parser support. I imagine this could either always on or a sub-option within the JavaScript language mode. Either way I don't think that blocks this issue.

[nzakas]

I don't think a dropdown under "language options" is the way to go here. It's buried and doesn't indicate that it will basically change how everything works. I think this language used needs to be prominent and always visible on the page, like we have in the Code Explorer.

[github-actions[bot]]

Oops! It looks like we lost track of this issue. What do we want to do here? This issue will auto-close in 7 days without an update.

[github-actions[bot]]

This issue was auto-closed due to inactivity. While we wish we could keep responding to every issue, we unfortunately don't have the bandwidth and need to focus on high-value issues.

[snitin315]

Let me come back with a suitable design for this

[github-actions[bot]]

Oops! It looks like we lost track of this issue. What do we want to do here? This issue will auto-close in 7 days without an update.

[lumirlumir]

Not stale.

[kecrily]

I prefer to list all officially supported languages at the top of the editor.

[SwetaTanwar]

I agree on having playground for official plugins as well. Agreed on keeping it more visible on the page. How about we do something similar to https://astexplorer.net/?

[nzakas]

@SwetaTanwar it would be helpful to see a mockup of what you're describing.

[github-actions[bot]]

Oops! It looks like we lost track of this issue. What do we want to do here? This issue will auto-close in 7 days without an update.