[React] - ESLint 설치 및 설정

 

 

Eslint 

1. Eslint 설치

npm install eslint@lates --save-dev

 

 

 

2. npx eslint --init

❗이때 .eslintrc.json 파일 생성

 

 

3. 핵심 플러그인 설치

  "eslint",   ⭐ ⭐  ⭐  JavaScript와 JSX 파일의 코드 품질과 코딩 스타일 문제를 식별하기 위한 도구
 " eslint-plugin-import ", ⭐   ES6+의 import/export 문법과 관련된 문제를 식별하는 ESLint 플러그인

 " eslint-plugin-react  ", ⭐ ⭐  ⭐  React와 JSX 파일의 특정 규칙을 적용하기 위한 ESLint 플러그인 

 "plugin:jsx-a11y/recommended",   ⭐ jsx-a11y 플러그인 추가  / 웹접근성 관련
 "plugin:react-hooks/recommended", ⭐ ⭐   React Hooks 플러그인 추가 
 "prettier", ⭐ ⭐  ⭐  Prettier와 충돌하지 않는 규칙들을 비활성화
 "plugin:prettier/recommended" ⭐ ⭐  ⭐   Prettier 플러그인을 확장하며, Prettier 규칙을 ESLint 규칙으로 적용

 

 

한번에 설치 npm 명령어..

npm install eslint eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier --save-dev

 

 

 

4. React EsLinit 설정

{
    "root": true, // 이 설정 파일이 ESLint의 최상위 설정임을 명시합니다.
    "env": {
        "browser": true, // 브라우저 전역 변수를 사용할 수 있도록 설정합니다.
        "es2021": true // ES2021 문법을 사용할 수 있도록 설정합니다.
    },
    "extends": [
        "eslint:recommended", // ESLint의 기본 권장 설정을 확장합니다.
        "plugin:react/recommended", // react 플러그인의 권장 설정을 확장합니다.
        "plugin:@typescript-eslint/recommended", // typescript-eslint 플러그인의 권장 설정을 확장합니다.
        // "plugin:jsx-a11y/recommended", // jsx-a11y 플러그인의 권장 설정을 확장합니다. 접근성 관련 규칙을 제공합니다.
        "plugin:react-hooks/recommended", // React Hooks 플러그인의 권장 설정을 확장합니다. Hooks 규칙을 제공합니다.
        "prettier", // Prettier와 충돌하지 않는 ESLint 규칙을 설정합니다.
        "plugin:prettier/recommended" // Prettier 플러그인을 확장하며, Prettier 규칙을 ESLint 규칙으로 적용합니다. [충돌남]
    ],
    "parser": "@typescript-eslint/parser", // TypeScript 코드 분석을 위한 파서를 설정합니다.
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true // JSX 문법을 사용할 수 있도록 설정합니다.
        },
        "ecmaVersion": 12, // ECMAScript 2021 문법을 사용할 수 있도록 설정합니다.
        "sourceType": "module" // ES6 모듈 문법을 사용할 수 있도록 설정합니다.
    },
    "plugins": [
        "react", // React 플러그인을 사용합니다.
        "@typescript-eslint", // TypeScript ESLint 플러그인을 사용합니다.
        "import", // import/export 문을 다루는 데 도움을 주는 플러그인입니다.
        // "jsx-a11y", // 접근성 관련 jsx-a11y 플러그인을 사용합니다.
        "react-hooks", // React Hooks 관련 규칙을 제공하는 플러그인입니다.
        "prettier" // Prettier 플러그인을 사용합니다.
    ],
    "rules": {
        "react/display-name": 0, // React 컴포넌트가 displayName을 가져야 함을 요구합니다.
        "react/jsx-key": 2, // 반복되는 JSX 엘리먼트에 key 속성이 있어야 함을 요구합니다.
        "react/jsx-no-duplicate-props": 2, // JSX 엘리먼트에서 중복된 props 사용을 금지합니다.
        // "react-refresh/only-export-components": [
        //     1, // React Fast Refresh를 위해 파일에서 컴포넌트만 export하도록 경고합니다.
        //     { "allowConstantExport": true } // 상수의 export를 허용하는 옵션입니다.
        // ],
        // "react/prop-types": "off", // prop-types 사용을 비활성화합니다.
        "react/react-in-jsx-scope": "off", // Next.js 또는 Create React App과 같이 React를 import하지 않아도 JSX에서 React를 사용할 수 있도록 허용합니다.
        // "prefer-const": ["error", { "destructuring": "all" }], // 가능한 경우 const를 사용하여 변수를 선언하는 것을 선호합니다.
        // "@typescript-eslint/explicit-module-boundary-types": "off", // TypeScript 함수의 반환 유형이 명시적으로 선언되지 않은 경우 경고를 비활성화합니다.
        // "@typescript-eslint/no-explicit-any": "off" // any 타입의 사용을 비활성화합니다.
        "prettier/prettier": [
            "error",
            {
                "endOfLine": "auto"
            }
        ],
        "react/prop-types": "off"
    }
}

 

 

 

 

Prettier

1. Prettier 설치

npm install --save-dev --save-exact prettier

❗ --save-exact 버전의 변화로 스타일 변화를 막기위함으로 설정함

 

2. Vscode 설정

[window 기준]

1. ctrl + ' * 설정탭

2. JSON 설정 열기

3. 아래 설정 확인 및 반영

{
  // 파일을 저장할 때 자동으로 포맷팅을 적용합니다. Prettier를 기본 포맷터로 사용 설정이 활성화되어 있을 때 유용합니다.
  "editor.formatOnSave": true,

  // Prettier 확장을 기본 코드 포맷터로 설정합니다. 이 설정은 Prettier를 사용하여 코드 스타일을 일관되게 유지하는 데 도움이 됩니다.
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 저장 시 ESLint에 의한 자동 수정을 활성화합니다. `source.fixAll.eslint` 설정을 통해 ESLint의 자동 수정 기능을 사용할 수 있으며, "explicit"은 이 기능을 명시적으로 활성화합니다. 
  // Prettier와 함께 ESLint를 사용하는 경우 코드를 저장할 때 ESLint 규칙에 따라 코드가 자동으로 수정됩니다.
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // JavaScript, JSX, TypeScript, TSX 파일을 ESLint로 검사하고 수정합니다. 
  // 이 설정은 Prettier와 함께 ESLint를 사용할 때, VSCode에서 해당 언어 파일에 대해 ESLint 검사를 활성화합니다.
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

 

 

 

 

3. 프리티어 설정 .prettierrc.js or json..

아래의 프로퍼티를 가져다가 써주면 된다. 

// {
//     "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
//     "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부
//     "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름
//     "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
//     "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
//     "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
//     "printWidth": 80, //  줄 바꿈 할 폭 길이
//     "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
//     "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
//     "semi": true, // 세미콜론 사용 여부
//     "singleQuote": true, // single 쿼테이션 사용 여부
//     "tabWidth": 2, // 탭 너비
//     "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
//     "useTabs": false, // 탭 사용 여부
//     "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
//     "parser": '', // 사용할 parser를 지정, 자동으로 지정됨
//     "filepath": '', // parser를 유추할 수 있는 파일을 지정
//     "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
//     "rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
//     "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
//     "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
//     "overrides": [
//       {
//         "files": "*.json",
//         "options": {
//           "printWidth": 200
//         }
//       }
//     ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
//   }

 

 

 

 

주의점

esLint extends설정에 있어서 eslint-config-pretter인 ["prettier"] 와 eslint-plugin-prettier의 ["plugin:prettier/recommended"]는 한 세트로 가져가야 한다. 

 

"prettier",  ❗ -  Prettier와 충돌하지 않는 ESLint 규칙을 설정합니다.
"plugin:prettier/recommended" ❗ - Prettier 플러그인을 확장하며, Prettier 규칙을 ESLint 규칙으로 적용합니다.

 

만일 prettier / config를 사용하지 않는다면 eslint와 충돌이 나버리게 되니 이 점만 주의하고 품질 좋은 코딩라이프를 즐기면 된다.