[React, Others] 협업 시, ESlint & Prettier 기본 설정

Project/24-1 Everywhere

[React, Others] 협업 시, ESlint & Prettier 기본 설정

selfdevelop 2024. 8. 10. 01:16

유형: PR, TS/React,Others

작성 계기

미래의 나를 위해.

서론: ESlint와 Prettier의 역할

1) ESlint
: 함수나 변수 등에 사용에 있어 일관성 있는 코딩 스타일을 만들어주고, 오류를 검출한다.

: 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있다. Airbnb 스타일 가이드 플러그인이 가장 대중적이다.

2. Prettier
: 줄 간격, 띄어쓰기 등 전반적인 텍스트 작성을 일관성 있게 만들어준다.

→ 팀원의 코딩 스타일을 통일하여, 코드 이해도를 높인다.

본론: 구체적 과정

1) Visual Studio Code(이하 VSC) ESlint, Prettier 확장자 설치

2) 다음 명령어를 터미널에 입력

$ npm install "eslint" "prettier" --save-dev
$ npm install "eslint-config-prettier" "eslint-plugin-prettier" "eslint-plugin-react" --save-dev

//package-lock.json에 기록된 패키지와 버전정보
"devDependencies": {
        "eslint": "^8.57.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-prettier": "^5.2.1",
        "eslint-plugin-react": "^7.35.0",
        "prettier": "^3.3.3",}

3) src 폴더에 eslintrc.js 생성 후 다음 코드 입력

*확장자가 .js이든 .json이든 역할은 동일하다!

//eslintrc.js
module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended',
    'plugin:react/recommended', //사용하지 않는 경우도 있음
  ],
  plugins: ['react', 'prettier'],

  rules: {
    // 정해진 규칙들 수정 가능
    'no-var': 'warn',
    // var 금지
    'no-multiple-empty-lines': 'warn',
    // 여러 줄 공백 금지
    'no-console': ['warn', { allow: ['warn', 'error'] }],
    // console.log() 금지
    eqeqeq: 'warn',
    // 일치 연산자 사용 필수
    'dot-notation': 'warn',
    // 가능하다면 dot notation 사용
    'no-unused-vars': 'warn',
    // 사용하지 않는 변수 금지
    'react/destructuring-assignment': 'warn',
    // state, prop 등에 구조분해 할당 적용
    'react/jsx-pascal-case': 'warn',
    // 컴포넌트 이름은 PascalCase로
    'react/no-direct-mutation-state': 'warn',
    // state 직접 수정 금지
    'react/jsx-no-useless-fragment': 'warn',
    // 불필요한 fragment 금지
    'react/no-unused-state': 'warn',
    // 사용되지 않는 state
    'react/jsx-key': 'warn',
    // 반복문으로 생성하는 요소에 key 강제
    'react/self-closing-comp': 'warn',
    // 셀프 클로징 태그 가능하면 적용
    'react/jsx-curly-brace-presence': 'warn',
    // jsx 내 불필요한 중괄호 금지
  },
};

*오류 발생 시, 다음 사항을 반영

오류 1: 'React' must be in scope when using JSX

→ eslintrc.js의 rules 항목에 다음 코드 추가

'react/react-in-jsx-scope': 'off',

오류 2: 소스코드 문장 끝마다 'prettier/prettier error'가 발생할 경우

//이 경우, .prettierrc.js는 필요 없을 수도?
'prettier/prettier': [
    'error',
    {
      arrowSpacing: ['error', { before: true, after: true }],
      singleQuote: true,
      semi: false,
      useTabs: false,
      tabWidth: 2,
      trailingComma: 'none',
      printWidth: 80,
      bracketSpacing: true,
      arrowParens: 'always',
      endOfLine: 'auto', // 이 부분이 lf로 되어있다면 auto로 변경
    },
  ],

4) scr 폴더에 .prettierrc.js 생성 후 다음 코드 입력

module.exports = {
  singleQuote: true, // 문자열은 따옴표로 formatting
  semi: true, // 코드 마지막에 세미콜론이 있게 formatting
  useTabs: false, // 탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
  tabWidth: 2, // 들여쓰기 너비는 2칸
  trailingComma: 'all', // 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록 formatting
  printWidth: 80, // 코드 한 줄이 maximum 80칸
  arrowParens: 'avoid', // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
  endOfLine: 'auto', 
};

5) 관리 - 설정 - Default Formatter를 Prettier로 설정

6) [선택] 자동 수정 기능 적용

관리 - 명령 팔레트 - 사용자 설정 열기 (JSON) - 다음 코드 입력

{
  "editor.fontFamily": "D2Coding",
  "editor.fontSize": 16,
  "editor.formatOnType": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }

더 공부할 것