VS Code에서 ESLint와 Airbnb 스타일 가이드 플러그인 설치 및 사용 가이드(React)

VS Code에서 ESLint와 Airbnb 스타일 가이드 플러그인 설치 및 사용 가이드

VS Code는 ESLint 및 Airbnb 스타일 가이드를 사용하는 개발자들에게 매우 유용한 개발 도구입니다. 이 가이드에서는 VS Code에서 ESLint와 Airbnb 스타일 가이드를 설치하고 설정하는 방법을 단계별로 설명하겠습니다. JavaScript/React 프로젝트에서 코드 스타일을 일관되게 유지하기 위한 방법을 배우실 수 있습니다.

VS Code에서 ESLint와 Airbnb 스타일 가이드를 설정하는 과정

---

1. ESLint 플러그인 설치

ESLint는 코드 품질을 유지하고 스타일 가이드를 준수할 수 있도록 도와주는 도구입니다. 먼저 VS Code에 ESLint 플러그인을 설치해야 합니다.

ESLint 설치 방법:

1. VS Code 열기
   • VS Code를 실행합니다.
2. 플러그인 설치  
   • 좌측의 확장(Extensions) 아이콘을 클릭합니다.
   • 검색창에 "ESLint"를 입력하고, ESLint 플러그인을 찾아 설치합니다.

     

     ES Lint

3. 설치 후 활성화
   • 설치가 완료되면 플러그인이 자동으로 활성화됩니다.

 

---

2. ESLint와 Airbnb 스타일 가이드 설정

이제 ESLint와 Airbnb 스타일 가이드를 적용하기 위한 환경을 설정하겠습니다. Airbnb 스타일 가이드는 eslint-config-airbnb를 통해 ESLint에 적용할 수 있습니다.

ESLint와 Airbnb 스타일 가이드 설치:

1. • 프로젝트 디렉터리에서 터미널(또는 명령 프롬프트)을 열고, ESLint와 Airbnb 설정을 설치합니다.프로젝트에서 터미널 열기

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

   
   

    
   • 프로젝트 루트에 .eslintrc.json 파일을 생성하고, 다음 내용을 추가합니다:ESLint 설정 파일 생성

2. {
     "extends": "airbnb",
     "env": {
       "browser": true,
       "es2021": true
     },
     "parserOptions": {
       "ecmaFeatures": {
         "jsx": true
       },
       "ecmaVersion": 12,
       "sourceType": "module"
     },
     "rules": {
       "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
       "react/prop-types": 0
     }
   }

   이 설정은 Airbnb 스타일 가이드를 사용하고, React에서 사용하는 JSX 파일 확장자 규칙을 설정하며, prop-types 경고를 비활성화합니다.

VS Code에서 json 파일 생성

---

3. VS Code에서 ESLint 자동 실행 설정

VS Code는 저장할 때마다 자동으로 ESLint를 실행하여 코드 스타일을 검토하도록 설정할 수 있습니다.

자동 ESLint 실행 설정:

1. VS Code 설정 열기
   • 상단 메뉴에서 파일(File) > 기본 설정(Preferences) > **설정(Settings)**으로 이동합니다.
   • 우측 상단의 설정 파일 열기 (Open Settings JSON) 버튼을 클릭하여 settings.json 파일을 엽니다.
   • 다음과 같은 설정을 추가하여 저장 시 ESLint 실행이 가능하게 만듭니다:ESLint 설정 추가

2. {
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     "eslint.validate": [
       "javascript",
       "javascriptreact",
       "typescript",
       "typescriptreact"
     ]
   }

   이 설정은 JavaScript, React, TypeScript 파일에서 ESLint 검사를 실행하고, 저장할 때 자동으로 스타일 문제를 수정합니다.

VS Code의 settings.json 파일

---

4. ESLint 오류와 경고 확인

VS Code에서 ESLint가 적용되면 코드에서 발생한 스타일 오류와 경고가 실시간으로 표시됩니다. 파일을 저장할 때마다 자동으로 ESLint가 실행되어 오류를 알려주며, 문제(People) 창에서 자세한 내용을 확인할 수 있습니다.

• ESLint 오류 또는 경고는 코드 옆에 빨간색 또는 노란색 밑줄로 표시됩니다.
• 마우스 오버를 통해 ESLint 규칙을 확인할 수 있습니다.

---

5. 코드 자동 수정

ESLint는 코드에서 발생한 스타일 문제를 자동으로 수정할 수 있는 기능도 제공합니다. VS Code에서 저장 시 자동으로 코드를 수정하거나, 수동으로 실행할 수 있습니다.

코드 자동 수정 실행:

1. 저장 시 자동 수정
   • 위에서 설정한 대로 저장할 때 ESLint가 자동으로 코드 스타일을 수정하도록 설정되어 있으면, 저장할 때 문제를 자동으로 해결합니다.
2. 수동으로 코드 자동 수정
   • **Command Palette (Ctrl+Shift+P)**를 열고, "ESLint: Fix all auto-fixable problems"을 입력한 후 실행하면, 모든 자동 수정 가능한 문제를 한 번에 해결할 수 있습니다.

---

6. Airbnb 스타일 가이드 주요 규칙

Airbnb 스타일 가이드에서 제공하는 주요 규칙들은 다음과 같습니다. ESLint가 자동으로 이를 검토하며, 개발자는 이 규칙에 따라 코드를 작성해야 합니다.

1. JSX 파일 확장자
   • JSX 코드가 포함된 파일은 .jsx 확장자를 사용해야 합니다.
2. 함수형 컴포넌트 권장
   • 클래스 컴포넌트 대신 함수형 컴포넌트를 사용하는 것을 권장합니다.

     const MyComponent = () => (
       <div>Hello World</div>
     );

3. PropTypes 사용
   • 컴포넌트의 props는 PropTypes를 사용해 타입을 명시해야 합니다.

     MyComponent.propTypes = {
       name: PropTypes.string.isRequired,
     };

4. 구조 분해 할당  
   • 객체나 배열의 구조 분해 할당을 사용하여 더 간결한 코드를 작성해야 합니다.

     const MyComponent = ({ title }) => <h1>{title}</h1>;

---

7. ESLint와 Prettier 통합

Airbnb 스타일 가이드를 따르는 동안 코드 포맷팅을 위해 Prettier와 통합할 수도 있습니다. Prettier는 코드를 자동으로 정렬하고 일관된 포맷을 유지해줍니다.

Prettier 설치 및 설정:

1. Prettier 설치

   npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

    
    
2. ESLint 설정 파일에 Prettier 통합
   • .eslintrc.json 파일에 다음 설정을 추가합니다:

     {
       "extends": ["airbnb", "prettier"],
       "plugins": ["prettier"],
       "rules": {
         "prettier/prettier": ["error"]
       }
     }

    

VS Code의 .eslintrc.json 파일 수정

---

결론

이제 VS Code에서 ESLint와 Airbnb 스타일 가이드를 적용하여 React 프로젝트에서 코드 일관성과 가독성을 유지할 수 있습니다. 또한 Prettier를 통합하면 코드 포맷팅까지 자동으로 관리할 수 있어 더 효율적으로 개발할 수 있습니다. 이 설정을 통해 프로젝트 전체에 걸쳐 일관된 스타일을 유지하고, 팀 협업도 더 원활하게 진행할 수 있습니다.