ESLint & Prettier

✨ ESLint & Prettier

TL;DR

• ESLint와 Prettier를 사용하면 린팅 + 포메팅 효과로 코드의 품질을 높일 수 있다.
• 실제 프로젝트에서는 한 명의 initial 프로젝트 세팅을 fork하여 사용할 것이므로 굳이 다른 인원들은 세팅할 필요가 없다. **필요한 rule은 그때그때 rules 필드에 추가하면 된다. eslint rule 검색하기 참고](https://devdocs.io/eslint/)
• airbnb의 eslint config를 가져와서 extend하여 사용한다.
• 전체 코드는 [마지막](https://www.notion.so/dbeeec5abee0451ca6c1cf87b3f88cc5?pvs=21)에 볼 수 있다. 복사해서 사용하면 된다.

ESLint, Prettier 설치

ESLint와 Prettier의 충돌을 해결하려면, npm을 이용하여 다음과 같은 의존성을 설치할 수 있습니다.

1. eslint와 prettier를 설치합니다.([eslint](https://eslint.org/docs/latest/use/getting-started)는 이미 프로젝트(vite, cra, next등)에 설치되어 있으므로 설치 생략)

npm install prettier

1. eslint와 prettier간의 충돌을 해결하기 위한 패키지를 설치합니다.

npm install -D eslint-config-prettier eslint-plugin-prettier

이 패키지들은 ESLint와 Prettier가 서로 충돌하지 않도록 설정을 조정해주는 역할을 합니다.

이후, .eslintrc.json 파일에 아래 설정을 추가합니다.

{
  "extends": [..., "plugin:prettier/recommended"],
  "plugins": [..., "prettier"],
  "rules": {
    ...
  }
}

이 설정은 ESLint가 Prettier의 규칙에 따라 코드를 검사하도록 만들어줍니다.

⚠️ 주의 : `"plugin:prettier/recommended"`는 항상 extends 배열의 마지막에 와야 합니다.

airbnb eslint config 가져와서 사용하기

Airbnb의 ESLint 설정을 사용하려면 다음과 같은 단계를 따르면 됩니다.

1. 먼저, Airbnb ESLint 설정을 설치합니다.

npm install -D eslint-config-airbnb

1. eslint-config-airbnb의 peerDepencies(airbnb가 의존하고 있는 또 다른 의존성들)를 설치합니다.

npx install-peerdeps --dev eslint-config-airbnb

1. 그 다음, .eslintrc.json 파일에 Airbnb 설정을 추가합니다.

{
  "extends": ["airbnb", ..., "plugin:prettier/recommended"],
  "plugins": [..., "prettier"],
  "rules": {
    ...
  }
}

이 설정은 Airbnb의 ESLint 규칙을 사용하면서, Prettier와의 충돌을 방지하도록 만들어줍니다.

"plugin:prettier/recommended" 항목은 항상 extends 배열의 마지막에 와야 합니다.

완성된 .eslintrc.cjs 파일, .prettierrc.cjs 파일

• .eslintrc.cjs 파일을 생성하여 아래와 같은 코드를 붙여 넣습니다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
    'airbnb',
    'airbnb/hooks',
    'plugin:jsx-a11y/recommended',
    'plugin:prettier/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  plugins: ['react', 'react-refresh', 'react-hooks', 'jsx-a11y', 'prettier', 'import'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  settings: {
    react: { version: '18.2' },
    // import/resolver` 는 `eslint-plugin-import` 의 경로 설정 옵션
    // todo: unresolved 에러 안 고쳐져서 규칙 일단 꺼놓음
    // 'import/resolver': {
    //   node: {
    //     paths: ['src'],
    //     extensions: ['.js', '.jsx', '.ts', '.tsx'],
    //   },
    //   caseSensitive: false,
    // },
  },
  ignorePatterns: ['reportWebVitals.js', '*.test.js'],
  rules: {
    'import/no-extraneous-dependencies': 'off',
    'import/no-unresolved': 'off',
    'no-shadow': 'off',
    'react/react-in-jsx-scope': 'off',
    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
    'padding-line-between-statements': [
      'error',
      { blankLine: 'always', prev: ['function', 'block'], next: '*' },
      {
        blankLine: 'always',
        prev: ['return', 'try', 'if', 'while', 'iife', 'for'],
        next: '*',
      },
      { blankLine: 'always', prev: '*', next: ['return', 'try', 'if', 'while', 'iife', 'for', 'export'] },
      {
        blankLine: 'always',
        prev: ['const', 'let', 'var'],
        next: ['multiline-const', 'multiline-let', 'multiline-var'],
      },
    ],
    'no-console': 'off',
    'react/function-component-definition': 'off',
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        '': 'never',
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'react/prop-types': 'off',
    'react/jsx-no-useless-fragment': 'off',
    'react/jsx-fragments': 'off',
    camelcase: 'off',
    'import/prefer-default-export': 'off',
    'react/jsx-props-no-spreading': 'off',
    'consistent-return': 'off',
  },
};

• .prettierrc.cjs 파일을 생성하여 아래와 같은 코드를 붙여 넣습니다.

/**
 * @type {import('prettier').Config}
 */
module.exports = {
  singleQuote: true,
  jsxSingleQuote: true,
  semi: true,
  tabWidth: 2,
  useTabs: false,
  trailingComma: 'all',
  printWidth: 120,
  arrowParens: 'always',
  endOfLine: 'auto',
  bracketSpacing: true,
};