DEV Community

Remi Kristelijn
Remi Kristelijn

Posted on • Edited on

Most elemental code formatting for Typescript/Javascript: .editorconfig vs prettier

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

In table format:

Editor/IDE Prettier Support .editorconfig Support
Visual Studio Code Plugin ☑️ Plugin
Vim ☑️ Plugin ☑️ Plugin
Nvim Default Native
IntelliJ IDEA ☑️ Plugin ☑️ Plugin
Sublime Text ☑️ Plugin ☑️ Plugin
Atom ☑️ Plugin ☑️ Plugin
Emacs ☑️ Plugin Plugin
PyCharm ☑️ Plugin ☑️ Plugin
Eclipse ☑️ Plugin ☑️ Plugin
Notepad++ ☑️ Plugin ☑️ Plugin
Brackets ☑️ Plugin ☑️ Plugin
WebStorm ☑️ Plugin ☑️ Plugin
PyCharm ☑️ Plugin ☑️ Plugin
Eclipse ☑️ Plugin ☑️ Plugin
Notepad++ ☑️ Plugin ☑️ Plugin

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
}
Enter fullscreen mode Exit fullscreen mode

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

Feature Prettier Setting .editorconfig Setting Description
Indent Style useTabs: true indent_style = tab Use tabs for indentation.
useTabs: false indent_style = space Use spaces for indentation.
Indent Size tabWidth: N indent_size = N Number of spaces or tabs for indentation.
Line Length printWidth: N max_line_length = N Maximum line length.
Newline Style endOfLine: lf end_of_line = lf Use LF for line endings.
endOfLine: crlf end_of_line = crlf Use CRLF for line endings.
endOfLine: cr end_of_line = cr Use CR for line endings (rarely used).
Trailing Spaces trailingComma: none trim_trailing_whitespace = true Remove trailing whitespaces.
trailingComma: es5 Add trailing commas where valid in ES5 syntax.
trailingComma: all Add trailing commas in all places (arrays, objects, etc.).
Tabs or Spaces insert_final_newline = true Insert a final newline at the end of files.
Quote Style singleQuote: true Use single quotes.
singleQuote: false Use double quotes.
Experimental singleAttributePerLine Experimental feature: format single attributes per line.
Arrow Function arrowParens: avoid Avoid parentheses around a sole arrow function parameter.
arrowParens: always Always include parentheses around arrow function parameters.
Tab Width tabWidth: N Number of spaces per tab.
Semicolons semi: true Use semicolons.
semi: false Omit semicolons.
JSX Quotes jsxSingleQuote: true Use single quotes in JSX.
jsxSingleQuote: false Use double quotes in JSX.
Bracket Spacing bracketSpacing: true Include spaces between brackets in object literals.
bracketSpacing: false Exclude spaces between brackets in object literals.
Prose Wrap proseWrap: always Wrap prose text in Markdown or HTML as necessary.
proseWrap: never Do not wrap prose text.
proseWrap: preserve Preserve existing line breaks.
Tab Preferences tab_width = N Number of spaces per tab when using spaces.
File Encoding charset = utf-8 File character encoding.
Root Indicator root = true Marks the directory as the root for .editorconfig settings.

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"
  } 
}
Enter fullscreen mode Exit fullscreen mode

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:

Language Prettier Support .editorconfig Support
JavaScript
TypeScript
HTML
CSS
SCSS
JSON
Markdown
YAML
XML
Python
Java
C
C++
C#
Ruby
PHP
Go
Kotlin
Swift
Rust
Dart
Lua
Groovy
SQL
Shell scripts

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!

Top comments (0)