Files in deep directory hierarchies are (incorrectly) indented with tabs

Prettier appears to always indent JavaScript files with tabs when they are located deep within a project’s directory-hierarchy.

Prettier will indent a file with tabs if it is located (relative to my working directory) in a/b/c/d/e/f/g/h/i/j/k/l/file1.js. This contradicts my expectations for how Prettier’s default configuration should handle whitespace (defaulting to spaces).

An identical file located at a/file2.js will be indented with spaces.

I’ve created a small repo to demonstrate this issue, which I’ll also explain below: https://github.com/schmod/prettier-tab-bug

---

If I have these two files (which are identical, and indented with spaces):

a/b/c/d/e/f/g/h/i/j/k/l/file1.js

export default () => ({
  thing: {
    marginRight: '1px'
  }
});

a/file2.js

export default () => ({
  thing: {
    marginRight: '1px'
  }
});

Run prettier --write

$ ./node_modules/.bin/prettier --write **/*.js
a/b/c/d/e/f/g/h/i/j/k/l/file1.js 53ms
a/file2.js 4ms

Compare output

In file1.js, spaces have been replaced with tabs. file2.js is unchanged.

$ git diff | cat -t
diff --git a/a/b/c/d/e/f/g/h/i/j/k/l/file1.js b/a/b/c/d/e/f/g/h/i/j/k/l/file1.js
index 1ad5f40..106eb86 100644
--- a/a/b/c/d/e/f/g/h/i/j/k/l/file1.js
+++ b/a/b/c/d/e/f/g/h/i/j/k/l/file1.js
@@ -1,5 +1,5 @@
 export default () => ({
-  thing: {
-    marginRight: '1px'
-  }
+^Ithing: {
+^I^ImarginRight: '1px'
+^I}
 });

Misc

$ ./node_modules/.bin/prettier --version
1.15.3

$ ./node_modules/.bin/prettier --find-config-path a/file2.js
.prettierrc.toml

$ ./node_modules/.bin/prettier --find-config-path a/b/c/d/e/f/g/h/i/j/k/l/file1.js
.prettierrc.toml

$./node_modules/prettier --config ./.prettierrc.toml --write **/*.js
# Has the same effect -- file1 is indented with tabs; file2 is indented with spaces

$ ./node_modules/.bin/prettier --use-tabs=false --write **/*.js
# This actually works -- both files are indented with spaces.

tl;dr;

• a/b/c/d/e/f/g/h/i/j/k/l/file1.js – Indented with tabs
• a/file2.js – Indented with spaces

[schmod]

@ikatyang Thanks for the nudge in the right direction! There is indeed an .editorconfig file in my home directory that specifies tabs.

Nevertheless, I still wouldn’t expect prettier to format the two files differently, given that the .editorconfig file is a common ancestor of both files.

The problem appears to stem from the way that prettier calls find-project-root to determine the root path to tell the editorconfig library where it should stop traversing the filesystem hierarchy.

By default, find-project-root looks for a .git or .hg directory up to 9 levels above the directory of the source file being formatted. If it finds one, it passes that directory to editorconfig as the root.

If it does not find one (ie. the project is more than 9 layers deep or does not exist within a Git or Mercurial repository), it passes root: null to editorconfig, which editorconfig then defaults to / (meaning that it’ll crawl all the way up to the filesystem root looking for a .editorconfig file).

---

I don’t have any strong opinions about how we should resolve this, apart from that Prettier’s behavior should be consistent.

We don’t use anything like find-project-root when locating .prettierrc files (nor does the documentation express any explicit preference for Git or Mercurial repositories) – we look all the way up to the filesystem root.

Therefore, it strikes me as a bit odd that we’re handling .editorconfig files differently, not to mention that Prettier does not currently provide any visibility about when it’s deriving its configuration from a .editorconfig file.

[ikatyang]

I cannot reproduce the issue (tested on macOS). I guess there’s an .editorconfig somewhere in your parent directories.