cuppachino/eslint-config

Lint TypeScript with ESLint, format with Prettier. Type-safe. Zero-conflict.

@cuppachino/eslint-config

• Extendable... fully customized ESLint configuration

• Optimized... for explosive TypeScript development

• Consistent... comment doc formatting with jsdoc and tsdoc

• Seamless... integration with Prettier

• Granular... keep Prettier and ESLint separate without conflict

Using this package in your project

Install

pnpm add -D eslint @cuppachino/eslint-config

Create a tsconfig.eslint.json at the root of your project and extend your own tsconfig.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "noEmit": true
  },
  "include": [
    "pkg/",
    // "src/",
    //  "./vite.config.ts",
    // "./apps/*/tsconfig.json"
  ],
}

Configure

Create a .eslintrc.cjs file in the root of your project and extend the config:

or .eslintrc.js or .eslintrc.json

module.exports = {
  
  /* 1️⃣ focus eslint to not look outside of your project */
  root: true, 

  /* 2️⃣ extend your config with the package */
  extends: ['@cuppachino/eslint-config'], 

  /* 3️⃣ point your own tsconfig(s) */
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: [
      './tsconfig.eslint.json', // REQUIRED
      './apps/*/tsconfig.json',
      './packages/*/tsconfig.json'
    ]
  },
  settings: {
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
        project: [
          './tsconfig.eslint.json', // REQUIRED
          './apps/*/tsconfig.json',
          './packages/*/tsconfig.json'
        ]
      }
    }
  },

  /* ⭐ Override rules here */
  rules: {
    // ...
  }
}

If you extend additional configs after @cuppachino/eslint-config, you may introduce conflicts between Prettier and ESLint. You can work around this by always including the config last OR by manually adding the eslint-config-prettier package to your project and adding "prettier" to the end of your extends array.

// ❌ NOT OK
extends: [
  '@cuppachino/eslint-config',
  'plugin:react/recommended',
]

// ✅ OK
extends: [
  'plugin:react/recommended',
  '@cuppachino/eslint-config',
]

// ✅ OK
extends: [
  '@cuppachino/eslint-config',
  'plugin:react/recommended',
  'prettier'
]

IDE Integration

TypeScript

Make sure to use your workspace's version of TypeScript and your tsconfig.json for type checking!

ESLint

To highlight code quality errors in vscode, you can use dbaeumer.vscode-eslint.

Add the following scripts to your package.json for usage in your pipeline:

{
  "scripts": {
    "lint:check": "eslint",
    "lint": "eslint --fix"
  }
}

Prettier

Follow the setup directions for rvest.vs-code-prettier-eslint. This will allow you to fix linting errors with eslint and format your code with prettier, on save, in one step.

These scripts can be used to format your entire project:

{
  "scripts": {
    "format": "prettier --check .",
    "format:fix": "prettier --write ."
  }
}

Development Cycle

If you have the previously mentioned extensions installed, you should be able to use them during development.

Install Dependencies

This package is managed with PNPM. To get started, run the following commands:

cd YOUR-eslint-config
pnpm install

Change, Commit, Merge & Release & Publish

1. After you make changes and save, create a new changeset and follow the cli prompts:

   cd YOUR-eslint-config
   pnpm new

2. Push your changes to a new branch and open a PR.

3. Once your PR is merged, changesets will automatically create a new release and publish it to NPM.