서론
싸피에서 마지막 프로젝트를 하면서 ESLint/Prettier를 사용하여 코딩 컨벤션을 아주 쉽게 지킬 수 있었다. (ESLint/Prettier를 알게해준 예림 감사)
세이브만 하면 자동으로 스타일을 맞춰주니까 개발에만 온전히 집중할 수 있었다.
그래서 ESLint/Prettier가 무엇인지 어떻게 바로 코드를 고쳐줄 수 있었는지를 정리해보면서 공부하려한다.
ESLint
ESLint는 ECMAScript / JavaScript 코드에서 발견 된 패턴을 식별하고보고하는 도구입니다. 여러면에서 JSLint 및 JSHint와 비슷하지만 몇 가지 예외가 있습니다.
이렇게 npm페이지에 설명이 되어있다.
즉,JavaScript를 쓰면서 코드 품질을 검사해 오류나 버그를 예방해주고 포맷팅을 통해 코드 스타일을 맞춰준다.
사용법
npm install eslint --save설치를 해준 뒤
eslint --init을 실행시키면 .eslintrc파일이 생성된다. ESLint의 컨피그 파일인데 여기서 커스터 마이징을 해줄 수 있다. 이것은 자세한 사용방법은 밑에 플젝때 사용한 코드를 보면서 설명하겠다.
Prettier
Prettier는 독보적 인 코드 포맷터입니다. 코드를 구문 분석하고 최대 줄 길이를 고려하여 필요한 경우 코드를 래핑하는 자체 규칙으로 다시 인쇄하여 일관된 스타일을 적용합니다.
Prettier는 에디터 에서 저장시, 커밋 전 후크 또는 CI 환경 에서 실행하여 개발자가 코드 리뷰에 대한 간단한 댓글을 다시 게시 할 필요없이 코드베이스가 일관된 스타일을 갖도록 할 수 있습니다!
라고 npm에 적혀있다.
Prettier는 코드를 잘 다듬어 주는 역할을 한다.
foo ( reallyLongArg ( ) , omgSoManyParameters ( ) , IShouldRefactorThis ( ) , isThereSeriouslyAnotherOne ( ) ) ;이런 코드를
foo (
reallyLongArg ( ) ,
omgSoManyParameters ( ) ,
IShouldRefactorThis ( ) ,
isThereSeriouslyAnotherOne ( )
) ;이렇게 바꿔주는 등 코드를 이쁘게 다듬어서 규칙을 맞추고 가독성을 좋게한다
ESLint/Prettier 사용 예
실제 프로젝트에서 사용한 예를 가지고 사용방법을 정리해봤다.
우리조는 ESLint/Prettier 같이 사용했기때문에 설치방법이 위와 조금 달랐다.
ESLint/Prettier 설치 방법
# Prettier와 ESLint를 연결
npm i prettier eslint-config-prettier eslint-plugin-prettier -Deslint-config-prettier 사용법
eslint-config-prettier는 eslint와 prettier의 규칙이 충돌할 경우 prettier의 규칙을 적용하는 역할이다.
extends에 추가해줘야한다.
// .eslintrc.js
{
extends: [
"eslint-config-prettier"
]
}eslint-plugin-prettier 사용법
eslint-plugin-prettier는 prettier 규칙을 eslint로 추가하는 역할이다.
두가지를 합치면 prettier의 규칙을 가진 eslint가 실행이 되는거다.
plugins과 rules를 추가해줘야한다.
// .eslintrc.js
{
plugins: [
"prettier"
],
rules: {
"prettier/prettier": "error"
},
}.eslintrc 코드
그리고 아래는 우리조가 썼던 코드이다
# .eslintrc.json에 작성
{
"extends": ["react-app","plugin:prettier/recommended","prettier"],
"plugins": ["prettier"],
"env": {
"browser": true,
"jest": true
},
"ignorePatterns": ["node_modules/"],
"settings": {
"import/resolver": {
"node": {
"paths": ["src"]
}
}
},
"rules": {
"react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }]
}
}리액트를 썼기때문에
리액트 규칙을 적용해주고
js파일에서 jsx문법을 써도 에러나지 않게 규칙을 적용해놓은 모습이다.
Save할때 자동 검사하게 하기
Prettier는 에디터 에서 저장시, 커밋 전 후크 또는 CI 환경 에서 실행하여 검사한다. 하지만 별도의 설정을 하지않으면 커밋 전에 검사한다.
실시간으로 검사하려면 약간의 설정이 필요하다.
우선 eslint를 설치해준다.
그다음 vs코드 세팅을 건드려줘야한다.
#settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.alwaysShowStatus": true,
"editor.formatOnSave": true,
}이렇게 작성해주면 save할때마다 검사를해주고 코드를 컨변션에 맞게 고쳐준다.
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},위 코드는 eslint 익스텐션으로 실시간 코드 품질 검사하고 저장할 시에 자동 포메팅을 하는 역할을 한다.
"eslint.alwaysShowStatus": true 이 코드는 "eslint.enable": true 이것과 비슷한 기능을 하는거같은데 자동으로 검사하고 문제를 보여주고 수정할 수 있게 해준다.
이상 우리조가 사용했던 ESLint/Prettier 뜯어보며 공부하기 끝!
참고:
https://jeonghwan-kim.github.io/series/2019/12/30/frontend-dev-env-lint.html
https://velog.io/@gwangsuda/2019-09-25-1009-%EC%9E%91%EC%84%B1%EB%90%A8-bwk0ylejxj
