# Editorconfig
- EditorConfig (opens new window) helps developers define and maintain consistent coding styles between different editors/IDEs
- Some IDEs (like PhpStorm) come bundled with native support for EditorConfig, for other IDEs (like Brackets and VSCode) you will need to install a plugin
- Simply put an .editorconfig file in the root of your project and the EditorConfig settings will silently override the settings configured in the IDE
- EditorConfig files are easily readable and work nicely with version control systems like Git
# Create a sample project
- Create a new folder (e.g. teamwork_demo) and open it in PhpStorm
- Create a new public_html folder and inside this folder three files (index.html, style.css and app.js)
- Copy and paste the code fragments below into the appropriate files
- After pasting the (badly formatted) code, PhpStorm partially reformats the code, based on the settings in File -> Settings -> Editor -> Code Style -> <language>
- Yet, every team member can change those IDE settings and that's why we use .editorconfig to set some global rules that override these individual settings
# Add .editorconfig file
REMARKS
- Projects you will make for this course and in the next few years (Laravel, Angular, ...) will often come with an included .editorconfig file
- After reading the following part, you know what this file means and how to modify it
- Right click on your project folder (teamwork_demo) and create a new EditorConfig File
- Check EditorConfig standard and click OK
- If you open the .editorconfig file, all the universal properties (properties that are applicable to every file format), are listed under the
[*]selector- A full list of universal properties can be found on GitHub - EditorConfig Properties (opens new window)
root = true
[*]
charset = utf-8
end_of_line = crlf
indent_size = 4
indent_style = space
insert_final_newline = false
max_line_length = 120
tab_width = 4
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- Reformat the three files (
CTRL + ALT + L) and compare the optimized code with the original code
# Domain-specific properties
- You can add domain-specific properties that override/remove certain properties for some file formats (file extensions)
- Open .editorconfig and add a few lines for CSS files only:
root = true
[*]
charset = utf-8
end_of_line = crlf
indent_size = 4
indent_style = space
insert_final_newline = false
max_line_length = 120
tab_width = 4
[*.css]
# set 2 spaces for tabs and remove the max_line_length
indent_size = 2
max_line_length = unset
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- Reformat style.css and compare the optimized code with the previous version
# IntelliJ-specific properties
- JetBrains has a huge set of EditorConfig properties exclusively for their own IDEs (PhpStorm, PyStorm, IntelliJ IDEA, ...)
- These properties are prefixed with
ij_and are only relevant when the whole team works with JetBrain IDEs - When you select for example the CSS properties (when adding an .editorconfig file), you get this file:
