0. 서론
이번에 노션 클로닝 과제를 진행하며 코멘트가 70개나 달린 창욱님의 PR 을 보다가 깜짝 놀랐다. 사소한 프로젝트라고 생각했는데 eslint 와 prittier 세팅을 해놓으셨다.
그간 eslint 와 prettier 를 현업에서 사용하고 코드의 일관성을 위해 사용한다는 것만 알았지, 정확히 어떻게 사용하는 것인지 몰랐기에 이 참에 공부를 해야겠다고 생각했다.
금요일마다 아티클도 쓰겠다, 마침 배우고 싶은 것도 있겠다. 냉큼 창욱님께 창욱님을 아티클에 넣어도 되냐는 디엠을 드리고 허락을 구했다. 우선 오늘은 ESLint 에 대해 알아보자.
1. ESLint 정의
1. What is Eslint?
Find and fix problems in your JavaScript code!
(여러분의 JS 코드에서 문제를 찾고 수정해보세요!)
구글에 ‘What is eslint’ 라고 치면 나오는 ESLint 공식 사이트에선 위와 같이 말하고 있다. 그렇다면 ESLint가 정확히 어떤 일을 하는 걸까?
2. 오류 찾기
ESLint 는 코드에서 잠재적인 오류나 부적절한 코드를 찾아준다.
C언어 를 배우면서 Visual Studio 를 사용했는데 그 땐 int 형식에 다른 형식이 들어가면 빨간 밑줄을 띄워줬던 것이 생각난다.
이렇게 해도 실행 시에는 에러가 나는데 JS 로 실습을 하다보면 보면 에러가 출력이 아예 되지 않는 경우도 있고, 실행하기 전까지는 코드가 어떻게 잘못됐는지 알 수 없어서 불편했던 경험이 있을 것이다.
ESLint 는 코드를 실행하지 않고도 변수가 사용되지 않은 경우, 잘못된 문법을 사용한 경우 등, 코드에 문제가 있어보이면 오류가 났다고 알려준다.
3. 코드 일관성 유지
ESLint 는 정의된 스타일 가이드를 따르게 해 코드의 일관성을 높인다.
협업을 하다보면 각자의 코드 스타일이 있을 것이다. 다만… 이 코드 스타일이 서로 일관되면 모르겠는데 사소하게 띄어쓰기를 안 한다든가 하면 신경이 쓰이기 마련이다.
이렇게 사내에서 시빌워가 발생하지 않도록 ESLint 는 프로젝트 내에서 코딩 스타일을 정의하여, 들여쓰기, 따옴표 등의 스타일을 일관성 있게 유지한다. (참고로 나는 아이언맨 쪽이다. MIT 공대를 졸업한 사람의 코드 스타일을 따르는 게 맞다.)
2. ESLint 사용방법
2-1. ESLint 설치
-
개인 프로젝트에 종속된 ESLint 를 설치한다.
해당 명령어를 실행하면 해당 프로젝트 파일에 종속적으로 ESLint 가 설치되어
pacakage.json파일이 생성된다.$npm install --save-dev eslint -
ESLint 의 설정파일을 생성 & 다운로드 한다.
$npm init @eslint/config해당 명령어를 실행하면 ESLint 를 어떤 용도로 쓰고 싶은지, 모듈을 어떤식으로 import 하는지, 라이브러리나 프레임 워크는 뭘 쓰는지 묻는데 프로젝트에 따라 필요한 걸 선택해 쓰자.
필요한 세팅을 마치고 나면 eslintrc 라는 파일이 생성되어 아래와 같이 초기화 된 형태로 나타난다.
{ "env": { "browser": true, "es2021": true, "node": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }, "rules": {} } -
ESLint 를 실행한다.
$npx eslint (파일 이름) -
간단히 사용해보자.
어떤 것을 도와주는지 감을 잡기 위해 ESLint 를 사용하여 코드를 작성해보았다. 아래와 같이 ESLint 의 추천 스타일에선 선언해놓고 사용하지 않는 변수는 오류로 처리한다.
// eslint const hello = 'ERROR'; // none eslint const hello = 'NONE ERROR';
2-2. ESLint 옵션
1. 파일 이름
기본적으로 파일의 이름은 항상 .eslintrc 가 돼야 한다. 여기다 여러 확장자를 추가로 붙일 수 있다.
- .eslintrc.json
- .eslintrc.js
- eslintrc.yaml
등등…
2. env
JS 는 다양한 런타임 환경, 확장 프로그램을 가지고 있다. ESLint 는 프로젝트에 사용하는 다양한 JS 실행 환경을 지정한다.
{
"env": {
"browser": true, // 브라우저 환경으로 설정한다.
"es2021": true // ECMAScript2021 에 맞는 파서를 사용한다.
}
}3. extends
다른 ESLint 파일을 참조하여 구성을 확장할 수 있다. 공식 규칙이나 다른 곳에서 공개해놓은 규칙을 가져다 쓸 수 있다. 이 경우 npm 을 통해 extends 패키지를 다운받아야 한다.
- 기본 ESLint 권장 규칙
{ "extends": "eslint:recommended" }
airbnb 와 google 스타일이 많이 쓰인다.
- airbnb Style Guide
$npm i eslint-config-airbnb-base{ "extends": "airbnb" } - google Style Guide
$npm install --save-dev eslint eslint-config-google
ESLint 의 권장 규칙과 google 스타일을 함께 적용하기 위해선 다음과 같이 쓰면 된다.{ "extends": "google" }{ "extends": ["eslint:recommended", "google"] }
4. rules
개별적인 규칙을 세세하게 설정할 수 있다. extends 에서 설정된 규칙을 덮어 씌우고 싶을때 사용한다.
아래는 init 으로 ESLint 파일을 처음 다운 받았을 때 볼 수 있는 규칙이다.
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}semi 와 quotes ESLint rules 의 프로퍼티들이다. 첫번 째 값은 오류의 정도를 나타낸다.
official documents
"off"or0- turn the rule off (끔)"warn"or1- turn the rule on as a warning (doesn’t affect exit code) (경고)"error"or2- turn the rule on as an error (exit code will be 1) (오류)
5. plugins
ESLint 에서 추가적인 기능을 더 넣기 위해 사용한다. 기본적으로 제공되는 규칙 외에 추가적인 규칙을 더해준다. 아래는 import, react 와 관련된 플러그인을 추가한 형태다.
{
"plugins": ["import", "react"]
}플러그인을 사용하려면 설치를 한 후에 사용해야 한다.
$npm i -D eslint-plugin-import eslint-plugin-react6. parserOptions
JavaScript 구문 분석기 옵션을 설정한다.
{
"parserOptions": {
"ecmaVersion": 2021
}
}parserOptions: {
sourceType: 'module', // ESM import 구문을 사용한다.
},7. root
ESLint 는 현재 폴더에 설정 파일이 존재하는지 확인하고 상위 폴더로 올라가서 설정파일을 찾는다. 이때 root 설정을 true 로 지정해주면 상위 폴더로 올라가지 않는다.
{
"root": true
}{
"root": false
}3. 마치면서
그간 궁금했던 ESLint 가 조금 더 가까워진 느낌이든다. 더불어 ESLint 는 처음엔 공유된 스타일을 가져다 쓰다가 필요하거나 불편한 점이 있으면 그때그때 수정해서 쓰면 된다는 멘토님의 조언덕에 마음이 편해졌다.
하지만 여전히 잘 모르는 기술을 마구 가져다 쓰다가 코드가 영향을 받으면 어쩌나 하는 걱정이 된다. 이 걱정을 없애기 위해 다음 프로젝트는 ESLint 를 사용해서 진행해보고, ESLint 와 친해져볼 예정이다.
