Support for ESLint (Properly)

[akd-io]

To do:

• Switch to @typescript-eslint.
  • Make ESLint CNS plugin install and add parser @typescript-eslint/parser to .eslintrc.cjs.
  • Make ESLint CNS plugin install and add plugin @typescript-eslint/eslint-plugin to .eslintrc.cjs.
• Make it possible to choose between the official configurations.
• Make ESLint CNS plugin install and add config eslint-config-prettier to .eslintrc.cjs if Prettier is used.
• Make it possible to choose between ESLint configs next and next/core-web-vitals.
  • next: next is an alias for next/recommended which includes Next-specific linting rules, but also bundles other useful ESLint plugins like import, react, react-hooks and jsx-a11y, and Next-specific overrides of these plugins. See the eslint-plugin-next source.
  • next/core-web-vitals: Extends next/recommended, turning a couple core web vitals-specific ESLint rules from warnings into errors. See the core-web-vitals config source.

See the typescript-eslint configuration docs, mainly this quote:

We recommend that most projects should extend from one of:

• recommended: Recommended rules for code correctness that you can drop in without additional configuration.
• recommended-type-checked: Contains recommended + additional recommended rules that require type information.
• strict: Contains recommended + additional strict rules that can also catch bugs but are more opinionated than recommended rules.
• strict-type-checked: Contains strict + additional strict rules require type information.

Additionally, we provide a stylistic config that enforces concise and consistent code. We recommend that most projects should extend from either:

• stylistic: Stylistic rules you can drop in without additional configuration.
• stylistic-type-checked: Contains stylistic + additional stylistic rules that require type information.

Example setup using @typescript-eslint/parser and @typescript-eslint/plugin as well as typed versions of both strict and stylistic:

/** @type {import("eslint").Linter.Config} */
const config = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: true,
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/strict-type-checked',
    'plugin:@typescript-eslint/stylistic-type-checked',
    'next/core-web-vitals',
    'prettier',
  ],
};

module.exports = config;