Formatting and linting

Keeping a consistent formatting on your code helps developers focus on adding features.

Consistent code base

Tools for formatting (make formatting changes) or linting (indicate changes) should be set up in the code base in a way that every developer that works in the project has to follow them. Generally it is a good practice to follow rules set by the framework being built on.

PHP / Laravel

For PHP and Laravel there is Laravel Pint to help with the code base.

JavaScript / TypeScript

For JavaScript and TypeScript there are both Prettier for formatting your code and ESLint to maintain patterns in your code. When using both it's important to make sure they don't conflict. It's recommended to use configs like eslint-config-prettier to make sure that does not happen.

GitHub Actions

To enforce formatting and linting, add a GitHub Action that fails when rules are not met. Make sure that it is run on pull requests to make sure the developer is noticed before merging in to main.

package.json

{
  "scripts": {
    "lint:test": "eslint . --ext=.ts",
    "format:test": "prettier --check ."
  }
}

.github/workflows/eslint.yml

name: Eslint
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
jobs:
  eslint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Lint
        run: yarn lint:test

.github/workflows/prettier.yml

name: Prettier
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
jobs:
  prettier:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Prettier
        run: yarn format:test

.github/workflows/laravel-pint.yml

name: Laravel Pint
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
jobs:
  Test:
    runs-on: ubuntu-latest
    steps:
      - name: Check out repository code
        uses: actions/checkout@v4
      - name: Setup PHP 8.2
        uses: shivammathur/setup-php@v2
        with:
          php-version: '8.2'
      - name: Install Dependencies
        run: composer install -q --no-ansi --no-interaction --no-scripts --no-progress
      - name: Check code style
        run: ./vendor/bin/pint --test --preset laravel

To do

Tools to make sure the code linting and formatting is followed are set up.
Linting and formatting are documented in the README.md file.