What You'll Be Setting Up

• ESLint: A static code analysis tool that identifies problematic patterns in JavaScript/TypeScript code

• Prettier: An opinionated code formatter that enforces consistent code style

• Husky: Git hooks made easy - runs scripts before commits to ensure code quality

• lint-staged: Runs linters and formatters only on staged files for faster execution

Prerequisites

Make sure you have Bun installed on your system. If not, visit bun.sh for installation instructions.

Step 1: Initialize a Bun TypeScript Project

First, let's create a new Bun project with TypeScript support. The -y flag accepts all default configurations automatically.

bun init -y

This command creates a basic project structure with:

• package.json with Bun-specific configurations

• tsconfig.json for TypeScript compilation settings

• A basic index.ts file to get you started

Secondly, let's initialise a local git repo in this folder as it is required before configuring husky

git init

Step 2: Configure ESLint

ESLint will help catch potential bugs and enforce coding standards. The interactive configuration will ask you questions about your project setup and create an appropriate configuration file.

npm init @eslint/config@latest
OR
yarn create @eslint/config@latest
OR
pnpm create @eslint/config@latest
OR
bun create @eslint/config@latest

During the interactive setup, you'll be asked about:

• How you'd like to use ESLint (check syntax, find problems, enforce code style)

• What type of modules your project uses (ESM/CommonJS)

• Which framework you're using (if any)

• Whether you're using TypeScript

• Where your code runs (browser/Node.js)

The tool will automatically install the necessary ESLint packages and create a configuration file (.eslintrc.js, .eslintrc.json, or similar).

Step 3: Install Prettier

Prettier is a code formatter that automatically formats your code according to a set of rules. Installing it as a development dependency ensures it's only used during development.

npm i -D prettier
OR
yarn add -D prettier
OR
pnpm add -D prettier
OR
bun add -D prettier

The -D flag installs Prettier as a development dependency, meaning it won't be included in your production bundle.

Step 4: Configure Prettier

Create a configuration file(.prettierrc) to customize Prettier's formatting rules according to your preferences.

{
  "singleQuote": false,
  "trailingComma": "es5",
  "tabWidth": 2,
  "bracketSameLine": true
}

This configuration sets:

• singleQuote: false - Use double quotes instead of single quotes

• trailingComma: "es5" - Add trailing commas where valid in ES5 (objects, arrays, etc.)

• tabWidth: 2 - Use 2 spaces for indentation

• bracketSameLine: true - Put the > of a multi-line JSX element at the end of the last line

I like to keep it simple so this is my go-to prettier configuration, you can modify it according to you.

Step 5: Add Husky and lint-staged

Husky enables Git hooks, while lint-staged runs linters only on staged files (files that are about to be committed), making the process faster and more efficient.

npm i -D husky lint-staged
OR
yarn add -D husky lint-staged
OR
pnpm add -D husky lint-staged
OR
bun add -D husky lint-staged

These tools work together to ensure that only properly formatted and linted code gets committed to your repository.

Step 6: Configure Husky and lint-staged

Initialize Husky

Run the following command to set up Husky in your project:

npx husky
OR
yarn husky
OR
pnpm husky
OR
bun husky

This creates a .husky folder in your project root with the necessary Git hook infrastructure.

Create Pre-commit Hook

Create a pre-commit file inside the .husky folder and add the following content:

npx lint-staged

This script will run lint-staged before every commit, ensuring your staged files are properly linted and formatted.

Configure lint-staged

Add the following configuration to your package.json file. This tells lint-staged what commands to run on different file types:

"lint-staged": {
  "*.{ts,js}": "eslint --cache --fix",
  "*.{ts,js,css,md}": "prettier --write",
  "*.js": "eslint --cache --fix",
  "*.{js,css,md}": "prettier --write"
}

This configuration:

• Runs ESLint with auto-fix on TypeScript and JavaScript files

• Runs Prettier on TypeScript, JavaScript, CSS, and Markdown files

• Uses ESLint's cache feature for faster subsequent runs

Step 7: Configure Package.json Scripts

Add these utility scripts to your package.json for easy access to linting and formatting commands:

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix && prettier --write .",
  "prepare": "lint-staged"
}

These scripts provide:

• lint - Check for linting errors across the entire project

• lint:fix - Automatically fix linting errors and format all files

• prepare - Runs lint-staged (this is a special npm script that runs automatically during certain npm operations)

How It All Works Together

Once everything is set up:

1. During development: Use bun run lint to check for issues or bun run lint:fix to automatically fix problems

2. Before commits: Husky automatically runs lint-staged, which lints and formats only the files you're committing

3. If there are issues: The commit will be blocked until you fix the problems, ensuring only clean code enters your repository

Testing Your Setup

To verify everything is working:

1. Make some changes to your code with intentional formatting issues

2. Stage the files with git add .

3. Try to commit with git commit -m "test commit"

4. You should see ESLint and Prettier running automatically

Congratulations! 🎉

You have successfully configured ESLint, Prettier & Husky in your Bun TypeScript project. Your development workflow now includes automatic code quality checks that will help maintain consistent, high-quality code across your project.