# 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

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
<title>Prettier - ESLint demo</title>
</head>
<body>
<h1>Prettier - ESLint demo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, esse eum id, illum itaque magnam non nulla, optio
    quam qui ratione reiciendis. Aliquid esse incidunt iure reiciendis similique velit voluptatum.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="app.js"></script>
<script>
    $(function () {
        var color = 'red';
$('h1').css('color', color);
    });
</script>
</body>
</html>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

After pasting the (badly formatted) code, PhpStorm partially reformats the code, based on the settings in File -> Settings -> Editor -> Code Style -> <language>

Default settings PhpStorm

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

Create .editorconfig file

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
 
        Copied!

1
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

body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif
}
h1,p{ color: #2d2d2d}
 
        Copied!

1
2
3
4

# 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
 
        Copied!

1
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

body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif
}

h1, p {
    color: #2d2d2d
}
 
        Copied!

1
2
3
4
5
6
7

# 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:

Intellij properties