eslint-config-himynameisdave

📄 An opinionated ESLint config, by and for himynameisdave.

A modular, opinionated, and well-maintained eslint config made by and for himynameisdave. Made of small configs which can be composed together to achieve a linting setup that is project-aware.

Contents

• Requirements
• Installation
• Configurations
  • base
  • core
  • node
  • typescript
  • react
  • svelte
  • import
  • jest
  • off
• Rules
• Releases
• Inspiration
• Neat ESLint Stuff

Requirements

Requires at least:

• Node v16.x+
• ESLint v8.x+

Installation

Install this eslint and this config:

yarn add -D eslint eslint-config-himynameisdave

You don't need to install eslint or any additional plugins to being using this package.

Configurations

This package provides various configurations which you can extend from.

Base

The base config turns enables the core eslint rules only. No additional plugins are required to use this config. Great for small projects.

// Extend your .eslintrc
{
  "extends": ["himynameisdave/configurations/base"]
}

Core

This includes base as well as turns on promise and unicorn rules as well.

// Extend your .eslintrc
{
  "extends": ["himynameisdave/configurations/core"]
}

Node

Extend this config with additional rules for Node projects. Useful for CLI/Node-only projects, although it should be compatible with the browser-based configurations listed below.

// Extend your .eslintrc
{
  "extends": [
    "himynameisdave/configurations/core",
    "himynameisdave/configurations/node"
  ]
}

Typescript

Extend this config for Typescript support. Requires type information, so you'll need to configure ESLint to be aware of your TS setup. You can read more about doing that here. You don't need to install @typescript-eslint/parser as it is included like the other plugins.

// Extend your .eslintrc
{
  "extends": [
    "himynameisdave/configurations/core",
    "himynameisdave/configurations/typescript"
  ],
  "parserOptions": {
    "sourceType": 'module',
    "tsconfigRootDir": __dirname,
    "project": './tsconfig.json'
  },
  "settings": {
    'import/parsers': {
      '@typescript-eslint/parser': [
        '.ts',
        '.tsx', // Only needed if using React
      ]
    },
    'import/extensions': [
      '.ts',
      '.tsx', // Only needed if using React
    ],
    'import/resolver': {
      typescript: {
        'alwaysTryTypes': true,
      },
    },
  },
  //  If you are also using the node or import configurations, you'll want these rules off:
  rules: {
    'import/extensions': 'off',
    'n/file-extension-in-import': 'off',
    'n/no-unsupported-features/es-syntax': 'off',
  }
}

React

Extends the base config with React support. This config may conflict with the Node config, so should be placed after it if using both.

//  Extend your .eslintrc
{
  "extends": [
    "himynameisdave/configurations/core",
    "himynameisdave/configurations/react",
    "himynameisdave/configurations/typescript" // If using Typescript, it should come last.
  ]
}

Svelte

Extends the base config with Svelte support. This config may conflict with the Node config, so should be placed after it if using both.

//  Extend your .eslintrc
{
  "extends": [
    "himynameisdave/configurations/core",
    "himynameisdave/configurations/svelte"
  ]
}

You may need to read more about configuring your editor for this plugin to work.

Import

Extends the base config with import plugin rules.

//  Extend your .eslintrc
{
  "extends": [
    "himynameisdave/configurations/core",
    "himynameisdave/configurations/import"
  ]
}

Jest

Extends the base config with jest plugin rules.

//  Extend your .eslintrc
{
  "extends": [
    "himynameisdave/configurations/core",
    "himynameisdave/configurations/jest"
  ]
}

Off

In addition to all of these, there is an off config which you can use to turn off all rules. Not sure there are a ton of use-cases for this, but it would allow you to extend from individual rulesets, like so:

//  .eslintrc
{
  "extends": [
    "himynameisdave/configurations/off",
    "himynameisdave/rules/promises/on",
    "himynameisdave/rules/unicorn/on"
  ]
}

Rules

Note that in addition to extending a configuration, you can also extend various rulesets. This gives you very granular control of your project.

As an example, let's assume we are using React but don't care about the jsx-a11y rules:

//  .eslintrc
{
  "extends": [
    "himynameisdave/configurations/core",
    "himynameisdave/rules/promises/on",
    "himynameisdave/rules/unicorn/on",
    "himynameisdave/rules/react/on",
    "himynameisdave/rules/react-hooks/on",
    "himynameisdave/rules/jsx-a11y/off", // We don't technically need to add this, but note that there are `off` versions for each.
  ]
}

Releases

Read more about the release guidelines for this project over here.

Inspiration

Inspired very heavily by the (now-dead) eslint-config-7geese, which was in turn inspired by eslint-config-walmart, eslint-config-formidable, and many others.

Some neat ESLint stuff

• eslint-rule-documentation - Tool to find the url for the documentation of an ESLint rule.
• eslint-nibble - When you/your team don't have time to fix all the ESLint violations in your codebase, you should just nibble them.
• eslint-multiplexer - When you have multiple of the same error in the same file, this groups them in the output.
• eslint-plugin-svelte3 - Because Svelte.