[vscode] 기본적인 ESLint 사용법

vue 프로젝트 생성 시 eslint를 포함시키면 package.json 파일에 eslint에 대한 설정이 포함된다.

"eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "rules": {
            "no-console": "off"
        },
        "parserOptions": {
            "parser": "babel-eslint"
        }
    },

이때  rules 부분에 global하게 추가하고 싶은 규칙들을 적어주면 yarn lint  명령을 통해서 작성한 javascript가 권장 규칙에 맞는지 확인할 수 있다.

 

예를 들어 위의 no-console:off 부분은 no-console(console을 바로 사용하지 않는다.) validation을 하지 않겠다.(off)는 의미이다.

 

validation의 레벨은 error(==2), warn(==1), off(==0) 3개가 존재한다.

 

사용 가능한 rules 들은 https://eslint.org/docs/rules를 참조한다.

 

자주 사용되는 rule에 대한 예는 다음과 같다.

"no-console": "off",
"no-unused-vars": ["error", { "varsIgnorePattern": "^map" }]

 

주의!!

일단 yarn serve를 통해서 애플리케이션을 실행시킨 상태에서 package.json 파일을 수정하면 실시간 동작이라도  반영되지 않는다. 따라서 애플리케이션을 종료한 후 yarn lint로 소스 확인 후 다시 실행해야 한다.