ESLint, Prettier에 대해서
💡ESLint란?
자바스크립트 문법에서 오류가 나면 표시해주는 도구
또한 설정된 코딩 컨벤션을 위배하는 코드를 자동으로 검출하는 기능도 있어 협업에서 일관된 형식을 유지하기 위해 자주 사용하는 도구
yarn create vite를 통해 vite를 생성하면 eslint 라이브러리가 자동으로 같이 설치되면서 ESLint 설정 파일인 .eslint.cjs파일이 생성된다.
.eslint.cjs 파일의 구성 요소를 알아보자. 몇몇 요소의 수정을 통해 원하는 형식의 lint를 적용할 수 있다.
다음은 vite를 생성했을때 초기 생성된 .eslint.cjs 파일의 내용이다.
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh']
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
가장 많이 수정을 하게 될 요소는 extends와 rules일 것이다.
plugins :
플러그인 패키지를 설치하고, 해당 플러그인을
plugins에 추가하여 사용할 수 있다. 단, 추가한다고 해서 바로 적용되는 것은 아니고 extends나 rules에서의 설정이 필요하다.주로 많이 사용하는 plugin : ESLint 기본 plugin, react/react hooks/typescript를 위한 plugin, 에어비앤비 lint plugin 등
extends :
추가한 플러그인에서 사용할 규칙을 설정하여 확장하겠다는 의미이다. 이를 통해 기본 설정을 재사용하고, 필요에 따라 추가 규칙을 적용하기도 한다.
recommended / strict / all : 어느정도의 수준으로 규칙을 적용할지 정한다.
{ "plugins": [ "react" ], "extends": [ "eslint:recommended", "plugin:react/recommended" ], }위에서는 JavaScript와 React에서 일반적으로 권장되는 규칙들을 기반으로 ESLint를 설정하도록 지정한 모습이다.
rules:
프로젝트에 특화된 규칙을 적용하고 싶다면,
rules섹션에서 이를 자체적으로 정의하여 설정할 수 있다.규칙들 참고 :
ESLint 설치 과정
1️⃣ ESLint VS Code extension 설치
2️⃣ vite 생성 (vite 생성 시 저절로 ESLint 라이브러리 설치)
yarn create vite
3️⃣ eslint를 devDependencies로 설치
yarn add -D eslint
yarn eslint --init
💡 devDependencies란?
package.json 파일에 들어가면 dependencies와 devDependencies를 볼 수 있다.
그 중에 devDependencies에는 애플리케이션 동작과 직접적인 연관은 없지만, 개발할 때 필요한 라이브러리를 설치하면 된다.
eslint, prettier 등 코드를 작성할 때 사용되는 라이브러리들은 사용자와 만날 이유가 없다.
build 할 때는 의존성에서 제외함으로써 최종 결과물의 크기를 줄일 수 있다.
⇒ 로컬 개발 단계에서만 이용하기, 즉, devDependencies에 저장
💡 dependencies랑 뭐가 다를까
dependencies에 설치된 라이브러리는 배포할 때 포함된다.
또한 yarn install 명령어를 사용한다.
4️⃣ eslint 설정 파일 수정
//.eslint.cjs 파일
{
"plugins": [
"@typescript-eslint"
],
"rules": {
"@typescript-eslint/strict-boolean-expressions": [
2,
{
"allowString" : false,
"allowNumber" : false
}
]
},
}
"plugins": ["@typescript-eslint"] :
@typescript-eslint플러그인을 사용하도록 설정****TypeScript 코드에 대한 ESLint 지원을 제공하며, TypeScript의 특별한 문법과 규칙을 이해하고 분석할 수 있게 해준다.
"rules": {"@typescript-eslint/strict-boolean-expressions": [2, {"allowString": false, "allowNumber": false}]} :
@typescript-eslint/strict-boolean-expressions규칙을 설정한다.불리언(Boolean) 컨텍스트에서 엄격한 타입 검사를 요구하는데, 예를 들어 if 조건문이나 논리 연산자에서 특정 타입의 값만을 허용하도록 강제한다.
문자열(
allowString: false)과 숫자(allowNumber: false)를 불리언 컨텍스트에서 직접 사용하는 것을 허용하지 않는다.
💡Prettier란?
줄 바꿈, 공백, 들여 쓰기 등과 같은 스타일을 교정하여 일관된 코드 스타일을 유지할 수 있게 도와주는 툴이다.
❗️문법 에러나 코드 구현 방식에 대한 것을 교정하는 eslint랑은 다름❗️
Prettier 설치 과정
1️⃣ 익스텐션 설치 후 setting에서 적용
2️⃣ devDependencies에 설치
yarn add -D prettier
3️⃣ .prettierrc 파일 생성 후 설정
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "auto"
}
다양한 옵션은 공식문서로 확인 https://prettier.io/docs/en/options.html
prettierrc파일 룰이 VSCode Settings 설정보다 우선적으로 적용된다.위 요소들은 탭 이동 거리, 코드 한 줄의 최대 길이, 문자열 단일 따옴표(') 사용 등을 지정한 것이다.
Prettier과 ESLint 함께 사용하기
ESLint plugin들의 rule과 Prettier의 충돌을 방지하기 위해 아래 두 가지 plugin을 이용한다.
eslint-plugin-prettierprettier을 ESLint 플러그인으로 추가하여 prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력해준다.
eslint-config-prettierESLint의 formatting 관련 설정 중 prettier와 충돌하는 부분을 비활성화 한다.
설치
yarn add -D eslint-config-prettier eslint-plugin-prettier적용
{ "extends": [ "some-other-config-you-use", "prettier" ] "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } }
