React.js 정리(2) - ESLint

ESLint란

• JavaScript 코드를 분석하여 문법 오류와 안티 패턴을 찾아내는 정적 분석 도구
• 검사 조건에 다양한 옵션 부여 가능

1. 설치

npm i eslint

2. 파일 설정

npx eslint --init

3. 룰 설정

// eslintrc.js

module.exports = {
    "env": { // 사전 정의된 전역변수 지정
        "es2021": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 13 // ecmaScript 버전
        "ecmaFeatures": { // 확장 기능 설정
      		"jsx": true
    	}
    },
    "rules": {
    	// rule example
    }
};

4. ESLint 체크

npx eslint <Your file name.js>

5. ESLint 룰을 사용하여 코드 수정

npx eslint --fix <your file name.js>

 

 

Rules

룰에는 3가지 종류가 있다

• OFF
• WARN
• ERROR

 

OFF	규칙을 꺼버린다
WARN	규칙을 지키지 않으면 경고하되, 코드는 계속 실행
ERROR	규칙을 지키지 않으면 프로그램을 종료

 

Example

세미콜론이 존재하는지 검사

module.exports = {
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 13
    },
    "rules": {
        "semi": ["error", "always"],
    }
};