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

A horrible introduction to using modern JavaScript tooling with D3

Chapter 10

Linting in your editor

Now that we’ve set up linting, I have a secret for you: we don’t need to do it from the command line! If we’ve installed Prettier and eslint and have an .eslintrc, we can actually lint from our text editor.

Sublime Text

If you’re using Sublime Text, the first thing you need to do is install Package Control, which allows you to easily add and remove plugins.

First, visit https://packagecontrol.io/installation and cut and paste the code on the left-hand side into the Sublime Text console (don’t ask me where the console is, the page has instructions on how to find it!).

Next, you’ll need to press Command+Shift+p to bring up the command palette - almost everything you can do in Sublime is in here! Start typing install and press enter when you see Package Control: Install Package.

Finally, search for ESLint-Formatter in the box that comes up and install it.

Now, any time you want to lint your file, press Command+Shift+p to bring up the comand palette and search for Eslint - select Eslint Formatter - Format this file.

Also, code that the linter doesn’t like will be automatically highlighted - hover over the red dot near the line numbers to find out what’s gone wrong.

Visual Studio Code

It’s super easy in Visual Studio Code.

  1. Bring up the Extensions panel by clicking on the left or going to View > Extensions.
  2. Search for ESLint. Install the most popular one.
  3. Click Reload

Maybe there are more things to do? I have no idea, because right now the entire marketplace is down.

Now, any time you want to lint your file, press Command+Shift+p to bring up the comand palette and search for lint.

Also, code that the linter doesn’t like will be automatically underlined - hover over the squiggles to find out what’s gone wrong.

Atom

  1. Open up Preferences - use Atom > Preferences on OS X or File > Settings on Windows.
  2. Click + Install on the far menu bar
  3. Search for linter-eslint and click Install
  4. Agree to any dependency installations

Now, any time you want to lint your file, press Command+Shift+p to bring up the comand palette and search for fix - select Linter Eslint: Fix File.

Also, code that the linter doesn’t like will be automatically underlined - hover over the squiggles to find out what’s gone wrong.

Have a little party

Your life is going to be pretty easily from here on out, I think.