ESLint

We will now add a linting setup to our TypeScript library, for which we will need the following packages:

pnpm add -D \
  eslint eslint-config-standard-with-typescript \
  eslint-plugin-prettier eslint-config-prettier \
  eslint-config-standard eslint-plugin-react

• eslint: the binaries doing the actual linting.
• eslint-config-standard-with-typescript: an opinionated set of rules to follow the JavaScript Standard Style, including TypeScript support.
• eslint-plugin-react: react-specific ESLint rules.
• eslint-plugin-prettier: let's us run Prettier as part of ESLint. Prettier takes care of things like line lengths etc.
• eslint-config-prettier: in order to avoid clashes between ESLint end Prettier, this config overwrites all ESLint rules that would clash with prettier.

Now, we can set up an .eslintrc.js:

module.exports = {
  root: true,
  ignorePatterns: ['dist/**/*'],
  extends: [
    'standard-with-typescript',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:prettier/recommended'
  ],
  plugins: ['react', 'prettier'],
  rules: {
    'react/prop-types': 'off',
    'import/order': 'error',
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': 'error',
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    'prettier/prettier': [
      'error',
      {
        tabWidth: 2,
        printWidth: 120,
        singleQuote: true,
        trailingComma: 'none',
        semi: false
      }
    ]
  },
  settings: {
    react: {
      version: 'detect'
    }
  },
  parserOptions: {
    project: 'tsconfig.json'
  }
}

A couple of notes on the config:

• We don't want to lint the build artifacts, so we add dist to the ignorePatterns.
• In addition to react/recommended, we also include react/jsx-runtime, as we're using the new JSX runtime as of React 17.
• react/prop-types is turned off as the props are typed through TypeScript.
• no-use-before-define: we want to use the TypeScript version, so we turn off the JavaScript one.