D3 + JavaScript Tooling's Not (Just) For Unicorns

A horrible introduction to using modern JavaScript tooling with D3

Chapter 5

Installing eslint

First off, we suck at writing code.

Or, I mean, I don’t know, maybe you’re great and cool, but I suck at writing code. Or at least writing clear code, or consistent code, or code that will make my coworkers happy1.

But that’s okay, because there’s an easy way to trick the computer into doing it for you! Well, not totally for you - you still have to write the code, but the computer will clean the code up for you.

The process of cleaning up your code is called linting. You set up a list of rules - space things like this, indent like that, use semicolons this other way, use all of your variables, etc - and the linter tells you when you’re broken them. Sometimes it even fixes them for you!

We’re going to use a linter called eslint. It’s the best.

Remember how npm installs things only for a single project? That means our first job is to make a new project. cd into a new folder and run

You’ll be asked a lot of questions, but they really don’t matter! You can just hit enter a lot of times. When you’re done it just kind of… sits there. Nothing happened, right?

No!!! A GREAT THING happened, and that is package.json was created. Open that file up! Mine looks like this:

This package.json is the magic file that describes your project. It will be used to say who build it, what it’s called, what version it is, and what modules it uses. We probably only care about the last part, but we need a package.json anyway.

Now we need to install eslint for our module. TO do that, we’re going to use npm install.

npm works hard, fills its progress bar, and voilà! eslint is installed. The --save-dev part means “we only need this when we’re working on our own machine, we don’t need it in the published project.”

If you type eslint, though, it doesn’t work. Your computer can’t find it! Let’s try to track it down.

Note: If you want to ignore all of those npm init questions in the future, npm init -y will let you skip them!

1 A good trick is to just not have coworkers. I have students instead, which means they just have to put up with every single thing I say and believe it like it’s been handed down from King Of Space And Time.