Code Formatting Best Practices for Development Teams

Why Code Formatting Matters

Studies show developers spend 70% of their time reading code and only 30% writing it. Consistent formatting reduces the mental effort required to parse code, allowing developers to focus on logic rather than syntax.

Setting Up Prettier

Prettier is an opinionated code formatter that supports many languages. It removes style debates by enforcing a consistent format.

Installation

# Install Prettier
npm install --save-dev prettier # Create configuration file
touch.prettierrc

Recommended Configuration

//.prettierrc
{ "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5", "printWidth": 100, "bracketSpacing": true, "arrowParens": "avoid", "endOfLine": "lf"
}

Add Format Scripts

// package.json
{ "scripts": { "format": "prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,md}"", "format:check": "prettier --check "src/**/*.{js,jsx,ts,tsx,json,css,md}"" }
}

Combining Prettier with ESLint

Prettier handles formatting; ESLint handles code quality. Use them together for comprehensive code standards.

# Install ESLint + Prettier integration
npm install --save-dev eslint-config-prettier eslint-plugin-prettier // eslint.config.js (ESLint 9+ flat config)
import prettier from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier'; export default [ prettierConfig, { plugins: { prettier }, rules: { 'prettier/prettier': 'error', // Your other rules... } }
];

Editor Integration

Configure your editor to format on save for seamless formatting:

VS Code Settings

//.vscode/settings.json
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }
}

Git Hooks with Husky

Enforce formatting before commits using Git hooks:

# Install Husky and lint-staged
npm install --save-dev husky lint-staged
npx husky init // package.json
{ "lint-staged": { "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"], "*.{json,css,md}": ["prettier --write"] }
} //.husky/pre-commit
npx lint-staged

Language-Specific Best Practices

JavaScript/TypeScript

• Use const by default, let when mutation is needed
• Prefer arrow functions for callbacks
• Use template literals over string concatenation
• Destructure objects and arrays when appropriate

React/JSX

• One component per file
• Use PascalCase for component names
• Keep JSX indentation consistent (2 spaces recommended)
• Self-close tags without children: <Component />

CSS/SCSS

• Use consistent property ordering (alphabetical or grouped)
• One selector per line for multi-selectors
• Use shorthand properties when possible
• Organize by component or feature

CI/CD Integration

Add format checking to your CI pipeline to catch issues before merge:

#.github/workflows/lint.yml
name: Lint
on: [push, pull_request]
jobs: lint: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '20' - run: npm ci - run: npm run format:check - run: npm run lint

Frequently Asked Questions

Conclusion

Investing time in code formatting infrastructure pays dividends in developer productivity and code quality. Set up Prettier, integrate it with ESLint, add Git hooks, and include checks in CI—then never think about formatting again.