eslint-config-daren

These are my settings for ESLint and Prettier

You might like them - or you might not. Don't worry you can always change them.

---

Table of Contents

• Table of Contents
• Installation
• Configuring ESLint, Prettier, and TypeScript Together
  • Prettier (Formatting)
  • Eslint (Linting)
    • Other configs
    • React example

Installation

This module should be installed as one of your project's devDependencies:

npm install --dev eslint-config-daren

yarn add -D eslint-config-daren

pnpm add -D eslint-config-daren

Configuring ESLint, Prettier, and TypeScript Together

Prettier (Formatting)

// .vscode/settings.json​
{​
  "editor.codeActionsOnSave": {"source.fixAll.eslint": "explicit"},
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true​
}

// .vscode/extensions.json​
{
  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
}

// prettier.config.js
/** @type {import("prettier").Config} */
module.exports = require('eslint-config-daren/prettier.config.cjs')

Eslint (Linting)

Then add the extends to your .eslintrc.js:

module.exports = {
  extends: 'daren',
  overrides: {
    // your overrides
  },
}

Other configs

You can use other configs in combination with the main eslint.

module.exports = {
  extends: ['daren', 'daren/<config-name>'],
}

Or you can extend them like this:

module.exports = {
  extends: [
    ...[
      'eslint-config-daren',
      'eslint-config-daren/react',
      'eslint-config-daren/jsx-a11y',
      'eslint-config-daren/tailwind',
    ].map(config => require.resolve(config)),
  ],
  overrides {
    // your overrides
  },
}

React example

module.exports = {
  extends: ['daren', 'daren/react', 'daren/jsx-a11y', 'daren/tailwind'],
  overrides: {
    // your overrides
  },
}