lint
lint란 옷의 보풀같은 것들을 말합니다. 이러한 보풀이 많으면 보기 좋지 않은데 우리 코드에서도 이러한 보풀이 있습니다.
보풀이 있다고 해서 어플리케이션이 동작하지 않는 것은 아닙니다. 하지만 코드의 가독성이 떨어지고 유지보수하기에도 어려워집니다.
보풀을 제거하는 린트 롤러처럼 코드의 오류나 버그, 스타일을 점겅하는 것을 린트 혹은 린터라고 합니다.
린트가 필요한 상황
console.log()
(function () {})()위 코드는 문제 없어 보이지만 직접 실행을 하면 에러가 발생합니다.
브라우저는 위 코드를 아래와 같이 해석합니다.
console.log()(function() {})()console.log()의 반환값인 undefined로 즉시 실행 함수를 실행하고 있기 때문에 에러가 발생하게 됩니다. 즉, 세미콜론을 브라우저가 자동 세미콜론 삽입으로 해석하여 다음과 같은 에러가 발생하게 되었습니다.
이러한 코드는 코딩 도중에 찾기 어렵고 코드가 브라우저에서 실행되는 런타임에 발생하게 됩니다. 이러한 에러를 사전에 찾기 위해서 린트를 사용합니다.
ESLint
ESlint는 코드에서 문제점을 검사하고 더 나은 코드로 정정하는 링트 도구중 하나입니다. 코드의 가독성을 높여주고 잠재적인 에러를 제거하기 위해서 사용합니다.
코드를 검사하는 항목을 크게 분류하는 두 가지가 있습니다.
-
"포맷팅"
-
"코드 품질"
포맷팅은 코드를 일관적인 스타일로 유지하여 쉽게 읽히는 코드를 만들어 줍니다. 예를 들어, 들여쓰기, 코드 한 줄 길이 제한 등이 있습니다.
코드 품질은 위에서 살펴본 코드처럼 코드가 잠재적인 문제를 갖고 있는지 확인을 해주는 것을 말합니다. 예를 들어, 사용하지 않는 변수, 전역 스코프 함부로 다루지 않기 등 오류 발생 확률을 줄여줍니다.
설치와 사용법
먼저 ESLint를 설치하기 위해서 터미널에 아래 명령을 입력합니다.
npm install eslint
그리고 ESLint를 실행하기 위해서는 아래 명령어를 입력합니다.
npx eslint <filename>
하지만 실행을 하면 에러가 발생합니다. ESLint를 실행하기 위해서는 "설정 파일"이 필요합니다.
설정 파일 이름은 .eslintrc.js를 사용합니다. ESLint는 설정 파일인 .eslintrc.js를 읽어 실행합니다.
// .eslintrc.js
module.exports = {}위 코드처럼 빈 객체를 작성하고 실행하게 되면 에러는 발생하지 않지만 아무런 결과물도 출력되지 않습니다.
규칙(Rules)
ESLint는 코드 검사 규칙을 미리 정해놓고 있습니다. 우리는 설정 파일에 규칙을 작성해야만 코드를 검사할 수 있습니다.
규칙은 Rules에서 확인할 수 있습니다.
규칙 중 "no-unexpected-multiline"을 설정 파일에 추가해보겠습니다.
// .eslintc.js
module.exports = {
rules: {
"no-unexpected-multiline": "error"
}
}rules 객체에 "no-unexpected-multiline"을 프로퍼티 키로 작성하고 값으로 "error"를 작성하여 규칙을 추가함으로서 ESLint가 설정 파일(.eslintrc.js)의 rules를 보고 작성한 규칙에 어긋난다면 이래처럼 오류를 반환하게 됩니다.
이번에는 console.log()뒤에 세미콜론을 여러 번 작성해보겠습니다. 해당 코드는 실행하는 데 문제가 되지는 않지만 일반적이지 않습니다. 이러한 것 또한 "no-extra-semi"라는 규칙으로 검사할 수 있습니다.
// .eslintc.js
module.exports = {
rules: {
"no-unexpected-multiline": "error",
"no-extra-semi": "error"
}
}다시 실행하면 불필요한 세미콜론을 찾아 에러를 발생시킵니다. 그리고 에러 메세지에서 이것은 잠재적으로 고칠 수 있는 것(potentially fixable)하다고 말하고 있으며, 이는 --fix 옵션을 사용하여 자동적으로 코드 수정을 도와줄 수 있다고 말하고 있습니다.
--fix 옵션을 추가하여 검사해보겠습니다.
npx eslint app.js --fix
검사와 동시에 불필요한 세미콜론이 자동적으로 제거되는 것을 확인할 수 있습니다.
이렇게 ESLint에는 "자동적으로 수정 가능한 규칙"들이 존재합니다. Rules 문서에 랜치(스페너) 표시가 되어 있는 것들이 그러한 규칙입니다.
Extensible Config
필요한 규칙을 일일히 설정하는 것보다는 규칙들을 하나의 세트로 만들어 놓은 것이 있는데 이를 "Extensible Config"라고 합니다.
ESLint가 기본적으로 사용하는 것이 eslint:recommended 설정입니다. Extensible Config는 .eslintrc.js 파일에서 extends 배열에 추가해줍니다.
// .eslintc.js
module.exports = {
extends: [
"eslint:recommended"
]
}eslint:recommended는 Rule 문서에 체크 표시가 되어 있는 규칙들을 포함하고 있습니다.
앞에서 살펴본 no-unexpected-multiline과 no-extra-semi 규칙들은 모두 eslint:recommended 설정에 포함되어 있습니다.
초기화
사실 ESLint 설정 파일인 .eslintrc.js를 직접 작성하기보다는 --init옵션을 통해서 쉽게 구성할 수 있습니다.
npx eslint --init
명령어를 입력하면 세 가지 선택지가 주어집니다. 첫 번째는 문법만 체크, 즉 포맷팅만 검사할 것인지, 두 번째는 포맷팅과 코드 품질도 검사할 것인지, 세 번째는 포맷팅, 코드 품질을 포함해서 코딩 스타일까지 검사할 것인지 선택하여 자동적으로 .eslintrc.js 파일을 만들 수 있습니다.
다음으로 프로젝트에서 사용할 모듈을 선택할 수 있습니다.
다음으로는 프로젝트의 프레임워크를 선택하고
다음으로는 타입스크팁트의 사용 유무를 선택해줍니다.
그리고 코드가 노드에서 실행되는지 브라우저에서 실행되는지 선택합니다.
다음으로는 설정 파일의 포맷을 선택합니다.
마지막으로는 ESlint의 최신 버전을 설치할지 여부를 선택합니다.
그러면 프로젝트에 ESLint 설정 파일인 .eslintrc.js가 생성된 것을 확인할 수 있습니다.
scripts 명령어 추가
webpack.config.js 파일의 scripts에 eslint를 실행할 수 있도록 자동화 명령어를 추가해보도록 하겠습니다.
위 그림처럼 lint라는 명령어를 추가하고, 값으로 eslint src --fix를 작성합니다. eslint를 실행할 때 src 폴더에 있는 모든 파일을 대상으로 실행을 하며, --fix 옵션을 통해 자동적으로 수정이 가능한 것은 수정하도록 옵션을 지정했습니다.
이후에는 eslint를 실행하기 위해서 npm run lint를 입력하여 실행합니다.
