Code Quality Setup Skill

Configures ESLint with Airbnb TypeScript style guide and Prettier formatter for automated code quality enforcement.

What This Skill Does

Sets up complete code quality tooling:

• ESLint: JavaScript/TypeScript linter with Airbnb style guide
• Prettier: Opinionated code formatter
• Integration: ESLint + Prettier working together without conflicts
• Scripts: npm/bun scripts for linting and formatting
• Git Hooks: Optional pre-commit hooks for automatic checks
• VS Code: Editor integration settings

When to Use This Skill

Use when you need to:

• Set up linting and formatting for new project
• Add Airbnb style guide to existing project
• Configure ESLint + Prettier integration
• Update code quality configuration
• Add editor integration

Examples:

• "Setup ESLint and Prettier with Airbnb style guide"
• "Configure code quality tools"
• "Add linting to the project"

Tech Stack Requirements

Required:

• Node.js or Bun.js runtime
• TypeScript project
• package.json file

This Skill Installs:

• eslint
• @typescript-eslint/parser
• @typescript-eslint/eslint-plugin
• eslint-config-airbnb-typescript
• eslint-config-airbnb-base
• eslint-plugin-import
• prettier
• eslint-config-prettier
• eslint-plugin-prettier

Configuration Files Generated

1. .eslintrc.json

ESLint configuration with Airbnb TypeScript rules:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "extends": [
    "airbnb-base",
    "airbnb-typescript/base",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["@typescript-eslint", "import"],
  "rules": {
    "import/prefer-default-export": "off",
    "class-methods-use-this": "off",
    "no-console": "warn",
    "@typescript-eslint/no-explicit-any": "error"
  }
}

2. .prettierrc

Prettier formatting rules:

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "arrowParens": "always"
}

3. .prettierignore

Files to ignore:

node_modules
dist
build
coverage
*.min.js

4. .eslintignore

Files to ignore:

node_modules
dist
build
coverage

5. package.json scripts

Add these scripts:

{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx",
    "lint:fix": "eslint . --ext .ts,.tsx --fix",
    "format": "prettier --write \"src/**/*.{ts,tsx,json,md}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx,json,md}\""
  }
}

6. .vscode/settings.json (Optional)

VS Code integration:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "typescript"
  ]
}

Airbnb Style Guide Key Rules

This configuration enforces:

Variables:

• Use const by default, let when reassignment needed
• No var usage
• Block-scoped declarations

Functions:

• Arrow functions for anonymous functions
• Function declarations for named functions
• Default parameters over conditional assignment

Objects & Arrays:

• Literal syntax ({}, [])
• Object/array spread over Object.assign()
• Destructuring for multiple values
• Shorthand properties and methods

Strings:

• Template literals over concatenation
• Single quotes for strings (Prettier handles this)

Naming:

• camelCase for variables and functions
• PascalCase for classes and types
• UPPER_SNAKE_CASE for constants

TypeScript Specific:

• No any types (error level)
• Explicit return types for exported functions
• Interface over type when possible
• Proper generic naming

Code Style:

• Semicolons required
• 2-space indentation (configurable)
• Trailing commas in multiline
• Consistent spacing

Installation Process

Step 1: Install Dependencies

Using npm:

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript eslint-config-airbnb-base eslint-plugin-import prettier eslint-config-prettier eslint-plugin-prettier

Using Bun:

bun add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript eslint-config-airbnb-base eslint-plugin-import prettier eslint-config-prettier eslint-plugin-prettier

Step 2: Create Configuration Files

Generate all configuration files listed above.

Step 3: Update package.json

Add lint and format scripts.

Step 4: Run Initial Format

npm run format
npm run lint:fix

Step 5: Verify Setup

npm run lint

Custom Rule Adjustments

Common rules to adjust based on project needs:

{
  "rules": {
    // Disable default export requirement
    "import/prefer-default-export": "off",

    // Allow class methods without 'this'
    "class-methods-use-this": "off",

    // Warn on console.log (don't error)
    "no-console": "warn",

    // Error on any types
    "@typescript-eslint/no-explicit-any": "error",

    // Allow unused vars with underscore prefix
    "@typescript-eslint/no-unused-vars": ["error", {
      "argsIgnorePattern": "^_"
    }],

    // Adjust max line length
    "max-len": ["warn", {
      "code": 100,
      "ignoreComments": true,
      "ignoreStrings": true
    }]
  }
}

Git Hooks (Optional)

Using Husky + lint-staged

Install:

npm install -D husky lint-staged
npx husky install

Add .husky/pre-commit:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged

Add to package.json:

{
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

Editor Integration

VS Code Extensions

Install these extensions:

• ESLint (dbaeumer.vscode-eslint)
• Prettier - Code formatter (esbenp.prettier-vscode)

VS Code Settings

Create .vscode/settings.json with the configuration above.

Troubleshooting

ESLint Parsing Errors

Issue: Parsing error: Cannot read file 'tsconfig.json' Fix: Ensure parserOptions.project points to correct tsconfig.json

Prettier Conflicts

Issue: ESLint and Prettier rules conflict Fix: Ensure eslint-config-prettier is last in extends array

Import Resolution

Issue: ESLint can't resolve imports with @/ alias Fix: Add to .eslintrc.json:

{
  "settings": {
    "import/resolver": {
      "typescript": {
        "project": "./tsconfig.json"
      }
    }
  }
}

Install: npm install -D eslint-import-resolver-typescript

Validation Checklist

After setup, verify:

• All dependencies installed
• Configuration files created
• Scripts added to package.json
• npm run lint runs without errors
• npm run format formats code
• VS Code shows linting errors
• Format on save works in editor
• No ESLint/Prettier conflicts

Integration with Project

This skill integrates with project structure:

project-root/
├── .eslintrc.json          # ESLint config
├── .prettierrc             # Prettier config
├── .eslintignore           # ESLint ignore
├── .prettierignore         # Prettier ignore
├── .vscode/
│   └── settings.json       # Editor config
├── package.json            # With scripts
└── src/                    # Your code (will be linted)

Post-Setup Actions

After setup:

1. Run npm run format to format all code
2. Run npm run lint:fix to auto-fix issues
3. Manually fix remaining linting errors
4. Commit configuration files
5. Share with team via git

Related Skills

• ddd-context-generator: Generates code following these rules
• ddd-validator: Can check for code quality violations
• Use this skill BEFORE generating code for best results

Best Practices

1. Run before committing: Always lint and format before commits
2. Fix incrementally: Don't disable rules, fix the issues
3. Team agreement: Discuss and agree on custom rules
4. CI/CD integration: Add linting to CI pipeline
5. Regular updates: Keep dependencies updated

---

Note: This skill sets up code quality tooling. For architectural validation, use ddd-validator skill.