[Eslint & Prettier 설정] VScode에서 기본 설정을 해보자(추가 오류 보완)

[Eslint & Prettier] Eslint와 Prettier에 대해 알아보자

시작하기 전에 이 글 참고하시길

 

이번엔 Eslint와 Prettier를 설치하고 적용해보겠다.

npm i -D eslint
npm install --save-dev --save-exact prettier

먼저 eslint와 prettier를 설치한다.

--save-dev는 -D와 같은 개발용에서만 사용하는 devDependencies 패키지로 설치하겠다는 의미이고

--save-exact는 ^나 ~를 넣지 않아 업데이트를 허용하지 않고 해당 패키지 버전만 사용이 가능하다는 의미이다

 

VScode의 확장 기능에서 Eslint와 Prettier를 설치받아야 한다.

 

그 다음으로 아래 패키지들을 설치한다

npm i -D eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier는 eslint에서도 제공하는 포맷팅 기능이 prettier의 포맷팅 기능과 겹칠 수 있기 때문에 겹치는 포맷팅 기능을 비활성화해주는 패키지이고

eslint-plugin-prettier는 eslint에 prettier의 포맷팅 기능을 추가해주는 패키지이다.

이 두 패키지를 통해 Eslint와 prettier를 충돌 없이 연동해 사용이 가능하다.

---

 

Eslint 설정

그 다음으로 eslint를 초기화한다.

npx eslint --init

그러면 해당 질문들이 나오는데 원하는 정보를 입력하면 .eslintrc.확장자(본인은 json으로 설정했기 때문에 json으로)가 생성된다.

설정 후 초기 화면

이후엔 원하는 부분을 수정하면 된다.

우리는 eslint-plugin-prettier를 설치했으니까 이걸 설정 파일에 적용해보자

rules에 추가된 부분은 eslint-plugin-prettier를 사용하기위해 추가 해야하는 기능이다.

기본 설정에선 eslint:recommended로 eslint가 추천해주는 기본 설정으로 되어 있는데 각 기업에서 사용하는 eslint 규칙(에어비앤비, 페이스북, 구글 등등)들을 적용할 수도 있다(사용 전 해당 규칙 npm 패키지를 다운로드 받아야 한다.)

[React] ESLint & Prettier 설정 (airbnb style 적용)

airbnb 규칙 사용 예시를 나타내는 게시글이다.

 

또한 .eslintignore파일을 통해 eslint 규칙을 적용하지 않는 파일이나 폴더를 설정할 수 있다.

이는 gitignore와 동일한 양식으로 보인다(뭐 그냥 경로만 표시하는거니까)

 

 

Prettier 설정

다음으로 prettier 설정이다

우선 .prettierre.json을 생성한다.

이렇게 생성을 하고 포맷팅 룰을 설정하면 된다.

포맷팅룰은 prettier 사이트의 playground에서 커스터마이징이 가능하다.

Prettier

사이트에 접속했을 때 보이는 설정이 기본 설정이다

좌측 하단에 copy config JSON 버튼을 누르면 설정을 JSON형태로 받을 수 있다

또한 prettier도 .prettierignore를 통해 prettier를 적용받지 않는 파일이나 폴더를 설정할 수 있다.

 

그리고 vscode의 경우 확장 기능에서 eslint, prettier를 설치한다

 

이후 ctrl+shift+p를 누르고 검색창에 settings를 입력해 preferences:Open Workspace Settings (JSON)을 클릭한다

곰돌이 있는 부분

그렇게 나오는 파일에서 다음과 같이 입력한다

{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true 
    }
}

이 코드는 vscode 설정으로 저장할 때 eslint와 prettier 규칙에 따라 수정한다는 의미로

"editor.formatOnSave는 저장할 때 css나 js, html 파일이 포맷팅 된다는 의미이고

두번째는 저장될 때 eslint  규칙에 따라 수정된다는 의미이다. 

 

---

 

작동 확인 및 추가 오류 수정

잘 작동되는지 확인해보자

세미콜론이나 이런 부분을 아예 안하고 엄청 더럽게 대충 짜봤다.

eslint rull에 의해 여러 에러 체크가 있는 걸 볼 수 있다.

이걸 저장버튼을 누르면?

이렇게 자동으로 수정된다. 그런데 이렇게 포맷팅이 되도 빨간줄이 있다.

이런 오류라고 한다.

eslint에서 발생하는 오류이기 때문에 무시하고 사용해도 되지만 눈에 거슬리기 때문에 eslintrc파일을 조금 손봐준다.

"rules": {
        "prettier/prettier": [
            "error",
            {
                "endOfLine": "auto"
            }
        ]
    }

rules부분을 다음과 같이 수정한다.

그러면 오른쪽과 같이 에러가 사라진다.

이렇게 eslint와 prettier 기본 설정이 끝났다!

%%이 게시글은 eslint나 prettier를 설정할 때 JSON을 사용했음%%

%%JS와 혼동하지 말것%%