자바스크립트 babel에 이어서 eslint 도 같이 써볼래요?

이전에 소개해드린 babel에 이어서 eslint 도 같이 써볼래요?

 

eslint가 머냐면요? 정해진 코딩룰에 어긋난게 있는지 알려주는거에요

코드에 문제가 있거나 또는 코딩룰에 어긋난 것들을 찾아서 알려주는거져

 

일단 package.json을 보면 eslint 관련해서 두가지 모듈을 설치했어요

eslint는 eslint 사용을 위한 필수 패키지고요

eslint-config-google 는 설정 google에서 배포한거 따라하기 위해서 설치한거에요

사전에 정의된 config는 보통 google 하고 airbnb(eslint-config-airbnb) 두개를 가장 많이 써요

저는 구글이 좋아서 구글거를 사용할게요

package.json
{
    "name": "babel-sample",
    "version": "1.0.0",
    "description": "",
    "main": "lib/index.js",
    "scripts": {
        "build": "babel src -d lib",
        "eslint": "eslint ./src",
        "start": "npm run eslint && npm run build && node ."
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/cli": "^7.21.0",
        "@babel/core": "^7.21.0",
        "@babel/preset-env": "^7.20.2",
        "eslint": "^8.36.0",
        "eslint-config-google": "^0.14.0"
    }
}

babel과 마찬가지로 설정을 해야곘져?

./node_modules/.bin/eslint --init 이라고 하시면 몇가지 물어면서 설정파일을 자동으로 만들어줘요

그리고 나서 입맛에 맞춰서 바꿔서 사용하시면되요

아래는 제가 간단하게 수정한거에요

env 는 어느 환경에서 사용하는 프로그램이냐를 물어보는거에요

extends는 기 정의된 설정을 가져오겠다는건데 eslint에서 제공하는 기본하고 위에서 다운로드한 구글 설정을 쓰겠다는 거에요

babel 과 마찬가지로 요즘에 프리셋 들이 워낙 잘되있어서 설정 파일을 건드릴게 많이 없어요

rules 는 기정의된 룰에서 바꾸고 싶은게 있으면 변경할수 있어요

나는 이거 안잡았으면 좋겠는데 계속 잡네 이런 룰에 대해서 ignore 시켜버리시면되요

.eslintrc.js
module.exports = {
    env: {
        node: true,
        es2022: true,
    },
    extends: [
        "eslint:recommended",
        "google"
    ],
    parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module"
    },
    rules: {
    }
};

 

저 같은경우는 위에 package.json에 보면 start 스크립트에 eslint도 하라고 넣어놔서 lint로 코드 한번 검사하고 babel로 빌드하고 그 다음에 빌드된 소스 실행을 하게 해놨어요

어떤 사람은 프리티(코딩 스타일 정의하고 코드 맞춰주는 모듈) 모듈까지 붙여서 린트 검사 하는데 저같은 경우에는 요즘 IDE 좋아서 그냥 코드정렬 때리면 알아서 이쁘게 맞춰주기때문에 굳이 프리티 까지 붙이지는 않아요.

저는 vs code를 사용합니다. 예전에 서브라임, 아톰, 웹스톰(유로) 등등 많았는데 ms에서 꽁짜툴에 머 이리 신경을 많이 쓰는지 지금 vs code가 어디다가 내놔도 뒤지지 않을 만큼 좋아요

 

자세한 린트 설정에 관련된 부분은 여기를 참고하세요

룰에 대한 설명도 다 있어요

Configure ESLint - ESLint - Pluggable JavaScript Linter

Configure ESLint - ESLint - Pluggable JavaScript Linter