eslint 플러그인 종류, 총 정리

프로젝트 스캐폴딩 중 수많은 eslint 플러그인을 마주하게 된 나..
일일이 구글링하느라 고생했어서, 혹시 나같은 사람이 있을까 정리해봄!😇

패키지들을 몇 가지로 분류해뒀으니, 아래 분류로 각 패키지의 대략적인 역할들을 파악하신 다음 자세한 설치 과정을 구글링 하시면 될 듯합니다!

prettier 사용 관련

prettier와 eslint를 함께 사용하기 위한 패키지들입니다. 참고로 prettier는 코드 포맷팅이 주 목적이고, eslint는 lint(에러를 잡아내는 일)가 주 목적이기 때문에 보통 두 가지를 함께 사용합니다. 

• eslint-config-prettier
• eslint-plugin-prettier

typescript 사용 관련

• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser

react-native 관련

• eslint-plugin-react-native
• @react-native-community/eslint-config

airbnb style 적용 관련

맨 첫 번째에 있는 패키지를 위해 아래 네 개를 설치하셔야 합니다!

• eslint-config-airbnb
• eslint-plugin-import
• eslint-plugin-jsx-a11y
• eslint-plugin-react
• eslint-plugin-react-hooks

그 외

• eslint-import-resolver-typescript
• eslint-plugin-simple-import-sort
  : import문을 특정 기준에 따라 자동정렬할 수 있는 플러그인입니다. .eslintrc.js 파일에서 정렬 순서를 커스터마이징 할 수 있습니다.
• eslint-plugin-unused-imports
  : 사용되지 않은 import문을 지워주는 플러그인입니다.

.eslintrc.js 

위 패키지들을 사용하면서 작성한 .eslintrc.js 파일을 첨부합니다.

module.exports = {
  root: true,
  env: {
    es2021: true,
    node: true,
    jest: true,
    'react-native/react-native': true,
  },
  ignorePatterns: ['node_modules/', '.pnp.cjs', '.pnp.loader.mjs', '.yarn'],
  plugins: [
    '@typescript-eslint',
    'react',
    'react-native',
    'simple-import-sort',
    'unused-imports',
    'jest',
    'testing-library',
    'import',
  ],
  extends: [
    'airbnb',
    '@react-native-community',
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      extends: ['plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended'],
      rules: {},
    },
  ],
  settings: {
    'import/resolver': {
      typescript: {},
    },
  },
  rules: {
    'prettier/prettier': ['error', { useTabs: false }],
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'react/jsx-filename-extension': [
      'warn',
      {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    ],
    'no-console': [
      'warn',
      {
        allow: ['warn', 'error'],
      },
    ],
    'import/no-unresolved': 'error',
    'react/react-in-jsx-scope': 'off',
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    'simple-import-sort/imports': [
      'error',
      {
        groups: [
          // Packages. `react` related packages come first.
          ['^react', '^@?\\w'],
          // Internal packages.
          ['@pay-stitches', '^(@/?$)(/.*|$)'],
          // Side effect imports.
          ['^\\u0000'],
          // Parent imports. Put `..` last.
          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
          // Other relative imports. Put same-folder imports and `.` last.
          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
        ],
      },
    ],
    'no-shadow': 'off',
    '@typescript-eslint/no-shadow': 'error',
    'simple-import-sort/exports': 'error',
    'import/first': 'error',
    'import/newline-after-import': 'error',
    'import/no-duplicates': 'error',
    '@typescript-eslint/no-unused-vars': 'off',
    'unused-imports/no-unused-imports': 'error',
    'unused-imports/no-unused-vars': [
      'error',
      {
        vars: 'all',
        varsIgnorePattern: '^_',
        args: 'after-used',
        argsIgnorePattern: '^_',
      },
    ],
    'react/require-default-props': 'off',
    'react/function-component-definition': [
      'warn',
      {
        namedComponents: 'arrow-function',
      },
    ],
    'react/jsx-props-no-spreading': ['warn', { exceptions: ['Button', 'AppComponent'] }],
    'import/order': 'off',
  },
};