over 3 years ago Syntax Podcast
Supper Club × ESLint with Nicholas Zakas
- 02:02 Nicholas Zakas created ESLint 10 years ago
- 02:33 Zakas has contributed to dozens of JavaScript books over his career
- 03:41 ESLint parses code into an AST and rules inspect the nodes they care about
- 04:04 Zakas created ESLint after facing an IE bug JSHint couldn't prevent
- 08:41 ESLint was created to parse JS and analyze syntax to avoid bugs
- 11:11 ESLint does scope analysis on top of AST traversal to enable some rules
- 20:48 ESLint config started simple but added features like extends made it complex
- 26:28 Shareable config issues arose when npm stopped auto-installing peerDeps
- 47:43 After coding skills matter less, soft skills like communication become critical
- 52:22 Senior ICs must learn to communicate and lead, not just write more code
Senior ICs must learn to communicate and lead, not just write more code
Guest 2
And books related to JavaScript And so And it just turned into a horrible awful mess to where, like, 90% that would let us do to So a very wide ranging then that have come up over the past 2 or 3 years, digging through the specs, trying to figure out how stuff works.
Guest 2
far more, And And Babble already does a fantastic job of keeping up But we don't actually And things,
Guest 2
The further up you get There's actually some additional We're able to just swap in and swap out parsers whenever we wanted. So we started with Esprema.
Guest 2
or tech specs.
Guest 2
even though you are not had come back and said,
Guest 2
Or something like that.
Guest 2
you are really more judged and looking at how it's adapting and changing.
Guest 2
this is the other thing that I think a lot of folks don't understand is that because natively now I need to keep learning more technical stuff
Guest 2
But and I've started prototyping this.
Guest 2
and that's because of you.
Guest 2
as Then you need to know how to traverse that syntax tree.
Guest 2
that You developed What maybe stuff with the file system, And And starting And Part because it is 10 Rewrite that in Rust.
Guest 2
That's what your annual reviews are based on. That's what your salary is based on. That's what your promotions are based on.
Guest 2
to management and says, oh, this is a pattern I recognize and either it's good or it's bad, and then just outputs And the RFC is already up if people wanna go check that out In the ESLint RFCs repo, But You can register which nodes that that particular rule cares about.
Guest 2
Present your ideas specific.
Shareable config issues arose when npm stopped auto-installing peerDeps
Guest 2
what do such that we can plug JavaScript in like we can plug in any other language.
Guest 2
why couldn't ESLint be the ESLint all of these languages.
Guest 1
extends West Boss. You know? Boom. You're up and running, and, like, it takes 2 seconds. You don't even have to make a file. You just put it in your package, Jason, if you want. So that's pretty good.
Guest 2
Long been a trend on Twitter And the plan is that from college where you were majoring in computer science, There's plenty of evidence that this is true We can piggyback on that.
Guest 2
some of the benefit of the config system, from ESLint around building software.
Guest 2
ESLint
Guest 3
they're going to be a performance increase by moving to a language
Guest 2
Why does it need to be something else? Like, why do we need to keep creating which traverses
Guest 2
HTML. I I wish there was an ESLint at that level or maybe you do it on a pre commit, so you're just checking the files that you're checking in, or you're doing it as part of CI.
Guest 2
if we were going to write ESLint from scratch In 2023, That just kills your productivity.
Guest 2
portions.
Guest 1
Tori, which is, like, the kinda
Guest 1
envy anybody who has to
Guest 2
Not entirely sure about that.
Guest 1
I think I I think there's, like, 20 minutes, and I I had the whole thing converted over. So Fantastic design. I I don't
Guest 2
And they've been unable to gain any significant the AST, hey, I need to be putting together RFCs updating
Guest 2
And that's one of the questions and And bits of confusion that we get from one of the team members And really,
Guest 1
build an entire
Guest 1
ESLint,
Guest 2
see similarities That lets you visit different types of nodes that you care about. So not all rules care about all nodes.
Guest 2
That is a really good candidate to rewrite that
Guest 1
You said in a DM with with me that you're possibly looking at ESLint for HTML,
Guest 2
that it's pretty easy to see you couldn't come up with something as GraphQL and not as JavaScript, We haven't been able to keep up Never imagined it could be we start to have a pretty good idea about ball just banging away our keyboard.
Guest 2
Especially So the rule can And ESLint and what ESLint does, And we're gonna Start out by creating a JSON plug in that allows you to lint these one off linting packages that more or less instead of just reading in the file and parsing it as JSON, when you're looking at transpiling JavaScript developers rules on that tree, a multiyear these were not JavaScript packages.
Guest 2
and parsers To reimplement Overblown on the interwebs.
Guest 2
Even if you just look in the realm of linters, and is to parse the JavaScript code Especially J. S. Hint, which was a little more open to different things to investigate When the new features come out, I'm always again, these were
Guest 3
universally,
Guest 2
Well, we can't get rid of those, that was all that it was Yeah. That's exactly it. And that quote was actually from one of my mentors, across And did people stay to maybe updating lead to a lot of false positives.
Guest 2
So any new feature had to be built into JSN. Uh-huh. ESLint doesn't have that problem.
Guest 2
and still makes sense to users.
Guest 2
and allow people to more easily work with GraphQL that way.
Guest 2
And in 2022, redo it all in JavaScript. So I found that helpful.
Guest 2
speed wise between the 2. Mhmm.
Guest 2
newcomers to ES Lint is, oh, I thought this would lend Jason Biles.
Guest 2
when we're talking about rewriting parts of Versus lint and Rust, what we're really talking about is, Seems like it's time for for full first class support. Love it. So we'll create, Parts of stuff in Rust Like, these are not hot path as you're working on your code.
Guest 2
and deploy that Rust package.
Guest 2
webpack in Rust.
Guest 2
for There's As adding new rules and other tools did. Oh, in the IC track, In turn, figuring out how ESLint has to adapt and change Mhmm. To keep up with it is just And so an AST how to do scrum or kanban, but generally, that are not related to JavaScript,
Guest 3
Or is it just all hype? There's definitely a performance
Guest 2
is not in that hot path
Guest 2
we finally Right? Like, you need to be able to customize it And so each of the rules is implementing a pattern called the visitor pattern that embeds Deno, is in these packages, the tool, That NPM, the continuation JavaScript that treats GraphQL The thing that I hadn't anticipated we always say, hey. That's great. Thanks for letting us know. Just gotta pump the brakes a little bit. That's For local files, of ES lint and rust.
Guest 2
is really the killer feature of ESLint that we cannot In some cases, that will be and that's fairly fast because it's just working on 1 file.
Guest 2
totally makes sense.
Guest 2
by doing that.
Guest 2
more and more thinking that to where about whether, was JS Hint was not able to adapt I think the answer is that it's both.
Guest 2
And of a story. It just it just keeps going I am the creator of is delivering where people would say, oh, I wish there was an ESLint for and they were great.
Guest 2
stuff should be Before that, I We were never really stopping to say, okay, let's look at this holistically that looks like a JavaScript. Uh-huh. Which is just Insane. Yeah. Right. Yeah. There's there's our moving to Rust or rewriting to I need to start learning how to be a leader.
Guest 2
This predicament.
Guest 2
I wish there was an ESLint for Jason. I wish there was an ESLint for And we had a workaround for it, basically using a Flash everybody just knows doing something with configuration.
Guest 2
files, whether it's TypeScript files And then of working on ESLint.
Guest 1
You get good enough at Yes, Flint. I know that you,
Guest 2
This is what I call the languages plug ins proposal But redesign how to communicate better with people.
Guest 2
after 10 years, it seems like this is a good time to stop and think about,
Guest 2
languages other than JavaScript.
Guest 2
If you look at there used to be a tool called JSCS.
Guest 2
Do you transition Until stage 4 to make sure that we don't have to and achieve a speed up that way where we're not rewriting the core JSON or even YAML packages.
Guest 2
all we really need to do it was built with its own parser until we know which year specification that are not syntax aware, You're being judged on your output.
Guest 2
is And, and then flag that.
Guest 2
does, and kind of fell in love with it. And And we're continuing to tweak it, But we are expecting that it's going to reach GA this year, 2023.
Guest 2
And JSON files because, you need to work to figure out
Guest 2
a lot of what ESLint already does.
Guest 1
at your actual coding abilities, but there's a lot of room in your career to grow in terms of How you work with people. So is that kinda what you're focusing on here? Or or tell us about your coaching.
Guest 1
Let's talk about
Guest 2
just as an example, say that was 2013.
Guest 2
And
Guest 1
Yeah.
Guest 2
need.
Guest 2
Maybe
Guest 2
lives other configs.
Guest 2
into this syntax tree, you have to learn Rust.
Guest 2
We And that's just a huge time sink.
Guest 2
And this is another thing where we know that people wanna do this this particular node.
Guest 2
What happens is in the area where you want to enable developers And Sorry. It doesn't.
Guest 2
can we for YAML.
Guest 2
how that does To understand but it seemed unlikely And so we started doing not JavaScript packages implement configs as packages So it wouldn't feel like a completely different config system to everyone.
Guest 2
One There were still conversations that, There are Are you able to double
Guest 3
That's super interesting. How do you feel about, in general, like, tools going the Rust route?
Guest 2
And you want to transpile that into the form that Because of the way that we organize things by ECMA version, so which year did the thing get finalized in, And yet, we get to this certain point multiple allowing you to kind of poke at that with command line flags to say, like, where plug ins should be searched for.
Guest 2
CLI Yeah.
Guest 2
like, this it is predictable And simplicity that was where complexity
Guest 2
a Rust package
Guest 2
are really interested in creating in ESLint efforts And that effort.
Guest 2
Although there is A JSON plug in that once again So at stage 2 is when we really start looking at, okay, what is this shaping up to be? and because can you help make the other people around you better? Like, that's a concept. It's not part of the syntax. And so
Guest 2
in a language that they're familiar with. Like, if I start telling people, to do some of the stuff The less well defined it actually becomes.
Guest 2
increase
Guest 2
Right? Because, like, yes, you could actually create a config system that just allows Anything anyone could ever want, all that difficult.
Guest 2
for a lot of people during development.
Guest 2
an ESLint plug in so that we can lint YAML files.
Guest 2
The killer feature of ESLint that can offload You don't own all of the code yourself.
Guest 1
more languages. Like, are we gonna see
Guest 2
in another language, whether that's Rust or something else.
Guest 1
and you provide
Guest 2
I just woke up 1 morning and just realized, like, we we just can't keep doing this.
Guest 2
And allow that all to be configured from within the same config file.
Guest 2
We also want to allow languages to be plugged in.
Guest 2
can create a proper plug in walks up the directory structure
Guest 2
It's usually either probably
Guest 2
in some way.
Guest 2
in Rust,
Guest 1
like everybody else, are looking at rewriting in Rust.
Guest 1
server side stuff. Yeah. I I find that as well with, like,
Guest 2
We are not going to create syntax trees you know, up until that point, you know, you're 5, 6, 7 years in your career,
Guest 2
basically, a huge mess And then, was a very specific bug that Follow those as examples that will flag it. And, of course, using regular expressions As they used to be called, And the best way to learn that as to whether you can ship a product.
Guest 2
That it wasn't capable of swapping out.
Guest 1
Oh, awesome. The I I converted just for kicks. I converted my my config over, config system. We had a whole show on config files, and we're asking ourselves, like, why maybe you can answer this. Why is there not like, why doesn't Node or NPM or someone step up to make
Guest 2
It is an it is an Utter disaster, we're spending so much of our time helping people debug We'll just decide one day, oh, installing pure dependencies by default was a mistake. We're gonna stop doing that.
Guest 2
Hey. In order to write a that was where we started with if shareable configs Yevl, better find these how to organize that allowed it to surpass the Config system, allow parsers to be plugged in,
Guest 2
one of the avenues that we're investigating right now is creating
Guest 2
can be done
Guest 1
You think about that. The reason why the ecosystem is so amazing is because so many people are comfortable and can build stuff and leverage the existing stuff in the space.
Guest 2
And the larger technical challenges and opportunities that we have.
Guest 1
A standard config system for all of these tools. And is it because they are so complex where they need to, like, layer on top of each other and have dependencies?
Guest 2
Rust And, like, stuff like ES builds And that is Which is, to the changing JavaScript landscape That scope then contains things like variable frankly, we just don't have the bandwidth module format was the right way to go, it's going to end up in. So, generally, what happens is you really need to focus on how
Guest 2
because projects are getting larger and larger. And How they did configuration.
Guest 3
like Rust
Guest 1
electron killer.
Guest 2
the default ESLint parser.
Guest 2
in Rust.
Guest 2
Flow files or anything else where you are Do auto fixing of the Five people on your team.
Guest 2
Rewrite the core of ESLint And
Guest 1
also what you what you see on the future of
Guest 2
Like, there is just Package. And they do I was A long time user of both JSLint Delivering most of the features.
Guest 2
process Other tools that kind of came and went during ESLint's No. This is like to gain some mindshare, what he called a multiplier.
Guest 2
and evaluate The regular dependencies of the normal developer workflow,
Guest 2
that would allow us to do that. And so these scopes are not necessarily But ESLint It was When ESLint first started, I had a very is configurability.
Guest 2
So what I am working on currently use right now would continue to be the way that npm worked in the future.
Guest 2
rule for ESLint, don't use native XML HTTP request, Told this to me one time I need to start learning how to manage my manager And, like, let's just do the same thing because it'll make it a lot easier. You won't have to worry about dropping configs in different directories, an entire career, but here we are. Yeah. That that's wild that,
Guest 1
Lent, my own config and my own project just simply
Guest 3
Do do you feel like it is
Guest 2
Released, on the GitHub repo about this, Where I just sort of posted my big big brain dump of what I think ESLint multiple times an hour.
Guest 2
ESLint
Guest 2
Maybe some type of parsing. Not entirely sure about that.
Guest 2
And there is a discussion Once it gets to stage 3, And so You can the native XML HTTP request something that is written in note Configuration, for your project. That is And that was when this conversation with my mentor really opened my eyes. It's like, oh, wait a second.
Guest 2
is figure out a way for lose.
Guest 2
like we do now. Mhmm.
Guest 2
that could support ESLint users
Guest 2
That's a huge barrier to entry that you need.
Guest 2
that And there are needing to said, hey. Why don't we Copy what JSHint has,
Guest 1
Let's move into the the coaching stuff. I don't wanna Spent too much time on ESLIX. I know you wanted to talk about the the coaching as well.
Guest 1
There's some simple stuff of configuring menus and whatnot. I'm starting to get it, but, like, man, do I wish that was in JavaScript? I would be so much faster.
Guest 2
it's actually And that really started me down this path of thinking about, okay, what do we really need to solve this problem? They were JSON packages.
Guest 2
And now something like 80% of everybody who's using ESLint is not using And And I also do coaching for software engineers.
Guest 2
you can do that. There'll be a guide that walks you through.
Guest 2
from the ground up, but trying to maintain as many of the core concepts as we could, Help requests that we get on our Discord And as ESLint is traversing the tree, The CLI Use this custom Flash movie instead.
Guest 3
Yeah. Yeah.
Guest 2
people's configs and then Deno is able to run The way that npm Sharing plugins and packages, the Ajax requests, I'm assuming most people listening to this have heard of.
Guest 2
so And at this point, it feels co created back in the day, how that did configuration. If you look at style went, a rule can say, okay, Mhmm. As the dominant way to build web applications.
Guest 2
And one day, I was thinking about it. I said, well,
Guest 1
and it's so nice that when I just want my own
Guest 2
Tremendous And, therefore, now in 2023.
Guest 2
There are usually
Guest 2
It's really hard to come up with to this entire ecosystem of ESLint plugins and rules That was it.
Guest 2
of what ES lint is today What your role is gonna be.
Guest 2
It's not transpiling anything, I realized, Type script and it takes like a minute every time to transpile your gigantic project.
Guest 2
And then pull out all the JavaScript specific pieces into its own package sticking out. Just Rewrite is because they are And he just very plainly said, look, you can't keep thinking that churning out because of some of the stuff that already exists
Guest 1
fantastic, like, compatibility layer to convert old ones to the new ones. And
Guest 2
If you look back, there used to be a tool called TS Lint, which was TypeScript
Guest 2
The ES went your mindset as well.
Guest 1
So this was a very interesting quote on your website. Is It says at a certain point, you stop being judged for your technical skills and start being judged on how you work with people. So I thought that was Really interesting because you're probably a pretty good JavaScript developer by now. Right? And at a certain point, I think in your career,
Guest 2
And the primary thing that ESLint users need
Guest 1
CSS, ESLint.
Guest 2
And so a JSON language plug in.
Guest 2
that doesn't support of wires where that's just not enough anymore. Mhmm. And you need to start And in some cases, that will be, that you can manage.
Guest 2
Yeah. So I think that might have gotten we were thinking about, well, How do we prevent this from happening again? Like, how do we make sure that But much like we allow plug ins, what we are looking at is, no reason that you should
Guest 2
To quickly and easily customize creating our own module resolution and then but it has been holding us back this would help get us out of what would that look like? files.
Guest 2
for everyone. So language plug ins. So if people get stuck, we can say, hey. Go check out what we did for Jason. Go check out what we did for Markdown.
Guest 2
the first question to ask is, well, where you have a tool that's in your hot path for development, when it first started,
ESLint does scope analysis on top of AST traversal to enable some rules
Guest 2
React was help them Waiting for tools to run which was in Rust more and better code is the way that You're going to get ahead in your career.
Guest 2
And once it gets to stage 4, that's when we actually start the file system Really, I'm actively working on declarations, years, and we have never done a significant to But we're doing that is where And then after that, we are just going to let The community and the ecosystem faster And so And and the plug ins some managers JavaScript linters written in Rust that which was small areas where things differ.
Guest 2
It And we still had a lot of customers using IE 6, IE 7.
Guest 1
undo and redo any of those changes as they come along. So let's talk I wanna talk about 2 things, which is sort of like next gen
Guest 2
With those early stage proposals, I never thought at any point in time that I would Create my own limter because rewriting
Guest 1
a plug in for that because it's not formalized yet. It it's amazing that it's been able to just, like, keep up where the language looks nothing like it did probably when it started.
Guest 2
Potentially and I think that any place
Guest 2
Continues to send me in different directions, and jQuery For ESLint. So you can kind of hack that in, but When development on Aspream has slowed, the experimental version of our new config system that we call flat config.
Guest 1
when I ship it to one of my courses, it's
Guest 2
and Stuff like that that you can use to implement that no shadow rule that you mentioned. Mhmm.
Guest 2
I'm still curious.
Guest 1
trying to tighten up my ESLint config. So I got a couple of plug ins, a couple of presets, and,
Guest 1
writing it for more languages than in Rust. So let's talk about the first one, which is the Big because the way we write
Guest 2
once they get to stage 2.
Guest 2
What we'll need to do in ESLint And eventually, we just Got to this point where it it was just a giant I think it's important to understand The best thing we could come up with as well, We'll set up a regular expression checker on JavaScript as it goes through, in Rust, we were kind of stuck.
Guest 1
is not a thing, but it recognized that I needed a,
Guest 2
like JavaScript and ESLint are as much a part of my family And, like, nobody had heard of And potentially faster.
Guest 2
so that when we are traversing
Guest 3
that's the whole stack you got to know marionette you got to know backbone.
Guest 3
was a very, very different world than we're in today. Yeah. I remember interviewing for so many jobs where it was like backbone and marionette. That's the,
Guest 1
I I'm gonna just throw a little question in here. How do you work on a project for 10 years
Guest 2
new syntax config system
Guest 1
and and whatnot. And I was specifically going down the rabbit hole of
Guest 2
new syntax.
Guest 1
where you in ES modules, you can import. ES modules were not a thing.
Guest 1
Like, even the other day, I was using a new feature just called import assertions,
Guest 2
As an interesting side note, that but then you lose But there are also some tech leads that will do that. And I made forget how long later it was, They've withstood the test of time so far, and we have yet to come up with a better way of doing things.
Guest 1
ESLint and what that looks like. Specifically, the first one is going to be the configs, and the second one is I I saw you tweet about this a couple of months ago as you're you're sort of looking into
Guest 2
As part of running ESLint on a file as well And we just didn't have a good answer for it.
Guest 3
reach your radar as being something that you need to actually start thinking about in regards to ES So we pay pretty close attention
Guest 2
I'm continuing to learn new things.
Guest 2
it's just And so And Right? There there's a part where you know, we kept
Guest 2
parsing, the rules You have to write that rule in Rust.
Guest 2
be implementing and then unimplementing and reimplementing or and this type of communication.
Guest 1
promises did not exist. Async await did not exist.
Guest 2
or if, something and have that bubble up like you could with JavaScript.
Guest 2
Continue to be able to adapt because
Guest 1
Tell us about
Guest 2
learned about the model view controller we want to provide this toolkit because they want to be dealing with people all day every day. Yeah. I that's implementation.
Guest 1
JavaScript these days is is a lot different. Right? Like, we have monorepos But as soon as you get 2 levels deep, it can't find it.
Guest 1
as, you know, my mom and my dad. Yeah. It's true because when you started this thing,
Guest 1
6 or 7 different pure installs, and and that's a pain in the butt. So I wanted to just, like, put it all into 1.
Guest 3
How closely do you have to stay up on The proposals for JavaScript, like, at at what point does a proposal
Guest 1
and and still stay motivated to work on it? Like, this is
Guest 2
once something hits stage 3, And that was such a minor issue at that point in time Yeah. So inside So if you And
Guest 2
A lot of You have to compile The reason that a lot of JavaScript tools are being rewritten
Guest 2
Most people were using Backbone lifetime a network security policy that disabled
Guest 2
we get a flurry of issues of people saying, hey. ESLint needs to start supporting this Because it just reached stage 3, and Some of the generic stuff that ESLint And To configuration.
Guest 2
Yeah. The legacy of the config system rewrite of ESLint in those 10 years. Like, the way that ESLint works today is fundamentally the exact same way with some other tools that are out there. And as part of that, well, what would it look like if we Reroute part of ESLint Which is that That's exactly how it works. And in that case,
Guest 2
going forward.
Guest 2
represented in the AST.
Guest 3
So these patterns like the visitor pattern, right,
Guest 2
not the way Makes it almost impossible to have something that works I am curious about JavaScript as a language.
Guest 2
Not the way things work.
Guest 2
interesting to me. I find that someone had used the native XML HTTP request completely.
Guest 1
An incredibly complex project being able traversing and understanding everything that's going on, and we haven't even touched, like, configs And sharing configs and mono repos and all that type of stuff like it. I'm sure it must be exhausting at at times to have to maintain it. Like, what's your secret here to be able to
Guest 2
And it's also why, to begin with. There was no extends.
Guest 1
the the pain of creating your own config It's system in JavaScript.
Guest 3
are are these things that that hold up to even,
Guest 2
This was the era where or even if you were majoring in something else, across all of those configuration Both JS Lint and JS Hint actually can also lint JSON files.
Guest 2
we need to take the time, number 1, to make sure that it doesn't end up getting demoted back to stage too, which sometimes happens. Yeah. And sometimes that is a nontrivial written or contributed
Guest 2
It called an abstract syntax tree or AST.
Guest 2
Marathon a project like this. Yeah. It it's a lot. And, in different ways.
Guest 1
Importing JSON into an ES module many JavaScript books. He's been around on the Internet for
Guest 2
give me the scope that's related to Not being able to find plug ins or not being able to find next, was that adding new rules didn't have the same sort of performance impact Interest.
Guest 2
to the proposals
Guest 3
next or whatever the future of ESLint becomes. But Are are these patterns that you you still recommend for this type of thing? Yeah. These patterns aren't going to change discovery or the creation of ESLint.
Guest 3
We know next gen versions of the ESLint and, I think we'll talk quite a bit more about whatever that becomes
Guest 2
Node was pre one dot o at that point. I'm pretty sure it was around, but had not been around for Allows us to do faster linting.
ESLint was created to parse JS and analyze syntax to avoid bugs
Guest 1
you also have a variable called name. And those 2
Guest 2
A warning related to that.
Guest 2
and just looks at The nodes that it cares about all kinds of awful things I ran into a box,
Guest 2
emit a warning or not.
Guest 1
native XML HTTP request. Like, you had to polyfill
Guest 1
But my next question was just, like, how does how does ESLint even work? Like, how does it know when I'm doing specific things? So you're saying you you parse it, and that gives you what? Is that called an AST?
Guest 2
When it comes across one of those nodes that you care about, inside of Rust, that all makes a ton of sense.
Guest 2
of ESLint, we use The parser, either the default parser that we ship with being in our desk, head down,
Guest 2
that tree 25, that it worked when it was first released.
Guest 1
that really was what Started me down this path of investigating how to do something like that. Man, that that's wild. That was actually my next question is well, actually, first of all, I love hearing stories from the olden days when you use such word as
Guest 1
There's a possible it's not a bug, but there's a possibility that you, the developer, could get mixed up and or not be able to reach the the outer scope variable. So it just it recognizes those types of things We'll throw up a an error or a warning depending on your configuration. Right? Yep.
Guest 1
And and some examples of that might be, like, a very basic, like a shadow variable, where
Guest 2
or a custom one that you've supplied in your configuration, adding new rules that help people understand how to use as part of the postmortem, ESLint, leverage reasonably well.
Guest 1
The XML HTTP request, like, it's wild that we we just did that with fetch. Right? And now we're at a point now where fetch is everywhere.
Guest 1
in upper scope, you have a variable called name. And then at a lower at a lower scope,
Zakas created ESLint after facing an IE bug JSHint couldn't prevent
Guest 2
object to another linter Incredibly in your IDE we actually do scope analysis when you're linting a file, from trying to do not change. And why didn't you run into this problem before? And the answer is we did.
Guest 2
Made a big difference for a lot of JavaScript developers, And then maybe we're able to take advantage of Rust threads
Guest 2
except Allowing ESLint is balanced against
Guest 3
Right? It's the it's really the wool that everybody uses to evaluate code quality these days,
Guest 2
had And so when you are rewriting, Fast enough Keep copying what ESLint is doing. Like, that seems like
Guest 3
I guess what made you want to build ESLint and and how did the
Guest 2
active x objects.
Guest 3
What was
Guest 2
those seem to do the job pretty well.
Guest 2
And a bug had gotten out into production where this 1 customer A ESLint plug in for And then But after that, a common format. And even where we find commonalities, And then
Guest 2
Changes from the community
Guest 2
What we really need and all that long.
Guest 2
to make some requests.
Guest 2
XML HTTP request,
Guest 2
And you think, well, information that you need because And parses it into a structure about a dozen different ESLint and shareable configs, including,
Guest 2
The question became, well, why were we not using that if we already solved this problem? how to break down large problems into small tasks to try to movie shim I've makes JSON look like Oh, yeah.
Guest 2
look at the syntax language plug ins for every language that is out there. Right? That that would just be tests pass, websites work, people are using it,
Guest 2
at all start implementing in the core is because there are actually was inside JSON, you couldn't say require writing as much code and delivering as much code, The team as a whole So it had to be pure dependencies.
Guest 3
something different? And and and how,
Guest 3
JSLint or JSHint I think were the the 2 big ones.
Guest 3
the the catalyst that made you say I would prefer
Guest 2
it seemed like that was safe to use Pretty much whenever you wanted some help with your JavaScript.
Guest 2
and a couple years maybe,
Guest 3
and it it it you said it we're we're approaching 10 years And I
Guest 2
and suggestions, so the folks who are doing GraphQL The configurability
Guest 2
nothing is working. That click, nothing is happening.
Guest 2
and see if there's a reference to a global variable, were not allowed.
Guest 2
And it was because it was a newer developer If you parse a language And so we started with shareable configs at that point.
Guest 2
Requests even if active x objects each of the rules And the reason for that normally is fine,
Guest 3
ESLint.
Guest 3
Versions of the same type of tool,
Guest 3
you know, affect the
Guest 3
previous
Guest 3
remember back before ESLint everybody was using,
Guest 2
object in IE seven variable references, ins.
ESLint config started simple but added features like extends made it complex
Guest 2
little did we know How will this affect And so language plug in.
Guest 2
on the shareable config.
Guest 2
npm automatically installed have to do with that people are reliant on right now? Part of that is it needs to get faster model and different things to learn.
Guest 2
share configs if you wanna use that in ESLint, you can use the babble ESLint parser, was Actually, just a wrapper around the ActiveX object. It wasn't a native implementation, that it was going to knock off Backbone There are enough things that are different in order to get, you know, a team created or a project funded if you're supporting IE 7, the productivity To trick ESLint into limping it.
Guest 2
basically,
Guest 2
And then ESLint, We can't really start adding a lot of people who are working on web apps or even Node. Js, a bet that did not pay off,
Guest 2
Where where JSHint had implemented this extends key inside of their config.
Guest 2
that worked those are not the skills a layer on top speed wise ESLint.
Guest 2
There was just one, ended up with each rule doing its own traversal, was that people would want to You need to execute So You have Time lines, you have deliverables. You're learning In some cases, that will be, I need to do some project planning and project management.
Guest 2
You have a config file parse and understand GraphQL.
Guest 2
Then they need to list those plug ins as pure dependencies The way that they do that is basically by making an,
Guest 2
That would also read Jason.
Guest 2
we couldn't And after an investigation, what we found and make The ES lends CLI And so
Guest 2
that could be shared on NPL.
Guest 2
And then if you want to override any of those in a particular directory, you just Drop another config file into that directory, And so we'd add something over here and something over there that would just tweak the config system a little bit.
Guest 2
hey.
Guest 2
And which means that we really can't
Guest 2
this was where
Guest 2
And
Guest 2
simple idea about how config should work.
Guest 2
like, hey. That's the way NPM works.
Guest 2
from that file and just merges each of the config files that it finds along the way.
Guest 2
And then we could actually So I need to start learning have to try and make other languages look like JavaScript no comparison Can we create a natively compiled of the AST and runs all of your rules along that traversal.
Guest 2
Plug Pure dependencies. Oh, yeah. Just like any other dependencies.
Guest 2
projects.
Guest 2
instead of saying, okay, extends is the way that you will do configs from now on.
Guest 2
We added extends and kept say, more things that we wanna do.
Guest 2
inside of ESLint, market share
Guest 2
And so much as they were And this was Actually, where I think we made the 1st mistake, of the
Guest 2
because and so it killed that
Guest 2
file format .eslintrc.
Guest 2
worked and speed that up. Because the last thing that you want is developers sitting around, want to use We're now going on 10 years.
Guest 2
Because I was coming from a world of JS Hint where you just had, web apps. And everybody believed that that was the end all be all of how it'd be building web apps forever. Yeah.
Guest 2
Quite the tale of and JSLint, Rewrite, we're not working the amount of time of my longest job Because, fundamentally, we want to allow people to rules in JavaScript. Yeah.
Guest 2
I just had a few rules that I Configured, and it was nothing to just copy and paste stuff in.
Guest 2
started sneaking into the config system.
Guest 2
And to make ESLint be able to in Rust It it'll just make life easier.
Transcript
Announcer
This is
Guest 1
That was a long, long time ago, and it's it's kinda wild to have you on the podcast here so many years later.
Guest 1
a long, long time in the JavaScript space. It's it's actually
Guest 1
I'll tell you a little story.
Guest 1
a good part of the week
Announcer
so buckle up and grab that old handle because this ride is going to get wild.
Guest 1
Reviewing one of your blog posts or one of your Git repost called, like, computer
Guest 1
and I said They're going to ask me things about computer science, and I don't know anything about computer science. So I spent
Announcer
Hoo. I'm starving.
Announcer
Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Tolinski and Wes Bos attempt to use human language to converse with and pick the brains of other developers. I thought there was gonna be food,
Guest 1
12, 13 years ago, I was a young buck going to interview at Google,
Guest 1
science and JavaScript or something like that. And
Guest 2
with computer science topics. And the best way I knew to do that was to What happened as you're working, How they did configuration.
Announcer
I sure hope you're hungry.
Guest 2
So welcome. I'm glad you found that helpful. Yeah. That was I've been working on open source to parse if you look at what JS Hint does Right? You don't have to configure, is difficult, we couldn't resolve those And so that is your primary config file.
Announcer
the Syntax Supper Club.
Guest 1
literally,
Guest 1
very interesting Doing this podcast and having people like Nicholas on because
Guest 1
Welcome to Syntax. This is the podcast with the tastiest web development treats out there. Today, We have on the show Nicholas Zakas. He is the author of ESLint, the author of
Guest 1
Oh, that's awesome. Well, do you wanna give us a a quick rundown of, who you are and what you do? So
After coding skills matter less, soft skills like communication become critical
Guest 1
Maintaining some of the most busy GitHub
Guest 2
is with the senior members on your team. Like, they've been there. They've done that. They're gonna help you out along the way. They're gonna review your code. They're gonna help you ship. But once you get past that point, Making that pivot To then paralyze some of the linting that ESLint is doing Who didn't know that that existed.
Guest 2
from and you want that to be as fast as possible,
Guest 1
Like,
Guest 2
learning how to write production code.
Guest 2
becoming a coach.
Guest 2
And that is a point where a lot of software engineers tend to get stuck your job becomes,
Guest 1
How should we approach this type of thing? Right? Like, there's this whole another
Guest 1
you write a lot of code, but you also are
Guest 2
You're on the sidelines
Guest 2
Like, basically, once you've been in tech for, like, 5 years, from inside of ESLint.
Guest 2
Like, why Because, in Rust We will create If you look at JavaScript gone wrong.
Guest 2
People kind of assume that you know how to write code. Yeah. Like, it it's it's not a mystery Can we define what a language is in terms of these config errors that they're getting. Like, there has to be a better way.
Guest 2
happened? out there. Mhmm. Like, there is a GraphQL ESLint which And so we started what turned out to be We couldn't have it as regular dependencies because and see where we are.
Guest 2
being the quarterback on a football team Up top in one way and then this at the bottom, and it doesn't I see. Yeah. And You are probably not majoring in this type of leadership with regards to like, the longest that I have ever spent at a company
Guest 2
Understand that Yeah. Approach to architecting CSS lint, which I also it calls a method in that particular rule.
Guest 1
issues and project planning and and taking time to create RFCs and ponder
Guest 2
Nobody is letting them know that this is the next step in your progression.
Guest 1
That that's fascinating because That's amazing.
Guest 2
Why we're doing it? Like, we like JS Hint and go from there. Awesome.
Guest 2
back in the day, when I was just saying, no. Nobody's telling me, like, how do I get promoted? How do I get to the next level? Like, what do I gotta do? who will do that, but can also be incredibly rewarding. And another one of my mentors Here are the steps that you need to do in order to create,
Guest 2
senior software engineers I was going through a similar process when I wrote those blog posts and I think, That's all well and good, You are working on a team with other people.
Guest 2
and you are not actually the one This particular customer Way too much bandwidth Mhmm. For what the team is able to maintain.
Guest 2
Maybe you're learning, and that takes precedent.
Guest 1
side of it. So is that management, or is that just like Is that another level above a senior developer?
Guest 2
Because nobody tells them this.
Guest 2
the executives and the leaders of the company Adding to the config system, And so Everything Which is fantastic, and we'll give you access to all of those experimental features.
Guest 2
Alright. Getting stuff out, like, in their browser.
Guest 2
Switching the kind of directory based you know, common JS was really a better way of doing it.
Guest 2
not And when you're looking at the way that ESLint works is that it does a single traversal transpilers a huge waste of developer time was about 5 years when I was at Yahoo, so now I'm at double And I just I find it really interesting. To me, the evolution of JavaScript will be delivered to the browser. And if you have to stop and wait for things Which is a lot slower.
Guest 2
Things start to get more difficult. And I recognize this very early in my career as well because I looked around, and I was like, wait a second.
Guest 1
if I look at at you, I'm sure
Guest 2
and there are senior software engineers who are 45.
Guest 2
helping to organize
Guest 2
And, like, I like to say that Nobody becomes a software engineer We could just use require.
Guest 2
And how to interact with Sorry, everybody.
Guest 2
And not continue to progress.
Guest 2
that's pretty much the base level of knowledge that you need. And during those 1st 5 years,
Guest 2
who are writing some code that is not being delivered to the browser, a markdown which was Yeah. So to give you a snapshot of the JavaScript landscape are taken off the field, You Where you run into trouble and where ESLint grow in whatever way that it wants to grow. But we feel like it's important to have these, And plug those into ESLint. Like, we just cannot lose the AI.
Nicholas Zakas created ESLint 10 years ago
Guest 2
at Yahoo and at Box, we went ahead and and implemented that.
Guest 2
Of PS Lent, which is pretty crazy.
Announcer
Wow.
Guest 2
2006, doing most of the scoring, But the ESLint configs were starting to grow beyond what The JS Hint configs were.
Guest 2
spent a lot of time in Silicon Valley at different Companies UMD we forked it and created our own that we could just plug in.
Guest 2
pretty much since put up that GitHub repo of trying to refresh myself to create their web applications.
Zakas has contributed to dozens of JavaScript books over his career
Guest 1
Just for everyone listening, we're going to start talking about ESLint, what it is, some of the new stuff coming to ESLint.
Guest 2
and web development.
Guest 1
So let's get into
Guest 1
they come up in JavaScript, and then
Guest 2
Career and scope analysis, inspect it, do whatever it wants, and then decide if it wants to,
Guest 2
I first encountered
Guest 1
You've been at the same language for for so very long, and you've never, like
Guest 1
they leave. You know? And it's funny to see that you've Stuck with it for for all this long. I'm sure we'll talk about that.
Guest 1
you look at some of the folks In the past of history who like, t j holowachuk and and whatnot, and
Guest 2
in, 1996 we are doing extends the more nebulous Well, I I shouldn't say nobody had heard of React.
Guest 1
talking about
ESLint parses code into an AST and rules inspect the nodes they care about
Guest 1
And then I I also really want to talk about, I know you do some coaching. And since you've been in the industry for so long, I think you have have some really good insights into not Just how to be a good coder, but, like, how do you interact on teams and and how do you
Guest 1
manage an employee. Large repo and And all that stuff. So I'm I'm interested in hearing that kind of stuff as well. So