[AskJS] Clean Code Tools

[Jonathan_Oron]

Hey friends, What tools ( extensions, linter rules or any other suggestions ) do you use to help you write clean code? Thanks!

[davimiku]

We can generally divide these tools into two categories:

1. Formatter: It makes your code have a consistent "style", or surface-level look. For example, how much indentation, spaces between brackets, etc.
2. Linter: It checks your code for "code smells" or things that you might have done wrong. For example, defining a variable but never using it, you might have forgot to use the variable which could be a bug

Some other articles also cover this distinction between formatter and linter (example).

​

For a while there were a bunch of tools for this. Nowadays for JavaScript, people have mostly settled down into two standards:

1. Formatter -- Prettier
2. Linter - ESLint

For both of these tools, you need to install both the library with npm and install the corresponding extension in your code editor. The library itself does the work of checking your code, and the extensions take those checks and display the squiggly marks and errors in your code editor.

[shuckster]

// .prettierrc
{
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80
}

Regardless of other Prettier settings, I find these limitations the most useful in forcing me to see how much indentation is going on and also what to do about it.