eslint와 prettier의 차이점
그리고 intelliJ를 곁들인
코드를 짤때는 효율을 높이는 것이 중요하다
코드를 짜다보면 사소한 것에 시간 뺏기는게 아까워진다. 예를 들면,
const shoes = { '구두', '부츠' }
const shoes = {'구두', '부츠'}
이렇게 변수를 정의할때, { } 중 괄호 양 옆으로 한칸을 더 줄지 말지 전체적으로 통일하고 싶어진다. 별거 아닌데 그러고 싶어진다. 그래서 이걸 통일하겠다고 한땀 한땀 띄어쓰기를 하고 있다가, 그러고 있는 내 자신을 보면 뭐하는짓이지 현타가 온다. 시간도 너무 아깝다.
같이 일하는 동료가 있으면 이 현상은 더 심해진다. 내 옆에 있는 동료는 함수를 정의할때 function 문법으로 하는 반면, 나는 화살표 함수를 사용한다. 둘다 에러없이 동작하지만, 가독성 측면에서는 좋지 않다. 이건 왜 여기서 이렇게 했어? 물어보는 시간 비용도 발생한다.
function getShoes() { }
const getShoes() => {}
그래서 코드 컨벤션이라는 것을 도입하기로 한다. javascript 에서 제일 유명한 것은 airbnb의 코드 컨벤션이다. airbnb 공식 도큐먼트 깃헙에 가보면, 여러 규칙들을 정의해놓은 것을 볼 수 있다. (코드 컨벤션: 이러케 이러케 이런 규칙으로 코드 짜자, 라고 약속한 것)
** 예시 ) 모든 참조는 const 를 사용하고, var 를 사용하지 마십시오.
** 왜? 참조를 재할당 할 수 없으므로, 버그로 이어지고 이해하기 어려운 코드가 되는것을 방지합니다.
// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2;
그런데 사람은 항상 실수를 하게 마련이다. '우리도 airbnb 스타일대로 코드를 잘 짜보자', 라고 다짐해도 자기 습관대로 코드를 짜게 된다. 그러다보면 에러가 발생하기도 하고 전체적인 코드 가독성이 떨어져서 유지보수하기 어려운 코드가 된다.
자동으로 좀 알아서 고쳐주면 안되나?
이런 니즈가 자연스레 생기기 마련이다. 내가 개떡같이 짜도 찰떡같이 짜잔, 수정해줄 그런 마법지팡이같은 것을...
그래서 구글링을 한다. 검색하다 보니 eslint와 prettier를 사용하라는 얘기가 많다. 두개를 모두 도입하게 된다. vscode에 익스텐션도 깐다. 어찌어찌 세팅을 해서 쓴다. 근데 에러가 난다. 혹은 원하는대로 변경이 안된다. ctrl+S를 누르면 자동으로 고쳐지면 좋겠는데 그것도 잘 안된다. 왜 안되는지 모르겠다. config에 설정해줘야 할 것도 많은데 뭐가 무슨 설정인지 모르겠다.......� 슬픈 내 얘기다...오늘의 포스팅을 쓰게된 배경이다 ㅋ
eslint와 prettier, 두개의 차이점부터 분명히 알기
내 문제는 eslint와 prettier의 차이점에 대해 정확히 몰랐다는 점이다. 수많은 구글링 결과 두개의 차이를 간략히 설명하자면 'eslint는 빨간펜 선생님, prettier는 스타일코디' 이다.
eslint
더 자세히 들여다보자. lint란, 아래와 같은 정의를 가지고 있다. lint는 틀린 규칙이나 오류를 발생시킬 것으로 추정되는, 규칙에 어긋나는 것들을 체크해서 잡아준다. 그 중 ESLint는 JavaScript, JSX의 규칙을 분석해주는 도구이다. 위에서 예시로 이야기한 airbnb 스타일로 규칙을 정하면, 그것에 맞게 틀린 것을 자동으로 찾아주고 적절한 명령어를 입력하면 자동으로 고쳐준다.
린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다. 이 용어는 C 언어 소스 코드를 검사하는 유닉스 유틸리티에서 기원한다.
여기서 중요한건, eslint는 그저 껍데기(툴)라는 사실이다. 수많은 블로그들 문서를 볼때 vscode에 eslint 익스텐션을 깔고, npm으로 eslint 를 설치하고 하는 것들은 결국 껍데기를 설치하는 거다. 자동으로 고쳐주는 껍데기(툴)를 일단 깔았으니 '어떤 규칙으로 고치게끔 할래?' 는 사용자가 직접 설정해야 한다. 카세트 플레이어에 카세트 테이프를 넣지 않으면 아무 음악도 나오지 않는 것처럼, 껍데기 안에 '알맹이'를 넣지 않으면 아무 일도 일어나지 않는다. 그 알맹이는 사용자가 설정하기 나름이다.
알맹이를 설정해주는 파일이 .eslintrc.js 이다. 말 그대로 내 입맛에 맞춰서 설정할 수 있다. 'extends' 에 기본적으로 무슨 규칙을 따를 것인지 설정할 수 있다.
module.exports = {
extends: "eslint:recommended",
rules: {
"no-extra-semi": "error",
},
};
eslint:recommended 라는 알맹이를 넣으면, eslint에서 기본적으로 정해놓은 규칙대로 코드를 검사해준다. (https://eslint.org/docs/latest/rules/ 여기 공식 문서를 보면, 여기서 체크표시된 부분을 검사해준다고 보면 된다)
다른 알맹이를 넣을 수도 있다. airbnb 에서 정해놓은 규칙을 따르고 싶으면 그렇게 설정하면 된다.
{
"extends": ["airbnb"]
}
정해진 알맹이는 없다. 내가 혹은 팀이 원하는 스타일이 무엇일지 논의해서 결정하면 된다. 이때 필요한건 구글링ㅋ eslint extends code style 이라고 검색하면 수많은 검색결과를 살펴볼 수 있다. 공식 문서들을 보면서 결정해도 좋고 사람들이 많이 쓰는걸로 써도 무방하다. 각 플러그인들의 자세한 적용 방법은 구글 서치를 해보자 ㅋ 또 rules에서 디테일한 설정이 가능하니까, 기본적으로 규칙을 정해놓고, 거기서 필요 없는 기능은 꺼도 된다. 예를 들면 이렇게 설정할 수 있다. 자세한 설정 방법 또한 구글링으로 공식 문서를 확인해보자.
module.exports = {
extends: "airbnb-base",
rules: {
'no-console': 'off',
'no-debugger': 'off',
},
};
prettier
prettier는 말 그대로 코드를 '예쁘게 만들어주는' 설정을 할 수 있는 도구이다. 아래와 같은 설정들을 할 수 있다.
쌍따옴표(""), 작은따옴표('') 둘중에 뭘로 통일 할래?
한줄 끝날때 세미콜론(;) 붙일까 말까?
화살표 함수일때 인자 부분을 괄호로 감쌀까 말까?
들여쓰기할때 2칸할까 4칸할까?
eslint 랑 같이 쓸때, eslint-config-prettier를 별도로 설치해야 하는데, 이는 중복해서 체크하는 부분이 충돌이 나기 때문에 이 부분을 해결하기 위한 플러그인을 따로 설치해야 한다.
근데 왜 굳이 eslint랑 prettier를 같이 쓰라고 할까?
개인적으로는 최근 프로젝트를 진행할 때 eslint만 사용해도 가독성에 문제가 없었다. prettier를 사용하면 더 디테일하게 설정이 가능하겠지만 들여쓰기나 따옴표 등기본적인 것은 eslint에서 설정한 스타일 가이드에서 제공해주는 것만으로도 충분했다. 오히려 충돌 방지를 위해 eslint-config-prettier를 설치하는게 번거로웠다. vscode 에 익스텐션을 여러개 깔아서 관리하는 것도 내가 필요한 것보다 이상의 불필요한 것을 하는 느낌이었다.
아마도 개인적인 생각으로는 많은 사람들이 협업하는 큰 규모의 프로젝트에서 스타일을 디테일하게 맞추는 것이 중요할 때는 prettier를 함께 사용하는 것이 좋을 것 같다. 그 외 소규모이거나 개인 프로젝트일 때는 eslint 만으로도 충분하다고 생각된다.
intelliJ를 쓰니 eslint도 안쓰게 된 썰
계속 vscode를 쓰다가 요즘 intelliJ로 갈아탈 준비를 하고 있다. 왜냐면 vscode에서 일일이 익스텐션을 설치해야만 됐던 기능들이 intelliJ에서는 자동으로 알아서 해주는 것이 많아서 편하기 때문다. 자동 import를 하거나, import한 컴포넌트에 바로 접근하는 거나 단축어로 코드 자동완성 해주는 것, 그리고 intelliJ 자체적으로 코드컨벤션을 설정해서 특정 명령어로 코드 포매팅까지 가능하다! 같이 협업하는 프로젝트도 intelliJ에서 코드컨벤션을 통일해서 업로드해서 사용하니 따로 eslint를 사용하지 않아도 되었다.
intelliJ에서 코드컨벤션 설정하는 방법은 다른 포스팅에서 더 자세하게 다루어야겠다 ㅋ
** 개인적으로 공부한 것을 올리는 블로그입니다. 틀린 내용이 있다면 피드백 언제든지 환영합니다 :)
