[JS] eslint & Prettier

ESlint

코드퀄리티를 보장하는 확장프로그램(라이브러리)

개발시, 기능을 구현할때 function을만든다면 키워드를 쓸수도있고 () => {} 화살표함수를 쓸수도있다
또, 배열의 반복문을 돌릴때 for를 쓸수도있지만 forEach,map등 내장함수도 사용할 수도 있다

이런 방식을 일관성있게 바꿔주는것을 eslint가 하는 역할

ESlint Setting

yarn add -D eslint
그 후, vscode extension에서 ESLint를 설치해준다

ESLint가 제대로 설치됐다면 .eslintrc파일을 통해서 rule을 세팅한다.

// eslint docs 예시
{
    "root": true,
    "plugins": [
        "@typescript-eslint"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "rules": {
        "@typescript-eslint/strict-boolean-expressions": [
            2,
            {
                "allowString" : false,
                "allowNumber" : false
            }
        ]
    }
}

root : default(true) 이값이 true가 아니면 eslintrc 파일을 찾을때 해당 프로젝트의 디렉토리 뿐만아니라, 내 PC의 root, 시스템 root 디렉토리까지 eslint파일을 찾는다

plugins

• 1. eslint-config-airbnb-base : 에어비엔비 스타일
• 2. eslint-config-next : Next.js 스타일
• 3. eslint-plugin-react : React 스타일
• 4. eslint-plugin-prettier : Lint위에 쓸 prettier
• 5. eslint-config-prettier : Lint설정과 중복되는 부분이라면 prettier룰에서 제외시켜준다.
• 6. @typescript-eslint/eslint-plugin : TypeScript 스타일
     위의 예시들 말고 더 많으며 사용하고 싶다면 yarn을통해서 설치하면 된다.

parser
각 코드 파일을 검사할 parser를 설정한다. defalut(espree) 특정 플러그인을 사용한다면 해당 플러그인의 parser를 쓰면된다.

extends
eslint rule 설정을 외부 file로 바꾸는 부분
위에 .exlintrc처럼 extends에 플러그인에 쓰이는 file을 적용한다면 해당 플러그인의 기본 rule set이 적용된다.

Prettier

코드 구현 방식을 바꾸는것이아닌 줄바꿈,공백,들여쓰기등 코드 그자체를 일관되게 바꿔주는것.

Prettier Setting

2가지방법

• 1. vscode의 extension으로 설치
• 2. prettier 플러그인을 eslintrc에 세팅

공통점과 차이점

공통점

• 코드 컨벤션을 잡아준다

차이점

• eslint : 코드 퀄리티를 보장 (코드의 구현을 일관성있게 바꾼다)
• prettier : 코드 자체를 수정해 일관성을 유지해준다.

마무리

eslint => 쓰고싶은 플러그인 잘 정해서 팀플할때 맞추는게 좋음
prettier => 무조건쓰자, 가끔 포맷엇나간것도 자동으로 수정시켜준다

참고한곳
eslint & prettier