Nacho Portion Monitor

    @jjangga0214/eslint-configurer

    1.2.0 • Public • Published

    @jjangga0214/eslint-configurer

    This is NOT a Sharable Config for eslint. Rather, it provides functions to easily create an eslint config. Thus, its concept is similar to sharable config. You can create Sharable Config by depending on this package. In fact, Sharable Config @jjangga0214/eslint-config depends on this package.

    Installation

    npm install --save-dev @jjangga0214/eslint-configurer
    # or
    yarn add --dev @jjangga0214/eslint-configurer
    # or
    pnpm add --save-dev @jjangga0214/eslint-configurer

    And you should also install peerDependencies manually. Checkout package.json or npm info.

    # This does not install them all. This just show them on terminal.
    npm info "@jjangga0214/eslint-configer@latest" peerDependencies

    Or install them all by install-peerdeps.

    # For npm
    npx install-peerdeps --dev @jjangga0214/eslint-config
    # For yarn
    npx install-peerdeps --yarn --dev @jjangga0214/eslint-config
    # For pnpm
    npx install-peerdeps --pnpm --dev @jjangga0214/eslint-config

    But before the installtion, please read this docs first.

    Optional peerDependencies

    As you can see from peerDependenciesMeta in package.json, some peerDependencies are marked as optional. For peerDependencies NOT specified as optional, you must install them.

    When you ONLY use javascript (.js, .mjs, .cjs)

    You don't have to install optional peerDependencies at all. You still have to install non-optional peerDependencies (e.g. eslint, prettier, eslint-plugin-unicorn).

    When you use typescript (.ts, .tsx)

    If you use typescript, you should install these optional peerDependencies. (So these are in fact NOT optional if you use typescript.)

    • @typescript-eslint/eslint-plugin
    • eslint-import-resolver-typescript
    • eslint-plugin-import (This is needed both for typescript and react)
    • typescript

    When you use react (.jsx, .tsx)

    If you use react, you should install these optional peerDependencies. (So these are in fact NOT optional if you use react.)

    • eslint-plugin-import (This is needed both for typescript and react)
    • eslint-plugin-jsx-a11y
    • eslint-plugin-react
    • eslint-plugin-react-hooks

    Why are these 3 packages listed on both peerDependencies and dependencies simultaneously?

    • eslint-plugin-jsx-a11y
    • eslint-plugin-react
    • eslint-plugin-react-hooks

    Theses packages above are listed on both dependencies and peerDependencies. One of this pacakges dependency, eslint-config-airbnb, which contains react rules along with pure javascript rules, requires them as peerDependencies. Though it's possible letting the final consumer install them as dependencies, it's avoided intentionally by listing them in this package's dependencies.

    This is because I don't want to force the final users to install those plugins even when their projects don't include react code.

    Therefore I let those plugins become optional peerDependencies to the final consumer by specifying them as dependencies in this package's package.json.

    For users who use react, they have to install the plugins anyway (So it's in fact not optional). For users who don't use react, they don't have to install the plugins.

    Usage

    .eslintrc.js:

    const { configure } = require('@jjangga0214/eslint-configurer');
    
    module.exports = configure({
      react: true,
      typescript: true,
      jest: true,
    })

    If you have tsconfig named/located unconventional

    By default, ./packages/*/tsconfig.json or (if not found) ./tsconfig.json is used. If your tsconfig file is named/located differently (e.g. tsconfig.eslint.json), then you might want to override parserOptions.project AND settings['import/resolver'].typescript.project from typescript config.

    parserOptions: {  
      project: ['./packages/*/tsconfig.json', './tsconfig.json',], // Override it
    },
    settings: {
      'import/parsers': {
        '@typescript-eslint/parser': [".ts", ".tsx"]
      },
      'import/resolver': {
        typescript: {
          alwaysTryTypes: true,
          project: [ // Override this as well
            'packages/*/tsconfig.json',
            'tsconfig.json',
          ]
        },
      },
    }

    Development

    Sharable Config

    You should understand what eslint's concept of sharable config. The official docs is here.

    Plugins are peerDependencies, while Sharable Configs are dependencies

    Sharable Config can depend on other Sharable Configs. Therefore the final consumer does not need to manually install all Sharable Configs. They are all to be installed transitively (dependency of dependency).

    Once eslint#3458 is resolved, Plugins can be moved from peerDependencies to dependencies. Currently, only eslint-config-* are allowed to be dependencies.

    Why using require.resolve?

    As you can see require.resolve is used for extend field in config. Eslint extract sharable config name from omited prefix eslint-config.

    {
      'extends': [
        'eslint:recommended', // "eslint:" protocol is reserved for eslint itself 
        'plugin:unicorn/recommended', // "plugin:" protocol is a must for plugins
        'airbnb', // This is specifying "eslint-config-airbnb". The prefix "eslint-config" can be ommitted.
      ]
    }

    However, this only works when you directly configure eslint for your project. For, a Sharable Config depending on other Sharable Configs, this does not work. Therefore, a full path should be specified. This is why require.resolve is used.

    {
      'extends': [
        'eslint:recommended',
        'plugin:unicorn/recommended',
        require.resolve('eslint-config-airbnb'), 
      ]
    }

    Install

    npm i @jjangga0214/eslint-configurer

    DownloadsWeekly Downloads

    4

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    16.1 kB

    Total Files

    4

    Last publish

    Collaborators

    • jjangga0214