EditorConfig for VS Code not working

Question

I use VS Code as editor. We have a .editorconfig file with format configs within. We all use in our editors the extenion EditorConfig to format our HTML and CSS general. I have installed the extension EditorConfig for VS Code from here: https://github.com/editorconfig/editorconfig-vscode

Our .editorconfig file looks like this:

# This is the top-most .editorconfig file (do not search in parent directories)
root = true

### All files
[*]
# Force charset utf-8
charset = utf-8
# Indentation
indent_style = tab
indent_size = 4
# line breaks and whitespace
insert_final_newline = true
trim_trailing_whitespace = true
# end_of_line = lf

### Frontend files
[*.{css,scss,less,js,json,ts,sass,php,html,hbs,mustache,phtml,html.twig}]

### Markdown
[*.md]
indent_style = space
indent_size = 4
trim_trailing_whitespace = false

### YAML
[*.yml]
indent_style = space
indent_size = 2

### Specific files
[{package,bower}.json]
indent_style = space
indent_size = 2

I can't find any keyboard shortcut, setting or else. How to get my extension do the stuff from the .editorconfig file?

`charset` is not supported at all, please vote: https://github.com/editorconfig/editorconfig-vscode/issues/35 https://github.com/microsoft/vscode/issues/824 — Thorsten Schöning, May 06 '22 at 18:38

score 91 · Accepted Answer · edited Sep 11 '22 at 08:29

91

MY OWN SOLUTION:

The problem I had was, that I added the extension editorconfig to my vscode, but didn't install the npm package for it. So it's not enough, to add the extension only to your vscode, you have also to install the package, so it could run.

I installed the npm package global like this: npm install -g editorconfig

After that I added the extension and enabled it. Now it works perfectly.

Required npm package: https://www.npmjs.com/package/editorconfig

Required vscode extension: https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

edited Sep 11 '22 at 08:29

Petter Hesselberg

5,062
2
24
42

answered Jan 30 '18 at 14:07

webta.st.ic

4,781
6
48
98

9

This solution got it working for me too. It's crazy that the extension doesn't check and warn you about this! – johey Jul 25 '19 at 08:49
9

@johey At least, I would expect to find this information in the description of the `vscode` extension...I just figured it out by myself and had luck :) – webta.st.ic Jul 25 '19 at 11:32
5

It stll doesn't work for me. I installed node, editorconfig package and the vscode extension. Is there something missing? In vscode settings maybe? – Nachokhan Jan 12 '21 at 11:56
2

@Nachokhan make sure you have no "competing" plugins that handle styling as well and overrides your `editorconfig` settings. – AndreasW Jan 25 '21 at 11:42
@Nachokhan I just got it working. See my [answer](https://stackoverflow.com/a/74758858/6597265). – Valentine Shi Dec 11 '22 at 06:42

score 7 · Answer 2 · answered Jan 16 '21 at 16:09

7

In addition all of the above I also needed to turn on the Editor Format on Save option.

{
   "editor.formatOnSave": true
}

answered Jan 16 '21 at 16:09

Jordon Davidson

93
1
4

Valentine Shi · Answer 3 · 2023-04-28T05:28:18.757

Late 2022 I have to set up the VS Code 2 spaces indentation per custom file extenstion (*.openapi.json) keeping the other .json files indentation 4 spaces.

The other solutions here did not work as written. Here is how I managed to make it work.

Install the node package (EditorConfig JavaScript Core) and the VS Code extension (EditorConfig for VS Code) as per @webta.st.ic answer here.
In your .editorconfig file add root = true at the file top (read what it does).
In VS Code switch off the automatic indentation detection: Editor: Detect Indentation rule (Ctrs+Shift+P -> Preferences: Open user settings -> search for detect indentation -> uncheck the checknbox).
Your .editorconfig should look as follows. Note that unlike in the Editor Config documentation, the extension wildcards should have an asterisk *. More details here.
```
root = true
[*.openapi.json] 
indent_style = space
indent_size = 2
```

Now you get it working.

There is another way to assign different formatting to files with custom extensions via Prettier, its VS Code plugin and Prettier config overrides section. Following the given docs it is pretty easy to get set up.

This is correct solution with the latest VS code updates which override editorconfig indent size...Works for me. Thanks! — Slaven Tomac, Dec 12 '22 at 11:56

score 1 · Answer 4 · answered Oct 01 '21 at 14:37

I got the error "Extension EditorConfig cannot format ..." (at the bottom of the IDE, disappearing after some seconds).

Changing the preferences (ctrl+, , search for format and set the Editor:DefaultFormatter to None (instead of EditorConfig)) solved the problem for me (and yes, funny enough, this indeed did enable the usage of the .editorconfig - not any other formatting rules)

Codium: 1.60.2 with EditorConfig: v0.16.6

EditorConfig for VS Code not working

4 Answers4

Linked