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.

eslint-config's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency prettier to v2.8.8
• Update dependency @changesets/cli to v2.27.2
• Update dependency @types/eslint to v8.56.10
• Update dependency eslint to v8.57.0
• Update pnpm to v9
• Update pnpm/action-setup action to v4
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update pnpm to v7.33.7
• Update pnpm/action-setup action to v2.4.0
• Update actions/checkout action to v4
• Update actions/setup-node action to v4
• Update dependency eslint to v9
• Update dependency eslint-config-prettier to v9
• Update dependency eslint-plugin-jsdoc to v48
• Update dependency prettier to v3
• Update dependency typescript to v5
• Update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/release.yml

• actions/checkout v3
• pnpm/action-setup v2.2.4
• actions/setup-node v3
• changesets/action v1

npm

package.json

• @types/eslint ^8.4.10
• @typescript-eslint/eslint-plugin ^5.45.0
• @typescript-eslint/parser ^5.45.0
• eslint ^8.35.0
• eslint-config-prettier ^8.5.0
• eslint-import-resolver-typescript ^3.5.3
• eslint-plugin-import ^2.27.5
• eslint-plugin-jsdoc ^40.0.0
• eslint-plugin-tsdoc ^0.2.17
• @changesets/cli ^2.26.0
• prettier ^2.8.4
• typescript ^4.9.5
• pnpm 7.29.3

---

• Check this box to trigger a request for Renovate to run again on this repository