Setting Up EditorConfig for TypeScript Monorepos

Table of Contents

• What is EditorConfig?
• Why Use EditorConfig in a Monorepo?
• Installing EditorConfig
• Writing the .editorconfig File
• EditorConfig vs Prettier/ESLint: How They Work Together
• Best Practices for Monorepos
• Conclusion

What is EditorConfig?

EditorConfig is a simple file format (.editorconfig)
and a set of plugins that help maintain consistent coding styles
across different editors and IDEs.

It ensures all developers use the same:

• Indentation style (tabs vs spaces)
• Line endings (LF vs CRLF)
• Final newlines
• Charset (UTF-8, etc.)

It does not replace ESLint or Prettier — it complements them.

Why Use EditorConfig in a Monorepo?

In a monorepo, you often have multiple teams, tools, and environments.

Problems without EditorConfig:

• One package uses spaces, another tabs.
• Some files have Windows CRLF endings, others have Unix LF.
• Inconsistent trailing newlines.

Using one .editorconfig at the root ensures basic code consistency across the entire repository — even before ESLint or Prettier run.

Installing EditorConfig

Most modern editors natively support EditorConfig:

• VS Code: Built-in support (no extension needed).
• JetBrains IDEs (WebStorm, IntelliJ): Built-in.
• Atom, Sublime Text: Needs free plugin.

You can also add a command-line linter if needed:

npm install --save-dev editorconfig-checker

Writing the .editorconfig File

Place this at your monorepo root:
(monorepo-root/.editorconfig)

# EditorConfig is awesome: https://EditorConfig.org

root = true

# Default settings for all files
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

# Special rules for Markdown files
[*.md]
trim_trailing_whitespace = false

# Special rules for JSON files
[*.json]
indent_size = 2

# YAML files
[*.yml]
indent_size = 2

# Shell scripts
[*.sh]
end_of_line = lf
insert_final_newline = true

Explanation:

• root = true: This tells EditorConfig to stop looking for files above this one.
• [*]: Apply to all files by default.
• indent_style = space: Use spaces instead of tabs.
• indent_size = 2: 2-space indentation (common in TypeScript).
• end_of_line = lf: Always use Unix-style LF (important for cross-platform devs).
• insert_final_newline = true: Always add a blank line at the end of each file.
• trim_trailing_whitespace = true: Remove trailing spaces on save (except markdown).
• Markdown ignores trimming, because trailing spaces can be significant in markdown formatting.

EditorConfig vs Prettier/ESLint: How They Work Together

• EditorConfig handles basic editor behavior.
• Prettier handles full code formatting (quotes, commas, spacing, etc).
• ESLint handles code correctness and best practices.

Tip: Prettier can respect .editorconfig automatically if editorconfig: true is set in .prettierrc.

Example .prettierrc:

{
  "editorconfig": true,
  "semi": true,
  "singleQuote": true,
  "printWidth": 80
}

Best Practices for Monorepos

✅ Always place .editorconfig at the root of the repo.
✅ Keep .editorconfig minimal and generic.
✅ Let Prettier handle specific formatting rules beyond tabs/spaces/newlines.
✅ Configure Prettier to respect .editorconfig.
✅ Educate team members to enable EditorConfig plugins/extensions if needed.

Conclusion

Setting up EditorConfig in a monorepo is essential for basic formatting consistency across multiple packages, apps, libraries, and teams.

It acts as a lightweight safety net before Prettier or ESLint even touch your files.

Combined with Prettier and ESLint, it makes your TypeScript monorepo:

• Cleaner
• More standardized
• Less prone to frustrating “space vs tab” debates