natterstefan/eslint-config-ns

ESLint config ready to be used in multiple projects. Based on Airbnb's code style with prettier, jest and react support.

eslint-config-ns's Issues

Update ESLint to 6.x

Tasks & Notes

Upgrade ESLint

• https://eslint.org/blog/2019/06/eslint-v6.0.0-released
• https://eslint.org/docs/user-guide/migrating-to-6.0.0

Especially try:

• The function-paren-newline rule has a new multiline-arguments option.
• The sort-keys rule now supports a minKeys option.
• https://eslint.org/docs/user-guide/migrating-to-6.0.0#-overrides-in-an-extended-config-file-can-now-be-overridden-by-a-parent-config-file

Fixes

• Configuration for rule "react/jsx-curly-brace-presence" is invalid: Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed '"never"').

feat: add eslint-plugin-unicorn

Feature Request

Add, besides the Airbnb rules, another popular set of rules from Sindre Sorhus.

Links

• sindresorhus/eslint-plugin-unicorn: Various awesome ESLint rules

Example Config

/* eslint-disable global-require */
/**
 * @type {import('eslint').ESLint.Options}
 */
module.exports = {
  extends: [
    'eslint-config-ns-ts',
    // @see https://nextjs.org/docs/basic-features/eslint
    'plugin:@next/next/core-web-vitals',
    'plugin:@next/next/recommended',
    'plugin:storybook/recommended',
    // @see https://github.com/sindresorhus/eslint-plugin-unicorn
    'plugin:unicorn/recommended',
  ],
  plugins: ['graphql', 'lodash-tree-shakeable-import', 'unicorn'],
  rules: {
    'unicorn/filename-case': [
      'error',
      {
        cases: {
          camelCase: true,
          kebabCase: true,
          pascalCase: true,
        },
      },
    ],
    'unicorn/no-null': 'off',
    'unicorn/no-array-callback-reference': 'off',
    'unicorn/prefer-module': 'off',
    'unicorn/prevent-abbreviations': 'off',

    // 'consistent-return': ['error', { treatUndefinedAsUnspecified: true }],
 },
}

add eslint-plugin-react-hooks

Command failed: git describe --abbrev=0 fatal: No annotated tags can describe

Bug Report

Relevant information

When running our eslint script in our repo using your package, I get the observed results. It is being used in our private repo that has the required versions of eslint, node, and peer dependencies.

I'm not sure if this is a babel issue or issue with this package. I created a copy of your repo to fit my org's needs and that's where I originally saw this, but I also see it using your package too. I think it has to do something with the parser. I have the new parser installed @babel/eslint-parser. So I'm not really sure what's going on here :/

Your Environment

• Browser: _
• Browser version: _
• OS: MacOS 12.1
• Package name: eslint-config-ns
• Package version: 2.0.0

Steps to reproduce

Babel config:

/* eslint-disable */
const { serve } = require('./build-config');

module.exports = function (api) {
  const isTest = api.env('test');

  const plugins = [
    ['babel-plugin-styled-components'],
    ['@babel/plugin-proposal-class-properties'],
    ['@babel/plugin-proposal-private-methods'],
    ['lodash'],
    [
      'relay',
      {
        artifactDirectory: './src/scripts/__generated__',
        compat: true,
        schema: './build/data/schema.json'
      }
    ]
  ];

  if (serve) {
    plugins.push(['react-refresh/babel']);
  }

  return {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: isTest
            ? {
                node: '12.20.2'
              }
            : {
                chrome: 57,
                // etc.
              },
          bugfixes: true,
          corejs: 2,
          useBuiltIns: 'entry'
        }
      ],
      ['@babel/preset-react'],
      ['@babel/preset-flow']
    ],
    plugins
  };
};

{
  /**
   * Overwrite or extend the default parserOptions
   */
  "parserOptions": {
    "requireConfigFile": false,
  },

  "extends": [
    "eslint-config-ns"
  ],
  "plugins": ["react", "flowtype", "jest", "import"],

  // Settings, rules, globals, etc.
  },

Observed Results

• I get a bunch of these:

fatal: No annotated tags can describe '<SHA of HEAD>'.
However, there were unannotated tags: try --tags.

and then a bunch of these:

/Users/path/to/file.js
  0:0  error  Parsing error: /Users/path/to/config/babel.config.js: Error while loading config - Command failed: git describe --abbrev=0
fatal: No annotated tags can describe '<SHA of HEAD>'.
However, there were unannotated tags: try --tags

#### Expected Results

- Eslint runs all the rules and lints the code

feat: merge configs and maintain only eslint-config-ns

Feature Request

Ever since the introduction of the changes in #67, one can merge the packages again and ship all rules (javascript, typescript, jest, ...) in one config (preset) file. Thanks to https://www.npmjs.com/package/@rushstack/eslint-patch, this works without asking users to install eslint-plugin-react in a non-react project.

Decision

• deprecate other packages with deprecation notice on npm (https://docs.npmjs.com/cli/v8/commands/npm-deprecate)?

Add support for @next/eslint-plugin-next

Feature Request

Add another preset which supports next@11 applications out of the box, by adding the @next/eslint-plugin-next plugin.

See https://nextjs.org/docs/basic-features/eslint.

Basic example

module.exports = {
  extends: [
    'eslint-config-ns-ts',
    // @see https://nextjs.org/docs/basic-features/eslint
    'plugin:@next/next/recommended'
  ],
  /* ... */
}

Motivation

Add support for Next.js.

test if import groups rule works (import/order)

Links

• https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md#groups-array

Example

    'import/order': [
      'error',
      {
        groups: [
          'index',
          'sibling',
          'parent',
          'internal',
          'external',
          'builtin',
        ],
        'newlines-between': 'ignore',
      },
    ],

feat: dynamically detect if jest, react or other dependencies are installed and only then extend config

Feature Request

Sometimes I want to install eslint-config-ns (and others) in a new repository without using jest or other deps (e.g. react). So I need to add a way to detect if the package is installed, and if not, I will not extend the configurations.

feat: add support for eslint-plugin-storybook

Feature Request

Add support for Storybook's own ESLint configuration containing best practices for writing stories.

Basic example

• see https://storybook.js.org/blog/how-to-use-storybook-with-eslint/
• see https://github.com/storybookjs/eslint-plugin-storybook

feat: add support for updates of shipped dependencies

Feature Request

Basic example

• https://github.com/vercel/next.js/blob/11bd44f031164f73205fdf9fcfdb41430ee12c17/packages/eslint-config-next/index.js#L1-L52
• vercel/next.js#35667

Motivation

The config ships with the packages included, but users of the config should still be able to update them individually.

feat: add support for TODO comment linting

Feature Request

Besides using the VS Code extension Todo Tree, this could help make use of TODO comments even more.

Links

• eslint-plugin-todo-plz - npm
• eslint-plugin-todo-plz/ticket-ref.md at main · sawyerh/eslint-plugin-todo-plz
• eslint-plugin-unicorn/expiring-todo-comments.md at main · sindresorhus/eslint-plugin-unicorn

[Feature Request] Include .prettierignore

It would be cool to also have a shared extensible .prettierignore file in your sample project.

feat: add support for Cypress

Feature Request

Support Cypress out of the box.

Resources

• https://github.com/natterstefan/nextjs-template/blob/f0ead6f38b23e9a9f16e2482aeea04cfcd922f17/.eslintrc.js#L29-L45
• https://github.com/molindo/eslint-config-molindo/blob/539c8f16049a120a4b0b7ee900b2a9738d386f34/cypress.js

feat: add shared `tsconfig.json`

Feature Request

Every new TypeScript project comes the task of creating and maintaining a tsconfig.json. TypeScript configs can also be extended, that is what got me thinking if I should add one to my presets too.

Basic example

"extends": "eslint-config-ns/tsconfig.json"

Motivation

Create a shared tsconfig.json - and probably some presets like tsconfig.jest.jsonortsconfig.cypress.json` - which one can use easily.

Links and Todos

• add https://github.com/actions/typescript-action/pull/494/files#diff-b55cdbef4907b7045f32cc5360d48d262cca5f94062e353089f189f4460039e0R10
• add root: true (example)
• project in .eslintrc.js (example)?
• use a public base https://github.com/tsconfig/bases?

Example Repos

• https://github.com/voxpelli/tsconfig
• https://github.com/sindresorhus/tsconfig

Bug: eslint-config-ns-base extends eslint-config-airbnb instead of eslint-config-airbnb-base

Bug Report

Relevant information

eslint-config-ns-base must extend eslint-config-airbnb-base not eslint-config-airbnb

feat: ship with dependencies (eslint config and plugins) included

Feature Request

Ship with peerDependencies already.

Basic example

• https://www.npmjs.com/package/@rushstack/eslint-patch
  • Example: https://www.npmjs.com/package/@rushstack/eslint-config
• Inspiration
  • https://github.com/molindo/eslint-config-molindo
  • molindo/eslint-config-molindo#59
  • https://github.com/zemtu/mobile/blob/c777d37e1e233f5ac0ca9195f7ef6308d005cf0d/client/.eslintrc.js#L1

Motivation

Remove the need to install dependencies manually but still allow to update them if needed.

feat: add new rules or config settings

Feature Request

Rules

• @typescript-eslint/await-thenable (https://typescript-eslint.io/rules/await-thenable/)
• eslint-plugin-testing-library | Testing Library
• eslint-plugin-jest-dom | Testing Library
• confusing-browser-globals - npm (example)
• https://mysticatea.github.io/eslint-plugin-eslint-comments/ (e.g. eslint-comments/no-unused-disable, eslint-comments/no-unlimited-disable and/or eslint-comments/no-unused-enable).

Other Configs

• https://github.com/kripod/eslint-config/tree/master/packages
• https://github.com/microsoft/rushstack/tree/main/eslint/eslint-config

feat: add *.graphql support

Feature Request

Support using .graphql files in your project.

Basic example

/* eslint-disable global-require */
/**
 * @type {import('eslint').ESLint.Options}
 */
module.exports = {
  extends: [
    'eslint-config-ns-ts',
  ],
  plugins: ['graphql']
  overrides: [
    {
      files: ['*.graphql', '.gql'],
      rules: {
        /**
         * Graphql linting
         *
         * This plugin also lints GraphQL literal files ending on .gql or .graphql.
         * In order to do so set env to 'literal' to tell eslint to check these
         * files as well.
         */
        'graphql/template-strings': [
          'error',
          {
            env: 'apollo',
            schemaJson: require('./graphql/schema.json'),
          },
          {
            validators: [
              'FieldsOnCorrectTypeRule',
              'NoFragmentCyclesRule',
              'UniqueOperationNamesRule',
              'UniqueArgumentNamesRule',
            ],
            env: 'literal',
            schemaJson: require('./graphql/schema.json'),
          },
        ],
        'graphql/named-operations': [
          'error',
          {
            env: 'literal',
            schemaJson: require('./graphql/schema.json'),
          },
        ],
        'graphql/no-deprecated-fields': [
          'warn',
          {
            env: 'literal',
            schemaJson: require('./graphql/schema.json'),
          },
        ],
        // 'graphql/required-fields': [
        //   'error',
        //   {
        //     env: 'literal',
        //     schemaJson: require('./graphql/schema.json'),
        //     /**
        //      * ensure that we never miss adding `id` to queries, as this can
        //      * lead to nasty issues with apollo.
        //      */
        //     requiredFields: ['id'],
        //   },
        // ],
      },
    },
  ],
}

Tasks

• define how to provide schemaJson files (1 and multiple/different ones).
• add note that currently only @apollo/client code is tested

Notes

• use https://github.com/B2o5T/graphql-eslint instead of https://github.com/apollographql/eslint-plugin-graphql (see notes about Upcoming Deprecation Plans)
• example w/ apollo project: nodkz/example-apollo3@b885992...ecbc76b

add peerDependencies (eg. eslint-plugin-react)

And add "how to install", similar to https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base#eslint-config-airbnb-base-1