0. ESLint가 뭔가요?
먼저 단어를 뜯어보죠.
ESLint는 EcmaScript + Lint가 합쳐진 합성어로, Lint는 오래된 스웨터에 있는 보푸라기 같은 것이라고 합니다.
보푸라기가 많으면 옷이 보기 좋지 않은 것처럼, 코드에서도 이런 보푸라기가 있다면 보기 안 좋겠죠?
ex) 무분별한 들여쓰기, 변수 미사용, 중복 선언... 등등
ESLint는 이러한 보푸라기들을 잡아내는 도구라고 생각해볼 수 있겠네요.
이번에는 ESLint 홈페이지에서의 소개를 살펴보죠.
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
요약하자면, ESLint는 'JavaScript 코드가 특정 패턴을 따르도록 도와주는 도구' 라고 요약해볼 수 있겠네요. 이 경우 패턴이란 코드 스타일 / 코딩 컨벤션을 말합니다.
Airbnb Style Guide나 Google style Guide가 대표적인 예시가 될 수 있겠습니다.
1. ESLint가 왜 필요하죠?
JavaScript는 동적(또는 느슨한) 타입 언어이기 때문에, 코드를 실행시켜야만 발견할 수 있는 오류들이 많습니다.
이 때 ESLint는 코드를 작성하는 시점에서부터 '일어날 법한' 오류들을 가시화하여, 개발자가 보다 깔끔하고 정확한 코드를 짤 수 있게 도와줍니다. 예시를 한 번 들어보죠.
BEFORE
JavaScript에서는 const는 재선언 / 재할당이 불가능한데, 에디터 상에서 아무런 오류도 감지되지 않는다는 걸 보실 수 있습니다. 저게 잘못된 코드라는 건 해당 파일을 실행할 때가 되어서야 확인할 수 있는데, 코드가 길어지면 이런 종류의 실수가 많이 생기겠죠?
AFTER
ESLint를 적용했을 땐, 코드를 작성하고 있는 시점에서 이미 오류가 무엇인지 무시무시한 빨간 줄로 알려줍니다.
우리가 코딩할 때 실수를 범할 가능성을 확실히 낮춰주죠.
자, 그럼 이제 ESLint를 적용시켜볼까요?
2. ESLint 적용
(VSCode를 쓴다고 가정합니다)
ESLint확장 프로그램을 설치하기 전에, 우선 npm으로 module을 전역 설치해주셔야 합니다.
npm install -g eslint전역 설치가 끝났다면, VSCode에서 ESLint 확장 프로그램을 설치해줍니다.
확장 프로그램 설치가 끝났다면, ESLint를 적용하고 싶은 프로젝트로 이동한 후, 터미널 창에서
eslint --lint를 실행해줍니다. 그러면 터미널에서 몇 가지 질문을 던집니다.
첫 번째 질문
어떤 프레임워크를 쓰느지, 실행 환경은 브라우저인지 NodeJS인지 등의 선택지를 하나하나 내려가다보면 .eslintrc.json이라는 설정파일이 생길 겁니다!
// .eslintrc.json
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 12
},
"rules": {
}
}
// 이때 eslint 설정 파일은 .json이어도 좋고, .js 파일이어도 좋습니다! 여러분의 취향에 맞게 선택하시면 됩니다.
// .js 파일일 경우, 전체 객채를 module.exports에 넣어주시면 됩니다. 저는 프레임워크를 생략하고, commonjs라는 옵션과 browser 환경을 선택했습니다.
해당 파일의 rules 프로퍼티 안에 우리가 원하는 규칙을 정의해주면 됩니다.
제가 nodejs 프로젝트에서 사용하는 eslint 설정은 다음과 같습니다.
module.exports = {
env: {
node: true,
commonjs: true,
es2021: true,
},
extends: ['eslint:recommended', 'eslint-config-prettier'],
parserOptions: {
ecmaVersion: 12,
},
rules: {
'no-prototype-builtins': 'off',
'no-self-assign': 'off',
'no-empty': 'off',
'no-case-declarations': 'off',
'consistent-return': 'off',
'arrow-body-style': 'off',
camelcase: 'off',
quotes: 'off',
'no-unused-vars': 'off',
'comma-dangle': 'off',
'no-bitwise': 'off',
'no-use-before-define': 'off',
'no-extra-boolean-cast': 'off',
'no-empty-pattern': 'off',
curly: 'off',
'no-unreachable': 'off',
},
};
파일을 잘 살펴보시면,
rules안에 있는 대부분의 규칙이'off'라는 값을 갖고 있는 걸 보실 수 있습니다.
ESLint를 설정하면 기본적으로 켜져 있는 규칙들이 꽤 많은데, 기본 규칙들이 꽤 엄격해서 규칙들을 전혀 건드리지 않은 상태로 작업을 시작하면 코드를 짜는 데 오히려 방해되는 경우가 있습니다. (무슨 얘기인지는 설정 값을 전혀 건드리지 않은 채로 코딩해보시면 이해하실 수 있습니다. 가령const나let이 이미 '예약된' 단어라는 에러가 뜨면서 파일을 실행할 수 없게 됩니다.)
그래서 실제로 프로젝트를 진행하다보면, 오히려 규칙을 키는 것보단 규칙을 끄는 방향으로eslint를 설정하고 있는 자신을 발견하실 수 있을 겁니다(...)
다음 포스트에서는 eslint 기본 설정에서 나아가 플러그인을 다루는 법에 대해 알아보겠습니다 🤗
출처
