Tooling Setup

Standardize editors, formatting, and checks so every repo behaves the same. Copy these snippets into new projects to get consistent results locally and in CI.

1) Editor baseline

.editorconfig
# EditorConfig helps IDEs use the same defaults
root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

Install the official “EditorConfig for VS Code” extension so these rules apply automatically.

2) Prettier (formatting)

package.json (excerpt)
{
  "private": true,
  "devDependencies": {
    "prettier": "^3.3.3"
  },
  "scripts": {
    "fmt": "prettier . --write",
    "fmt:check": "prettier . --check"
  }
}

Run npm run fmt (or pnpm fmt) to format everything. Run fmt:check in CI.

3) ESLint (when using JS/TS projects)

npm i -D eslint @eslint/js typescript
npx eslint --init

For pure static HTML like this docs site, ESLint isn’t necessary. Use it in app repos.

4) Git hooks (fast pre-commit hygiene)

npm i -D husky lint-staged
npx husky init
# add to package.json
"lint-staged": {
  "*.{js,ts,tsx,css,md,html}": "prettier --write"
}
# then wire the pre-commit hook:
echo "npx lint-staged" > .husky/pre-commit

This keeps diffs clean and consistent across contributors.

5) CI quality gates (reusable)

.github/workflows/quality.yml
name: Quality
on:
  pull_request:
  push:
    branches: [ "main" ]
jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci || pnpm i
      - run: npm run fmt:check || pnpm fmt:check

For app repos, extend this with lint, type-check, and tests.

Next step

Proceed to the CI/CD pages to wire preview and production deployments.

Next: CI/CD Pipelines →

← Back: Getting Started