[Feature] Add Prettier configuration file to codify formatting rules

Open Beginner friendly
#2,945 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
74/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
javascript
Domain
tooling

Research direction

Start with the prettier field in package.json and inspect gulp_scripts/formatter.js, then compare the existing .editorconfig and .vscode/settings.json. Done means the configuration is visibly available in the chosen location with the listed options and markdown override preserved, or CONTRIBUTING.md documents its package.json location if that option is retained.

Written by the indexing model from the issue text.

Description

enhancement follow-up

Summary

The project has Prettier configuration embedded in package.json but could benefit from having a dedicated .prettierrc file for better visibility and IDE integration.

Current Situation

  1. Config exists but is hidden:

    • Prettier config is in package.json prettier field
    • Contains: tabWidth: 4, trailingComma: "all", arrowParens: "avoid", printWidth: 100
    • Has override for markdown files (tabWidth: 2, printWidth: 80)
    • Not immediately visible to contributors browsing the repository

  2. Current configuration (from package.json):

    {
  "trailingComma": "all",
  "arrowParens": "avoid",
  "printWidth": 100,
  "tabWidth": 4,
  "endOfLine": "auto",
  "overrides": [
    {
      "files": ["*.md"],
      "options": {
        "tabWidth": 2,
        "printWidth": 80
      }
    }
  ]
}

  3. IDE integration challenges:

    • Some IDEs prefer .prettierrc over package.json config
    • Contributors may not discover config buried in package.json
    • Tooling integration works better with dedicated config file

Proposed Changes

Option 1: Extract to .prettierrc (Recommended)

Move the Prettier config from package.json to a dedicated .prettierrc file.

Option 2: Keep in package.json

If the team prefers package.json config, add documentation in CONTRIBUTING.md pointing to the config location.

Benefits of Dedicated .prettierrc

  • Visibility: Immediately visible in repository root
  • Convention: Follows common practice in open-source projects
  • IDE support: Better auto-detection by editors and plugins
  • Separation of concerns: Config separate from package metadata

References

  • Current config: package.json prettier field
  • Formatter: gulp_scripts/formatter.js
  • Related: .editorconfig, .vscode/settings.json
Dominant language
TypeScript
Stars
2.7k
Forks
295
Avg merge
11h 17m
Merged PRs (30d)
24

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/vscode-react-native

All issues in microsoft/vscode-react-native

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.