ESLint, Prettier 이 두단어는 어디선가 볼 수 있기도 하고 아니기도 하고 그런 존재다.
특히 ESLint의 경우 리액트에서 에러가 나타날때 자주 등장한다.
그럼 이 둘은 뭐길래 그렇게 자주 나타나는걸까?
React 개발 생태계에서 널리 사용되는 두 가지 도구입니다.
이러한 도구는 React 응용 프로그램에서 깨끗하고 일관적이며 오류 없는 코드를 유지하는 데 도움을 줍니다.
이렇게 나와있긴한데,, 추상적이여서 알아듣기 어렵다.
조금 더 자세히 볼까?
ESLint란 : ESLint는 JavaScript 코드에서 문제를 식별하고 해결하기 위한 정적 코드 분석 도구
Prettier란 : Prettier는 코드를 자동으로 형식화하여 코드베이스에서 일관된 코딩 스타일을 강제하는 견해가 있는 코드 포매터
조금 느낌이 잡힌것 같다. 에를 들어 리액트 프로젝트에서 들여쓰기를 잘못하여 원하는대로 구현이 안되거나,
함수를 잘못 닫을 때 등 결과에 영향을 주는 자잘한 요소들을 잡아주는 역할을 한다.
그렇다면 이 둘의 차이점은 뭘까?
이 둘의 차이점을 간단하게 설명하면, ESLint는 코드 문법 검사 및 코드 포맷팅을 수행하는 툴이고, Prettier는 코드 포맷팅만을 집중적으로 수행하는 툴이다.
각자의 역할이 살짝씩 다르지만 같은 목표를 추구하는 것은 마찬가지이다.
일반적으로 ESLint와 Prettier를 함께 사용하는 경우가 많다. 그러나 이때 주의가 필요하다. 왜냐하면 ESLint도 코드 포맷팅을 수행해서 Prettier의 코드 포맷팅 방식과 충돌이 발생할 수 있기 때문이다. 따라서 이번 포스팅에서는 충돌 없이 이 둘을 적절히 조합하여 사용해보자!
ESLint 및 Prettier 설치
npm install --save-dev eslint prettier
{
"singleQuote": true,
"semi": false,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "avoid",
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false
}singleQuote (단일 따옴표 사용)
true로 설정하면, 문자열을 단일 따옴표 (')로 묶어서 표시합니다. false로 설정하면, 문자열을 이중 따옴표 (")로 묶어서 표시합니다.
semi (세미콜론 사용):
false로 설정하면, JavaScript 코드 끝에 세미콜론을 자동으로 삽입하지 않습니다. true로 설정하면, 모든 문의 끝에 세미콜론을 삽입합니다.
useTabs (탭 사용):
false로 설정하면, 들여쓰기에 스페이스를 사용하며, true로 설정하면, 탭 문자를 사용하여 들여쓰기를 합니다.
tabWidth (탭 너비):
tabWidth는 탭 문자를 사용할 때 탭 하나의 폭을 설정합니다.
trailingComma (후행 쉼표 사용):
"all"로 설정하면, 객체 및 배열 리터럴의 마지막 요소 뒤에 항상 쉼표를 추가합니다. "none"으로 설정하면, 마지막 요소 뒤에 쉼표를 추가하지 않습니다.
printWidth (출력 폭):
printWidth는 한 줄의 최대 길이를 설정합니다. 줄 바꿈을 시작하기 위해 주어진 폭을 넘어가는 경우 줄 바꿈이 발생합니다.
arrowParens (화살표 함수 괄호 사용 방식):
"always"로 설정하면, 항상 화살표 함수 매개 변수 주위에 괄호를 사용합니다. "avoid"로 설정하면, 매개 변수가 하나인 경우 괄호를 생략합니다.
bracketSpacing (객체 리터럴에서 괄호에 공백 삽입 여부):
true로 설정하면, 객체 리터럴의 괄호 주위에 공백을 삽입합니다. false로 설정하면, 공백을 삽입하지 않습니다.
htmlWhitespaceSensitivity (HTML 공백 감도 설정):
"css"로 설정하면, HTML 요소의 공백은 CSS와 동일한 방식으로 취급됩니다.
insertPragma (프라그마 삽입):
true로 설정하면, Prettier가 파일 상단에 특정 프라그마 주석을 삽입합니다. false로 설정하면, 이 기능을 비활성화합니다.
jsxBracketSameLine (JSX 괄호 동일 라인):
true로 설정하면, JSX 요소의 여는 괄호({)를 열리는 태그와 동일한 라인에 위치시킵니다. false로 설정하면, 여는 괄호를 새로운 라인에 배치합니다.
jsxSingleQuote (JSX에 단일 따옴표 사용):
true로 설정하면, JSX 속성 값을 단일 따옴표 (')로 묶어서 표시합니다. false로 설정하면, 이중 따옴표 (")를 사용합니다.
proseWrap (문장 랩 방식):
"preserve"로 설정하면, 텍스트를 변경하지 않고 줄 바꿈이 수행됩니다. "always"로 설정하면, 줄 바꿈이 항상 발생하고 텍스트가 자동으로 줄 바꿈됩니다.
quoteProps (속성 이름 따옴표 사용 방식):
"as-needed"로 설정하면, 객체 속성 이름이 따옴표로 둘러싸여있지 않은 경우에만 따옴표를 추가합니다.
requirePragma (프라그마 필요 여부):
true로 설정하면, 파일이 프라그마 주석으로 시작해야 Prettier를 실행합니다. false로 설정하면, 프라그마 주석이 필요하지 않습니다.
실제 환경 셋팅
이 블로그에서
이 부분 안하면 되고,
expected indentation of 4 spaces but found 2이 에러가 난다면
https://interacting.tistory.com/143
이 블로그를 참고하여 Eslint를 off로 설정한다.
