Eslint: Identify most popular presets for JSCS

[nzakas]

One thing JSCS has that ESLint does not is the concept of built-in style presets. ESLint instead prefers people to make and maintain their own shareable configs. The current JSCS presets are:

• [x] Airbnb (eslint-config-airbnb)
• [ ] Crockford
• [x] Google (eslint-config-google)
• [x] Grunt (eslint-config-grunt)
• [x] Idiomatic (eslint-config-idiomatic)
• [x] jQuery (eslint-config-jquery)
• [ ] MDCS
• [x] Node Style Guide (node-style-guide)
• [x] Wikimedia (eslint-config-wikimedia)
• [x] Wordpress (eslint-config-wordpress)

It would be good to see which of these presets are most commonly used and potentially reach out to the various projects (Node, jQuery, Grunt, etc.) to see if they would be interested in creating a shareable config that can be used with ESLint.

[markelog]

I can say about jQuery - i already send announcement about it to jquery people so i will re-create preset with eslint rules very soon. Do we need a ticket specifically about this?

As of other presets, i can probably come up with the list of others missing presets and do them too. Some of the will be easy to do, since, for example, grunt preset inherits jquery preset.

[ntwb]

I converted the JSCS WordPress preset yesterday into this .eslintrc file based of the combined WordPress preset that inherits the jQuery preset resulting in this combined .jscsrc file

I plan on at some stage this week once I've some time to update eslint-config-wordpress with a JSCS configuration as an alternate to the current configuration.

[markelog]

Awesome sauce already!

Regards,
Oleg

On 18 апр. 2016 г., at 14:25, Stephen Edgar [email protected] wrote:

I converted the JSCS WordPress preset yesterday into this .eslintrc file based of the combined WordPress preset that inherits the jQuery preset resulting in this combined .jscsrc file

I plan on at some stage this week once I've some time to update eslint-config-wordpress with a JSCS configuration as an alternate to the current configuration.

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub

[ilyavolodin]

@markelog I don't think we need a separate issue for each one. Since each one will be created as an individual npm module, we can just use this issue to maybe update --init command once all of the presets exist.

[markelog]

We could redo a ticket description as checkbox list, any approach is fine with me however.

[nzakas]

@markelog will the jQuery folks be able to maintain the config?

A larger question here is where do we want the configs to be stored? If we plan to hand them off to the respective projects, then they should each be a separate repo.

[markelog]

@markelog will the jQuery folks be able to maintain the config?

We would need to discuss that, but it seems we will, currently, i will put it under my account.

If we plan to hand them off to the respective projects, then they should each be a separate repo.

Yeah, that was my thinking too - "/cc" everyone (like any org/person) related to presets (if they don't already exist). Obviously, presets like "Crockford" would be maintained by someone else. I guess that could be me at the moment, can transfer that responsibility to any interested parties however.

[nzakas]

@markelog sounds good. You can always put a note in the readme that you're looking for a maintainer and we can publicize that using the Twitter account and the blog as well.

[nzakas]

@ntwb awesome, thanks!

[markelog]

https://github.com/jquery/eslint-config-jquery is created btw, so yeah, jQuery Foundation will support eslint config.

@nzakas cool!

[alberto]

Does it mean we can close https://github.com/eslint/eslint/issues/632 ? It's our oldest issue :)

[nzakas]

@alberto we had one open question on that. It would be good to get it answered before closing (do people really not indent a top-level IIFE?)

[alberto]

Yeah, that's why am asking ;)

[nzakas]

We need to ask someone at jQuery, not me :)

[alberto]

yeah, that's was more of a question for @markelog :)

[ntwb]

I've added the JSCS config mentioned above as a _shared config_ to eslint-plugin-wordpress

Now to just write up some docs on using the said _shared config_ and release 🎉

[nzakas]

@ntwb cool! Add you going to update eslint-config-wordpress as well?

Either way, we can add this to our --init menu and eventual conversion of JSCS configs.

[ntwb]

@nzakas Yes, I'm going to update eslint-config-wordpress so that it _extends_ the eslint-plugin-wordpress:recommended config, I'm just time poor at the moment, hopefully within the next day or two

[jdforrester]

Wikimedia is also a current jscs preset, BTW. :-)

[nzakas]

@jdforrester are you sure? I looked here: https://github.com/jscs-dev/node-jscs/tree/master/presets

[markelog]

Yeah, we just were slick about it - https://github.com/jscs-dev/node-jscs/blob/9eaa1f7c619a356b4d887c60760d2eb36543a59f/package.json#L73 :)

[markelog]

@jdforrester do you want to create eslint config yourself? Or maybe you already did it?

[nzakas]

Ooh tricky!

[markelog]

@nzakas ideas was to move all presets to external dependencies

[jdforrester]

@markelog We've not created an eslint config preset yet for Wikimedia; I was kinda-hoping you lot would show the way forward so we could do it more easily. :-) No huge rush from our end.

[jdforrester]

(Also, can I +1 the idea of mastering presets outside of the main repo? It's architecturally much nicer, and it'd be good if we weren't the only ones.)

[markelog]

@jdforrester ok-ok, i'm doing one for jquery so can do the same for you.

Do you have link to canonical wikimedia jshint config? Since i presume you use jshint?

[jdforrester]

@markelog Awesome, thank you!

Our typical jshint config is:

``` lang=json
{
// Enforcing
"bitwise": true,
"eqeqeq": true,
"esversion": 3,
"freeze": true,
"futurehostile": true,
"latedef": "nofunc",
"noarg": true,
"nonew": true,
"strict": false,
"undef": true,
"unused": true,

// Environment
"browser": true,
"jquery": true,

"globals": {
    "mediaWiki": false
}

}
```

[ntwb]

Adding this here for reference for anyone else looking:
https://github.com/wikimedia/jscs-preset-wikimedia/blob/master/presets/wikimedia.json

I just ran both the JSHint and JSCS configs through polyjuice:
https://gist.github.com/ntwb/ee9f90589dbbfeee8bebd13d8b1481e9

[markelog]

Keep in mind that polyjuice is not ideal at the moment, i have found couple issues with it, so i would recommend to nevertheless check it's output

[markelog]

Here is ESLint config as npm package - https://github.com/jquery/eslint-config-jquery,
example of switching from jscs+jshint to eslint in jQuery Core - https://github.com/jquery/jquery/pull/3148.

Right now it is on 0.1.3 version in case someone wants to propose significant changes, after couple of weeks we probably update it to 1.0.0.

[markelog]

Also created an issue in polyjuice about some of it inconsistencies - https://github.com/brenolf/polyjuice/issues/83

[markelog]

hey @jdforrester was about to create sharable wikimedia config, i assume this issue is still relevant?

[jdforrester]

@markelog Yes.

[markelog]

Grunt config created - https://github.com/markelog/eslint-config-grunt

[markelog]

Found Polyjuice issues reported - https://github.com/brenolf/polyjuice/issues/84

[markelog]

PR for grunt repo is opened - https://github.com/gruntjs/grunt/issues/1533. Wikimedia, i'm coming for you next :)

[nzakas]

Nice! We can probably start adding the extras to the --init option in ESLint at this point.

[markelog]

Just give me a week, i'm hoping to cover all those by that time and then i will check out what --init stuff is all about :)

[nzakas]

No problem. We can also do them one by one, so don't feel like they have to go in all at once. It's up to you.

[markelog]

Config for wikimedia (eslint-config-wikimedia) created - https://github.com/markelog/eslint-config-wikimedia

Related polyjuice issue created - https://github.com/brenolf/polyjuice/issues/85

Example PR for the wikimedia project is opened - https://github.com/wikimedia/jquery.i18n/pull/107

[markelog]

I'm not sure if crockford and mdcs require eslint packages, they do not seem popular, looking back at it, I'm puzzled of why we added crockford preset, since there is such thing as jslint.

Thoughts?

[platinumazure]

The issue is mostly about adding popular presets, so (just from my own perspective) I feel we could avoid adding Crockford until requested, at least.

[nzakas]

@markelog the original description just listed out all of the supported JSCS presets so we could decide which ones to support. If you feel those two aren't popular enough then we definitely don't need them.

[markelog]

Okay, then sounds like we good here.

@nzakas what do you think we should do with this issue? Should we close it and open different one for the --init flag? Or deal with it here?

[nzakas]

@markelog I'd say just deal with it here, as it gives a nice close to the discussion and work.

[markelog]

Okay, so what configs we want to add (right now we have Google, Airbnb and Standard)?

All available ones? Or we should cherry-pick?

At this point, I'm not sure if wikimedia people are happy with their config (@jdforrester?). I would suppose jquery might be good fit there? /cc @scottgonzalez, @timmywil, @dmethvin.

Maybe idiomatic /cc @rwaldron, @leobalter?

Wordpress?

Or never mind that and all of them?

[leobalter]

@markelog QUnit follows the jQuery Code Style, so I'm +1 for jquery.

[ntwb]

Wordpress?

Not yet, I'm half way through refactoring much of the WordPress config.

(That said, I'm hoping I'll have it finished this weekend)

[markelog]

@nzakas friendly ping

[nzakas]

@markelog I'd defer to your opinion on this. I'd like to keep the list to things we know people will use rather than just including them all. Do you have a sense of what the most popular JSCS ones were?

[markelog]

A bit, I even did the comparison - https://github.com/markelog/code-styles

It's good we have 3rd party configs which could replace JSCS ones, but to be honest, I don't think any of those code styles should be included -

• Grunt is very project specific code style, not strictly speaking defined and not very known
• Wordpress could be a good choice but it seems it is not known at all
• jQuery could be a good choice, but at the moment only jQuery Core uses it, there might be some big issues when or if it would be implemented in other projects, like some of the foundation members advocating to just use Standard
• Wikimedia pretty much same story as with jQuery
• Idiomatic is relatively popular, but i remember that author @rwaldron was advocating to use Airbnb instead

When I say "popular" or "known" i mean amount of npm downloads and github stars. Most popular presets in JSCS were Google and Airbnb, which already included in the ESLint

[leobalter]

@markelog how did you measure the popularity? The code style guide for jQuery might have a unpopular own repo, and as jQuery projects are only migrating now to ESLint I believe they won't have much explicit numbers.

I don't think it's necessary to land the jQuery preset with eslint core, we can solve it with an extra npm package. My only concern is how the proposed support from ESLint applies in this issue.

[markelog]

@markelog how did you measure the popularity?

aam, from https://github.com/eslint/eslint/issues/5858#issuecomment-236981280

When I say "popular" or "known" i mean amount of npm downloads and github stars.

jQuery projects are only migrating now to ESLint I believe they won't have much explicit numbers.

That's the thing - I don't know if they will, as i said, some influential people from foundation lobbying to use Standard instead, I think it is safe to say that QUnit and Sizzle will switch it up, but that's it. So at this point of time, I just don't have any guarantees it will be accepted by the others member of the foundation.

Safe bet was to include Google or Airbnb (which already happened), their popularity is obvious from JSCS traffic page, but not so much for other styles, others were waaay behind

we can solve it with an extra npm package

ESLint by itself would not include additional packages with it, it can present some configs as an option at eslint --init and install it if chosen, so additional package would still be needed

[platinumazure]

@leobalter I'm still willing to get QUnit moved to ESLint, I'm just waiting for some dust to settle in eslint-config-jquery first. Sorry for the delay on that front.

[markelog]

@leobalter I'm still willing to get QUnit moved to ESLint, I'm just waiting for some dust to settle in eslint-config-jquery first. Sorry for the delay on that front.

Dust is settled it is now 1.0 (for the record i'm also maintaining eslint-config-jquery)

[leobalter]

I'm still willing to get QUnit moved to ESLint, I'm just waiting for some dust to settle in eslint-config-jquery first. Sorry for the delay on that front.

I'm expecting that to happen soon. I hope it can give a better expectation and perspective to this issue.

[nzakas]

We definitely don't have to add any new configs to --init. It might be enough to start a JSCS migration guide and just list out the shareable config that represents each style.

Does Polyjuice deal with presets at all?

[markelog]

Okay, sounds like we good here, documentation related stuff will be handled in https://github.com/eslint/eslint/issues/5859

[brenolf]

Being Polyjuice's only maintainer, it's been hard for me to be pedantic with some mappings, I'm sorry!

I've just solved @markelog opened issues, but some rules weren't changed given that I do believe Polyjuice's aim is more related to be a fast and flexible way of migrating instead of a 1-1 mapper; so the output must be further analyzed if that's a major concern of the user.

@nzakas No it doesn't deal with presets, just with a json file for rules. Nevertheless, if that would make the transpiling easier, I'd be willing to add that feature.

[markelog]

Being Polyjuice's only maintainer, it's been hard for me to be pedantic with some mappings, I'm sorry!

I think it is perfectly fine, this kind of mapping is long and sometimes tedious process, so there is no surprise, polyjuice is tremendously helpful anyhow

@nzakas No it doesn't deal with presets, just with a json file for rules. Nevertheless, if that would make the transpiling easier, I'd be willing to add that feature.

Technically speaking you can already do that, like -

polyjuice --jscs node_modules/jscs/presets/crockford.json .jscsrc > .eslintrc

and people with custom presets probably will figure out such workaround, could be added to the docs though

[brenolf]

@markelog In fact this usage with multiple files is not allowed in the moment. However, given your example I'll be adding it right now.

[markelog]

Oh there is a typo, i meant to write -

polyjuice --jscs node_modules/jscs/presets/crockford.json > .eslintrc

[zz85]

Wish I've seen this thread earlier and could have saved me some trouble if learned about Polyjuice! I've just hand ported MDCS code style from to ESLint but maybe I should make an npm module for this config. http://zz85.github.io/mrdoobapproves/

[zz85]

Update: MDCS eslint-config-mdcs is now an npm module. @markelog