ESLint 처음 적용해본 기록

도구
파워셸 administrator, VSCode

 

준비
ESLint에 대해 오픈챗방을 통해 올해 처음 알게 되었다. JS상의 불필요한 오류같은것 잡아주고 코드 스타일을 정리해주는 도구로 이해했다. JS스터디에서 다른 분들 사용하시는걸 보고 써보고 싶다고 생각은 했다.
VSCode에서 JS 도구 추천을 해줘서 깔았더니 ESLint였다. 곧 시작할 JS스터디를 생각하며 이번엔 써보기로 결심했다.
인터넷 보면서 따라하는데 묘하게 다들 달라서 스탠다드가 뭔지는 모르겠지만 일단 걍 함.

 

시작!

1. VSCode에서 npm install -g eslint 함.
2. eslint --init이 안먹혀서 파워셸admin으로 넘어가서 시도함.
3. eslint 명령어에 대해 cannot be loaded.. .. is not digitally signed라고 뜸.
4. 검색을 통해 Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted를 한번 실행, Yes해봄.
5. eslint --init 됨. 열심히 설정했더니 package.json을 먼저 설정했어야 했음. (사실 이거 보기만 했고 뭔지 정확히 모르지만 하라는대로 함.)
6. npm init

일단 이렇게 해봄

 

7. eslint --init 해봄. 됨. Successfully created .eslintrc.js 라는 메세지 득!

 

파일 안에서 룰을 쪼금 더 빡쎄게 수정해봤다. 여기 참고.

module.exports = {
    "env": {
        "browser": true,
        "es2020": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "semi": [2, "never"],
        "no-console": "error",
        "no-trailing-spaces": 1,
        "keyword-spacing": 1,
        "no-unused-vars": 1,
        "no-multiple-empty-lines": 1,
        "space-before-function-paren": 0,
        "eol-last": 1
    }
};

 

8. VSCode로 넘어가서 인터넷을 따라하며 ignore 파일을 만들었다.  .gitignore과  .eslintignore에  node_modules/ 를 작성.
9. 제로초님 블로그의 테스트코드를 참고해서 테스트해봤다. eslint test.js

function add ( a,      b ) {
        if ( b) { b = 5;    
    }
return a +b;;;
}

오오 이런게 뜬다! 신기하다.

그래서 하란대로 픽스를 해봤다. eslint test.js --fix
그랬떠니!

function add ( a,      b ) {
    if ( b) { b = 5
    }
    return a +b
}

되다만듯.. 묘하다.. 룰 설정이 더 필요해보인다. ^^;
일단 오늘은 여기까지 한다!