ESLint란? (적용해보기)

ESLint란?

Lint는 보푸라기라는 뜻!

프로그래밍 쪽에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다.

즉 ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미한다.

• 코드를 분석해 문법적인 오류나 안티 패턴을 찾아줌
• 일관된 코드 스타일을 유지(포맷팅)

개발자가 쉽게 읽도록 코드를 만들어준다!!

ESLint 적용해보기

npx eslint --init

yarn run eslint --init

등으로 먼저 설정파일을 만들어 준다.

그러면 선택지 몇개가 나와 선택하면 된다.

1. ESLint를 사용하는 방법

   

   • 문법만 검사
   • 문법과 문제 검사
   • 문법과 문제, 코드 규칙 검사

2. 어떤 타입의 모듈을 사용할 것인지

   

   • javascript(import/export)인지
   • CommonJs(require/exports)인지
   • 아무것도 아닌지

3. 어떤 프레임 워크 사용중인지

   

4. 타입 스크립트 사용하는지

   

5. 코드가 어디에서 동작하는지

   

6. 설정 파일 확장자를 뭐로 할건지

   

   보통 javaScript이다.

이렇게 되면 .eslintrc.js 파일이 생성된다.

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "plugin:react/recommended",
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

참고자료

JS코드를 깔끔하게 해주는 ESLint 알아보기! (적용방법과 상세 옵션)

[JS] ESLint 적용하기