[React] ESLint, Prettier 초기세팅

Package Manager은 yarn을 사용했고, Vite 빌드툴을 사용했다.

ESLint랑 Prettier가 뭐지?

• ESLint와 Prettier이 정확하게 어떤 역할을 하는지 먼저 알아보자.

🧐 ESLint?

: ES(EcmaScript) + Lint

• EcmaScript는 JavaScript를 의미하고 Lint는 프로그래밍 쪽의 언어로 해석하면 에러가 있는 코드에 표시를 달아놓는 것을 의미
• 따라서 ESLint는 JavaScript언어에서 에러가 있는 코드에 표시를 달아놓는 도구!

• 대부분의 프로그래밍 언어에는 컴파일하는 과정에서 Linter가 기본적으로 내장되어있으나, 인터프리터 언어인 자바스크립트에는 Linter가 내장되어 있지 않다. -> 런타임 환경에서 에러 발생 확률이 높음!
• 따라서 ESLint와 같은 Linting 도구를 사용한다.
• ESLint말고도 여러 Linting 도구들이 있으나 ESLint는 다양한 플러그인을 사용할 수 있기 때문에 새로운 규칙을 추가할 수 있는 등 확장성이 높기 때문에 요즘 널리 쓰인다.

🧐 Prettier?

Prettier은 코드 포맷터(Code Formatter) 중 하나로, 작성된 코드의 스타일을 일관되게 유지해주면서 보기 좋게 정렬해주는 기능을 제공하는 도구이다.

• 자동으로 들여쓰기, 줄 바꿈, 공백, 쌍따옴표, 세미콜론 등 코드 스타일에 관련된 여러 가지 요소를 조정한다.

ESLint는 Linter이고 Prettier은 Formatter라는 점에서 차이가 있다!

ESLint & Prettier 설정하기

✨ ESLint 설정

1. 명령어 입력

yarn add -D eslint

-D 옵션을 사용해서 package.json에 개발 의존성(devDepenencies)으로 기록되게 한다.
관련 자료

2. Extension 설치

3. .eslintrc 파일 생성

yarn create @eslint/config

초기에 만들어진 .eslintrc 파일은 다음과 같다

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "plugins": [
        "@typescript-eslint",
        "react"
    ],
    "rules": {
    }
}

• env : 사용 환경 의미
• extends : 확장 기능 사용
• parserOptions : 버전과 모듈 사용 여부
• plugins : 사용되는 플러그인
• rules : 세부 규칙 추가

규칙과 parserOptions 몇 개 추가한 모습은 다음과 같다.

{
    "env": {
      "browser": true,
      "es2021": true
    },
    "plugins": ["@typescript-eslint", "react", "react-hooks", "import", "jsx-a11y"],
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:react/recommended",
      "plugin:import/recommended",
      "plugin:jsx-a11y/recommended" // jsx 접근성 규칙에 대한 검사기
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "ecmaVersion": "latest", // 사용할 ECMAScript 버전을 설정
      "ecmaFeatures": { // ECMAScript의 언어 확장 기능을 설정
        "jsx": true // ECMScript 규격의 JSX 사용 여부
      },
      "sourceType": "module"
    },
    "ignorePatterns": ["build", "dist", "public"], // lint 무시 파일 정하기
  
    "rules": {
      "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }], // "warn": 규칙을 경고로 사용
      "react/react-in-jsx-scope": "off", // react 17부턴 import react가 필요없는데 off해두지 않으면 에러뜸
      "react/jsx-uses-react": "off",
  
      "no-duplicate-imports": "error", // 중복 Import 금지
      "no-console": ["warn", { "allow": ["warn", "error", "info"] }], // 콘솔은 확인 뒤 지우기
      "no-unused-vars": "error", // 사용하지 않는 변수 error처리
      "no-multiple-empty-lines": "error", //공백 금지
      "no-undef": "error", // 정의 안 한 변수 사용 x
      "indent": "off", // 프리티어 충돌로 인한 OFF
      "no-trailing-spaces": "error", // 쓸데없는 공백 없애기
      "import/newline-after-import": ["error", { "count": 1 }], // import 구문들 뒤에 한 칸 띄우고 코드 작성
      "react-hooks/rules-of-hooks": "error", // 리액트 훅의 순서를 지키게끔 한다. (React는 Hook이 호출되는 순서에 의존하기 때문에)
      "arrow-parens": ["error", "always"], // arrow-function 인자가 2개 이상이면 괄호 필수
      "no-multi-spaces": "error", // 스페이스 여러개 금지
      "import/no-unresolved": "off", // 타입스크립트에서 경로를 제대로 잡지 못할 때 사용 or  eslint-import-resolver-typescript 설치
  
      "import/order": [
        "error",
        {
          "groups": ["builtin", "external", "internal", ["parent", "sibling"], "index"], //import 순서를 고정. builtin- 외부- 내부
          "pathGroups": [
            // react 컴포넌트가 builtin 뒤에 (external import 앞에 나오도록 설정)
            { "pattern": "react", "group": "builtin", "position": "after" },
            { "pattern": "react-dom", "group": "builtin", "position": "after" }
          ],
          "pathGroupsExcludedImportTypes": ["react", "react-dom"], // pathGroups가 올바르게 적용하기 위해.. (확실치 않음)
          "alphabetize": {
            "order": "asc", // 알파벳 순서 정렬 방식
            "caseInsensitive": true // 알파벳 대소문자 구분
          },
          "newlines-between": "always" // group들 사이마다 개행 적용 (group 내부에서 개행 적용 불가)
        }
      ]
    }
  }

💅🏻 Prettier 설정

1. 명령어 입력

yarn add --dev --exact prettier

2. prettierrc.json 파일 생성

echo {}> .prettierrc.json

3. Extension 설치

4. ESLint와 Prettier 연결

yarn add -D eslint-plugin-prettier

5. .eslintrc.js 파일의 "extends" 배열에 "prettier"를 추가한다.

    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:react/recommended",
      "plugin:import/recommended",
      "plugin:jsx-a11y/recommended", // jsx 접근성 규칙에 대한 검사기
      "plugin:prettier/recommended" // prettier 추가
    ],

6. .prettierrc.json 파일 내용 채우기

{
  "printWidth": 100, //  줄 바꿈 할 폭 길이
  "tabWidth": 2, // 탭 너비 
  "singleQuote": true, // single 쿼테이션 사용 여부
  "trailingComma": "all", // 객체나 배열의 마지막 원소 끝에도 ,를 사용할지에 대한 옵션이다.
  "bracketSpacing": true,
  "semi": true, // 끝에 세미콜론 사용 여부
  "useTabs": false,
  "endOfLine": "lf",
  "bracketSameLine": false,
  "arrowParens": "always" // 화살표 함수 괄호 사용 방식
}

+) 빼먹은 부분 정리😂
고맙게도 리드 오빠가 테스트 해주면서 빼먹은 부분 피드백해줬다!✨

1) .eslintc.json 파일 plugin 설치

"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",

요 두 개를 빼먹어서 저장할 때 자동으로 eslint 적용이 안됐다
다음과 같은 명령어를 작성하면 설치할 수 있다.👍

yarn add -D eslint-plugin-import eslint-plugin-jsx-a11y

2) package.json파일의 scripts 수정

"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint './/*.{ts,tsx,js,jsx}'",
"lint:fix": "eslint --fix './/*.{ts,tsx,js,jsx}'",
"preview": "vite preview"
},

• lint 속성 말고도 lint:fix 속성도 설정해줘야 한다! 이렇게 설정해주고 format on save 설정해주면 정상적으로 작동한다.

🧐 잘 적용되나 테스트 하는 방법

• 초기세팅을 처음 해봐서 어떻게 해야 적용된건지 테스트하는게 좀 막막했는데 이 부분도 정리해보려 한다!

1. 파일 경로 입력해서 직접 테스트

yarn eslint src/pages/Page1.tsx

2. package.json 파일에 lint 명령어를 정의 -> yarn lint 명령어 사용

"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint './/*.{ts,tsx,js,jsx}'",
"lint:fix": "eslint --fix './/*.{ts,tsx,js,jsx}'",
"preview": "vite preview"
},

여기 스크립트에서 정의해준대로 명령어를 사용하면 된다☺️👍
yarn lint 명령어를 쓰면 yarn eslint './/*.{ts,tsx,js,jsx} 명령어가 실행된다!