ESLint로 코드에러를 더 효율적으로 검사하기

뷰나, 리액트를 쓰시는 분이라면 스터디나 프로젝트에서 ESLint 세팅에 대해 들어본 경험이 있을 것이다.

개발을 하면서 자주 설치하게 되는 라이브러리로, 실상은 실무에서 활용하기에는 한계가 있다.

그래도 배우면서 활용하기 좋은 것들을 하나씩 정리하고 싶어 이 글을 쓰게 되었다.

 

 

 

1. ESLint란?

ESLint란 자바스크립트 코드에서 문제가 되는 패턴을 식별하기 위한 코드 분석 도구이다.

 

 

2. 사용방법

2 - 1. 설치 및 활용방법

npm install eslint

설치는 위 명령어를 해도 되지만, 일반적으로 뷰나 리액트를 할 때 일부는 자동으로 설치가 되는 경우도 있다. 그래서 필자는 거의 쓰이는 일은 없었다.

 

 

2 - 2. No Console

개발자에게 console이란 매우 유용하게 쓰이는 코드 중 하나라고 볼 수 있다. 하지만 배포가 된 플랫폼이나 서비스에는 반드시 지우고 가야 하는 콘솔...

하지만 개발할때는 계속 보아야 하는데 이를 해결할 방법이 없을까?라는 생각도 들었는데 방법이 있었다.(하지만 이거를 절대 찾진 않았던 나... 반성한다..)

ESLint에서는 콘솔을 배포 상태에서 숨김을 할 수 있다.

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
	// ...
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		// ...
	},
};

.eslintrc로 시작하는 곳에서 no-console값으로 설정을 할 수 있다.

그리고 우리는 배포 상태에서만 보여주어야 하기 때문에, NODE_ENV가 production일 때에는 에러로 개발자 모드에서 확인할 수 없으며, 우리는 로컬에서 개발 시에는 아무런 문제 없이 이 콘솔을 자유롭게 쓸 수 있다.

 

즉, 콘솔을 매번 지웠다 썼다를 반복하지 않아도 여기서 첨부터 걸러줄 수 있다.

 

 

3. 설정이 바로 되지 않는 경우

그리고 설정을 하다보면 바로 되지 않는 경우가 있다. 그럴 때에는 윈도에서는 Ctrl + , 혹은 맥에서는 커멘트 + , 를 눌러주어서 settings로 들어간다. 그곳에서 validate를 검색한다.

settings에서 workspace에서 ESLint카테고리에서 validate를 찾아볼 수 있다.

Workspace에서 ESLint 카테고리를 눌러보면 해당 validate가 있다. 여기서 Edit in settings.json이라는 것을 클릭해준다.

 

해당 settings.json에 아무것도 없다면 해당 내용을 전체 복사/붙여놓기를 해주면 된다.

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.tabSize": 2
}

그럼 아래처럼 저장을 하면 된다. 물론 다른 내용이 있다면 비교하여 추가하면 된다.

settings.json 설정 파일 이미지

그리고 모든 화면을 닫아준다. 단축키로는 윈도우는 Ctrl + K + W, 맥에서는 커맨드 + K + W다. 물론 일일히 다 가서 새로 저장을 할 수 있다. 하지만 이는 너무 번거로우니 다음과 같은 명령어로 실행을 한다.

npm run lint

이렇게 하면 한번에 lint 검사를 진행할 수 있다.

 

만약 이렇게 해도 일부 저장이 계속 잘 못 될 경우, 다시 settings에 가서 format on save를 검색한다.

settings에서 format on save체크를 해제해야 된다.

여기서 format on save 체크를 해지하면 문제없이 해당 lint 저장이 잘되며, 빨간 에러 줄이 보이지 않게 된다.

 

 

이렇게 오늘은 ESLint를 조금 더 활용도가 있는 방법을 찾아보았다.

이후에는 어떤 재미있는 방법이 있을지, 기회가 되면 공식문서를 한번 쭉 봐야겠다.

 

첫 업데이트 : 23. 01. 21