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:

json

{
  "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:

json

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

3. .prettierignore

Files to ignore:

code

node_modules
dist
build
coverage
*.min.js

4. .eslintignore

Files to ignore:

code

node_modules
dist
build
coverage

5. package.json scripts

Add these scripts:

json

{
  "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:

json

{
  "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:

bash

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:

bash

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

bash

npm run format
npm run lint:fix

Step 5: Verify Setup

bash

npm run lint

Custom Rule Adjustments

Common rules to adjust based on project needs:

json

{
  "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:

bash

npm install -D husky lint-staged
npx husky install

Add .husky/pre-commit:

bash

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

Add to package.json:

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:

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:

code

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:

•Run npm run format to format all code
•Run npm run lint:fix to auto-fix issues
•Manually fix remaining linting errors
•Commit configuration files
•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

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

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