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

Packages

This monorepo contains multiple packages. Take a look at their READMEs for more details.

• eslint-config-ns-base
• eslint-config-ns
• eslint-config-ns-ts-base
• eslint-config-ns-ts

How are they related to each other?

JavaScript

• eslint-config-ns-base is the base package for JavaScript projects.
• eslint-config-ns extends eslint-config-ns-base package and can be used in React projects.

TypeScript

• eslint-config-ns-ts-base extends eslint-config-ns-base package and is the base package for TypeScript projects.
• eslint-config-ns-ts is the last one in the chain and extends eslint-config-ns-ts-base and is best used in React TypeScript projects.

How to release

This repository uses GitHub Actions (debug locally) to create a release and update the CHANGELOG. The implementation is inspired and based on github.com/babel/actions.

Either push the tags after running this command to origin, or run the release workflow manually on GitHub.

Manually trigger release

yarn lerna:version
git push --follow-tags
# wait until GitHub Action finishes and then run
yarn lerna:publish

Manually create Changelog entry

npx lerna-changelog --from <tag> --to <tag>

Automatically with GitHub Actions

Manually invoke the GitHub Action release and wait until it finishes.

Once the release was created with GitHub Actions, publish the packages manually to npm with yarn lerna:publish.

Attention: make sure the Pull Requests have labels before you merge them. The label (e.g. enhancement and bug) will be used to create the CHANGELOG.

LICENSE

MIT

Stefan Natter

eslint-config-ns's Issues

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

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.

[Feature Request] Include .prettierignore

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

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.

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

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: 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

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

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: 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 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: 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 *.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

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)?

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: 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 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

add eslint-plugin-react-hooks