Context
When working on Javascript/Typescript projects probably most of us know the following;
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:
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
}
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
- I have a repo with no
.prettierrc
- 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. - I generate a clean default
.editorconfig
usingnpx editorconfig-cli init -y
- Without any configuration of prettier, when I run
npx prettier . --write
again.... it respects thequote_type
= single andmax_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:
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:
- use
.editorconfig
everywhere - 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. - include prettier in eslint settings
If you only use TS/JS/HTML/CSS
- totally ignore
.editorconfig
- use
.prettierrc
instead with prettier configuration - include prettier in eslint settings
Happy coding!
Top comments (0)