How to implement Coding Guidelines

andrereus profile image Andre Reus ・2 min read

Coding Guidelines are a crucial part of making a codebase with multiple contributors consistent, clean, readable and less error prone. But how do you make them easy to follow and how do you make sure they are met from every single person?

The answer to that are text editor / IDE settings, formatters and linters. There are different tools for that, including the most common:

  • EditorConfig (Code Editor / IDE Settings)
  • Prettier (Formatter)
  • ESLint (JavaScript Linter)
  • Stylelint (CSS Linter)


EditorConfig defines a few basic settings for files in the code editor / IDE. They are applied when you create or save a file.

Sample .editorconfig file:

root = true

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

In some code editors / IDEs you need to install a plugin to activate the settings. See https://editorconfig.org/#download for details.


Prettier is an opinionated code formatter for HTML, CSS, JavaScript, Markdown and more. It can be set up to format on save, which is very useful.

Note that it is opinionated, so you can't adjust every little detail of the formatter, but the settings that are available are enough for most modern projects. See https://prettier.io/docs/en/options.html for details.


ESLint is an unopinionated JavaScript linter, this means that all rules can be adjusted. It checks JavaScript for code errors, but also has the option to check stylistic issues. It is a good option for large or legacy projects where every rule needs to be adjustable.

During setup there are a few questions asked:

ESLint Setup Questions

See https://eslint.org/ for details.


Stylelint is an unopinionated CSS linter. Similar to ESLint all rules can be adjusted and it checks CSS for code errors, but also has the option for stylistic issues. The difference to ESLint is that it can't autofix errors.

See https://stylelint.io/ for details.


Initially you can always use an EditorConfig and then it is up to you to decide if you want a quick and "all in one" solution with a formatter like Prettier, or if you want to be able to edit every little detail of linters like ESLint and Stylelint (including linting for code errors).

Posted on by:

andrereus profile

Andre Reus


Full Stack Web and App Developer


Editor guide