The linter validation is essential for any project. Sometimes, this is a topic of discussion because most developers do not like to follow standards, but once everyone gets familiar with this style guide everything is more comfortable, and you will deliver better quality code.

So far, we know how to run the linter validation in our Terminal, but you can also add the ESLint validator to your IDE (Atom and VSC). For this example, we are going to use Atom.

Installing Atom plugins

In Atom (on a Mac) you can go to Preferences | +Install, and then you can find the Atom plugins. I'll give you a list of the plugins I use to improve my IDE and increase my productivity:

• linter-eslint: Lint JS on the fly, using ESLint
• editorconfig: Helps developers maintain consistent coding styles between different editors
• language-babel: Supports React syntax
• minimap: A preview of the full source code
• pigments: A package for displaying colors in projects and files
• sort-lines: Sorts your lines
• teletype: Shares your workspace with team members and allows them to collaborate on code in real time

Once you have installed these, packages if you go to a file with lint errors, you will be able to see them:

Configuring EditorConfig

EditorConfig is also very useful for maintaining consistent coding styles when people in our team uses different editors. EditorConfig is supported by a lot of editors. You can check whether your editor is supported on the official website, http://editorconfig.org.

The configuration I use is this one; you need to create a file called .editorconfig in your root directory:

  root = true

  [*]
  indent_style = space
  indent_size = 2
  end_of_line = lf
  charset = utf-8
  trim_trailing_whitespace = true
  insert_final_newline = true

  [*.html]
  indent_size = 4

  [*.css]
  indent_size = 4

  [*.md]
  trim_trailing_whitespace = false

You can affect all the files with [*], and specific files with [*.extension].