Skip to content

Eslint-config-react-app

Dependencies

이쉑이 뒤에서 하는짓

결론부터 말하면, @typescript-eslint/parser 파서 설정이 적용되어 있고,

플러그인으로 ['import', 'flowtype', 'jsx-a11y', 'react-hooks']가 적용되어 있다.

TypeScript 파일을 대상으로 오버라이드 되어 있는 플러그인은 @typescript-eslint 이다.

추가로, 그리고 #base.js에서는 react 플러그인, @babel/eslint-parser 파서가 설정되어 있다.

index.js 

module.exports = {
  extends: [require.resolve('./base')],

  plugins: ['import', 'flowtype', 'jsx-a11y', 'react-hooks'],
  overrides: [
    {
      files: ['**/*.ts?(x)'],
      parser: '@typescript-eslint/parser',
      parserOptions: {
        ecmaVersion: 2018,
        sourceType: 'module',
        ecmaFeatures: {
          jsx: true,
        },

        // typescript-eslint specific options
        warnOnUnsupportedTypeScriptVersion: true,
      },
      plugins: ['@typescript-eslint'],
      // If adding a typescript-eslint version of an existing ESLint rule,
      // make sure to disable the ESLint rule here.
      rules: {
        // ........................
      },
    },
  ],

  // NOTE: When adding rules here, you need to make sure they are compatible with
  // `typescript-eslint`, as some rules such as `no-array-constructor` aren't compatible.
  rules: {
    // ........................
  },
};

base.js 

'use strict';

// Fix eslint shareable config (https://github.com/eslint/eslint/issues/3458)
require('@rushstack/eslint-patch/modern-module-resolution');

// This file contains the minimum ESLint configuration required for Create
// React App support, and is used as the `baseConfig` for `eslint-loader`
// to ensure that user-provided configs don't need this boilerplate.

module.exports = {
  root: true,

  parser: '@babel/eslint-parser',

  plugins: ['react'],

  env: {
    browser: true,
    commonjs: true,
    es6: true,
    jest: true,
    node: true,
  },

  parserOptions: {
    sourceType: 'module',
    requireConfigFile: false,
    babelOptions: {
      presets: [require.resolve('babel-preset-react-app/prod')],
    },
  },

  settings: {
    react: {
      version: 'detect',
    },
  },

  rules: {
    'react/jsx-uses-vars': 'warn',
    'react/jsx-uses-react': 'warn',
  },
};

See also