@youversion/eslint-config-typescript

[!note] Oxlint config available Check out @youversion/oxlint-config if you use Oxlint instead of ESLint.

ESLint configuration for YouVersion TypeScript and Next.js projects.

[!caution] ⚠️ Requires ESLint 9 ⚠️ ESLint 8 is no longer supported in v4. See **Migrating from v3 to v4

Requirements

• eslint 9
• prettier 3

Installation

yarn add --dev eslint prettier @youversion/eslint-config-typescript

Project Setup

Please read these sections carefully and choose the correct configuration for your project.

ESLint

eslint.config.mjs

Base config without framework-specific rules

// eslint.config.mjs
import config from '@youversion/eslint-config-typescript';
import { defineConfig } from "eslint/config";

export default defineConfig(config);

Config for NextJS projects

// eslint.config.mjs
import nextjsConfig from '@youversion/eslint-config-typescript/nextjs';
import { defineConfig } from "eslint/config";

export default defineConfig(nextjsConfig);

Config for React projects without NextJS

// eslint.config.mjs
import reactConfig from '@youversion/eslint-config-typescript/react';
import { defineConfig } from "eslint/config";

export default defineConfig(reactConfig);

Extending file ignore patterns

// eslint.config.mjs
import reactConfig, { ignores } from '@youversion/eslint-config-typescript/react';
import { defineConfig } from "eslint/config";

export default defineConfig([
  ...reactConfig,
  { ignores: [...ignores, 'lighthouse', 'graphql']},
]);

[!note] Note: If you don't want to use a pre-built config above, you can compose your own by importing atomic configs. In addition, all configs export their rules separately if needed.

Single config

// eslint.config.mjs
import typescriptConfig from '@youversion/eslint-config-typescript/configs/typescript';
import { defineConfig } from "eslint/config";

export default defineConfig(typescriptConfig);

Multiple configs

// eslint.config.mjs
import typescriptConfig from '@youversion/eslint-config-typescript/configs/typescript';
import cypressConfig from '@youversion/eslint-config-typescript/configs/cypress';
import { defineConfig } from "eslint/config";

export default defineConfig([
  ...typescriptConfig,
  ...cypressConfig,
]);

Rule set Note: Most rules depend on plugins or other pieces in order to work. Where possible these are exported alongside the default config exports.

// eslint.config.mjs
import { rules, plugins, languageOptions } from '@youversion/eslint-config-typescript/configs/typescript';
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    rules,
    plugins,
    languageOptions
  },
]);

Prettier

prettier.config.mjs

Base config without framework-specific rules

// prettier.config.mjs
import prettierConfig from '@youversion/eslint-config-typescript/prettier';

export default prettierConfig;

Base config with custom rules

// prettier.config.mjs
import prettierConfig from '@youversion/eslint-config-typescript/prettier';

export default {
  ...prettierConfig,
  // Your custom rules go here.
};

Config for React projects using NextJS

// prettier.config.mjs
import prettierNextJSConfig from '@youversion/eslint-config-typescript/prettier/nextjs';

export default prettierNextJSConfig;

Base config with Tailwind rules

module.exports = {
  ...require('@youversion/eslint-config-typescript/prettier'),
  ...require('@youversion/eslint-config-typescript/prettier/tailwind'),
}

// prettier.config.mjs
import prettierConfig from '@youversion/eslint-config-typescript/prettier';
import prettierTailwindConfig from '@youversion/eslint-config-typescript/prettier/tailwind';

export default {
  ...prettierConfig,
  ...prettierTailwindConfig,
};

Migrating from v3 to v4

[!caution] ⚠️ Breaking Changes ⚠️

• Updated to ESLint 9 flat config structure
• Dropped support for ESLint 8 and below
• Renamed rules folder to configs
• ESLint and Prettier configs must be converted to .mjs
• .eslintignore no longer supported

1. In package.json
   1. Remove resolutions for eslint-related packages
   2. Remove eslint-plugin-next and/or eslint-config-next
   3. Update eslint, prettier, and @youversion/eslint-config-typescript to latest versions
2. Rename .eslintrc.js to eslint.config.mjs
3. Rename .prettierrc.js to prettier.config.mjs
4. Update to the new flat config format
   1. Project Setup: ESLint
   2. Project Setup: Prettier
5. Migrate .eslintignore into ignores in the config

Also see ESLint Configuration Docs.

Example

Before

// .eslintrc.js
module.exports = {
  extends: ['@youversion/eslint-config-typescript/nextjs'],
  rules: {
    // some custom rule overrides.
  },
};

After

// eslint.config.mjs
import nextjsConfig, { ignores } from '@youversion/eslint-config-typescript/nextjs';
import { defineConfig } from "eslint/config";

export default defineConfig([
  ...nextjsConfig,
  {
    rules: {
      /**
       * New rules introduced by React.
       * They're valid, but may need some effort to fix
       * depending on how many errors are in the app.
       *
       * @see {@link https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks#flat-config-eslintconfigjsts-1}
       */
      'react-hooks/error-boundaries': 'warn',
      'react-hooks/immutability': 'warn',
      'react-hooks/preserve-manual-memoization': 'warn',
      'react-hooks/set-state-in-effect': 'warn',
    },
  },
  {
    /**
     * Migrated from .eslintignore
     * Putting it in its own config object at the end so it applies to all previous configs.
     */
    ignores: [...ignores, 'lighthouse', 'graphql'],
  },
]);