Skip to content

Guide: ESLint Setup

Jump to bottom
ethanstrominger edited this page May 28, 2018 · 2 revisions

What's It All About?

tl;dr; We're using eslint - npm run lint. If you understand what that means, please fix your format before making a PR.

Linters

People can format their code differently sometimes - extra spaces here, one-liners there. Inconsistent formatting can be hard to read. You can use packages called 'linters' that you can add to your project that, among other things, let you 'enforce' rules for formatting. We're using 'eslint'.

There's some stuff it can automatically fix when you run npm run lint. For stuff it can't fix, it will create warnings so people can fix them by hand.

If this is all too much, just make your PR and we'll deal with the formatting later.

In the Command Line

If you can't set up your editor to help you deal with the issues, you can use the command line to help.

Run npm run lint. ESLint should automatically fix what it can fix. If it's worried the fix will break something, it'll print warnings and errors in the console instead. Right now there are a ton of them because we just started using it. If you can, find your file and the warnings/errors that apply to the code you wrote and fix them.

Editor Linting Setup Instructions

Goal

If you do the setup right, code formatting issue and warning highlights should appear in whatever file you edit with hints on how to fix those problems.

Atom

  1. Open settings with ctrl/cmd+comma
  2. Select "Install" in the sidebar to get to the "Install Packages" page
  3. Search for and install linter-eslint
  4. If any notifications pop up about installing dependencies, make sure to install those too. (This will probably happen a few times.)
  5. You should now see yellow and red underlines for ESLint errors and warnings in source files. You can also click on the button with error and warning counts in the bottom status bar, just to the right of the filename, to bring up a list.

VSCode

Click the install link on the vscode-eslint package page, which will open the extension in VSCode and allow you to install it there.

Sublime Text

You'll have to have Sublime Text's package manager installed (it may be installed already in newer versions).

  1. Press shift+cmd+p to open the package manager.
  2. Type in 'install package' and select 'Package Control: Install Package'.
  3. Type in 'SublimeLinter 3' (SublimeLinter3? SublimeLinter?) and select it.
  4. Do steps 1 and 2 again and type in 'SublimeLinter-eslint' and select that.
  5. You should be ready to go.

Running lint for an individual file

You may want to run lint on an individual file or directory, particularly after making changes. npm run lint runs for all files. To run for a directory or individual file, run the following command from your top level directory: eslint For example, to lint all files in src\test\forms directory: eslint src\test\forms

TODO

We want to slowly work on fixing all the linting problems. If you're up for helping with that, pick a file that has warnings or errors in it (prioritizing errors over warnings), checkout a branch just for it, fix the problems, and make a PR with those changes.

Clone this wiki locally