Context

When working on Javascript/Typescript projects probably most of us know the following;

• eslint is used to avoid code errors
• prettier is used to format you text

Enter editorconfig

These are tools that you need to add. But the most elemental code formatting is not here, it is in the widely supported .editorconfig file.

You can generate such a file with this command:

npx editorconfig-cli init -y

It is basically an ini file

root = true

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

The best thing is that your code editor or IDE will recognise this file automatically and formats your code per this .editorconfig file by default, or there is a plugin.

IDE support for prettier and editorconfig

• Visual Studio Code (VSC) uses a plugin
• Vim uses a plugin
• Nvim supports this by default
• IntelliJ IDEA uses a plugin
• Sublime uses a plugin
• Atom uses a plugin

In table format:

And if you want to include these rules in linting locally or in the pipeline, even prettier supports it!

I give you one better; usually I keep prettier settings like this .prettierrc (or even better, stick it in package.json's prettier value):

{
  "singleQuote": true,
  "printWidth": 140,
  "tabWidth": 2,
  "useTabs": false
}

But you can go all-out if you want. The important thing is that there is a huge overlap with .editorconfig:

Prettier and editorconfig feature comparison

Lab - funny discovery

1. I have a repo with no .prettierrc
2. I run npx prettier . --write; I see some changes in the files; e.g. strings are now double quoted, breaks up lines > 80 chars etc. Very nice.
3. I generate a clean default .editorconfig using npx editorconfig-cli init -y
4. Without any configuration of prettier, when I run npx prettier . --write again.... it respects the quote_type = single and max_line_length from the .editorconfig ＼ ٩( ᐛ )و /／ ʕ•̫͡•ʕ̫͡ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ̫͡ʔ-̫͡-ʔ

My point is, why have a .prettierrc file at all when all settings can be in .editorconfig and still use prettier? At least you won't have conflicting settings. .editorconfig file needs to be there anyway because you can't stick it in package.json like you can do with prettier:

{
  "scripts": {},
  "prettier": {
    "semi": false,
    "singleQuote": false,
    "trailingComma": "all"
  } 
}

Which is a huge win IMHO, however prettier is considered scoped within Node/Typescript/Javascript ecosystem, where editorconfig is more widely supported:

Language support prettier vs editorconfig

Consider the current top 25 languages supported by Prettier and .editorconfig:

Advice

So my advice:

If you use multiple programming languages in one repo:

1. use .editorconfig everywhere
2. let prettier use .editorconfig, only use .prettierrc to append settings .editorconfig doesn't support, avoid conflicting settings. Use following script: npx editorconfig-cli init -y, remove any prettier settings.
3. include prettier in eslint settings

If you only use TS/JS/HTML/CSS

1. totally ignore .editorconfig
2. use .prettierrc instead with prettier configuration
3. include prettier in eslint settings

Happy coding!