EsLint 코드 포맷 통일 및 가독성 높히기

ESLint

 

ESLint는  JavaScript, JSX의 정적 분석 도구로 오픈소스 프로젝트이다. 코드를 분석해 문법 오류나 안티 패턴을 찾아 일관된 코드 스타일로 작성하도록 도와준다.

 

EsLint 설치

npm install eslint --save-dev

yarn add eslint --dev

 

ESlint 설정

 

npx eslint --init

 

다양한 질문의 세례가쏟아짐

 

취향에 맞게 선택 문법, 문제점 코드스타일등 을 적용할거면 3번

프레임워크 본인은 React

import, export를 많이 쓰므로 JS Modules

TypeScript 사용유무

코드가 실행되는 환경

프로젝트 스타일 정의(보토은 대중적으로)

파일 포맷 (Json이 국룰)

 

이렇게 설정이 끝나면 .eslintrc.json 혹은 .eslintrc.js파일이 생성됨

 

{
    "env": {                        프로젝트의 사용 환경을 넣어줍니다.
        "browser": true,
        "es2021": true
    },
    "extends": "plugin:react/recommended",
    "parserOptions": {              자바스크립트 버전, 모듈 사용 여부 설정
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [                    플러그인을 넣어주면된다.
        "react"
    ],
    "rules": {                     extends와 plugins에 대한 세부 설정을 변경하는 코드를 넣을 수 있습니다.
       "max-length": 0             0으로 설정하면 에러 검출 X
    } 
    
    "globals": {                    전역 변수를 넣어준다.외부 라이브러리 사용시 에러 표지 방지
    "jQuery": true,
    "$": true
  }
}