⚙️ | ESLint & Prettier 설정

NewHa·2024년 6월 26일

ᴘʀᴏᴊᴇᴄᴛɪɴɢ

목록 보기

1/10

JavaScript나 TypeScript로 프로젝트를 진행하다 보면 팀원들과 코드 스타일을 맞추기 위해 ESLint와 Prettier를 자주 사용하게 됩니다. ESLint는 코드의 논리적 오류와 스타일 문제를 해결하는 데 도움을 주며, Prettier는 코드의 포맷을 정리하여 일관된 스타일을 유지하는 데 도움을 줍니다. ESLint와 Prettier를 함께 사용하면, 팀 내 코드 컨벤션을 통일하여 코드의 품질이 높아지고, 일관된 형식 덕분에 가독성이 향상됩니다.

하지만 VSCode 확장을 설치하고 프로젝트 내에서 규칙을 정했음에도, push할 때마다 텍스트가 약간씩 달라지는 문제가 생겼습니다. 그래서 이번 기회에 ESLint와 Prettier에 대해 자세히 알아보았습니다.

🌱 ESLint

ESLint는 코드를 일관성 있게 작성하여 잠재적 런타임 버그나 스타일 문제를 해결함으로써 코드의 품질을 보장해주는 도구입니다.

가장 많이 언급되는 예시는 함수를 정의하는 방법입니다. function 키워드를 사용하는 방법과 const로 선언하며 화살표 함수를 사용하는 방법이 있습니다. 이처럼 다양한 코드 구현 방식을 일관되게 통일하기 위해 ESLint를 사용합니다.

코드 작성 중에 실시간으로 오류를 검출하여 개발자가 즉시 수정할 수 있도록 도와줍니다.

ESLint는 VSCode와 같은 에디터에 적용할 수 있으며, 에디터 내의 확장과 플러그인을 모두 설치해야 합니다.

☀️ 설치하기

VSCode 에디터에서 extention을 설치합니다.
터미널에서 plugin을 설치합니다.

# 개발시에만 쓰이므로 개발모드(-D)로 설치합니다.
$ npm install -D eslint
-- 혹은 --
$ yarn add -D eslint

☀️ .eslintrc

설치가 끝났다면 ESLint Configuration 파일로 프로젝트 내에서 사용할 규칙을 정할 수 있습니다. .json, .js, .cjs 확장자로 파일을 만들 수 있습니다.

root: 기본값은 true입니다. 이는 ESLint 설정 파일을 찾을 때, 상위 디렉터리에 다른 설정 파일이 있더라도 무시하고 이 파일을 루트 설정 파일로 사용한다는 의미입니다. 만약 false라면 PC의 루트 디렉터리까지 설정 파일을 찾습니다.

plugins: 여러 종류의 플러그인 중 프로젝트에 필요해 설치된 플러그인 배열입니다. (npm이나 yarn 등을 통해 설치됩니다.)

ESLint-Plugins

eslint-config-airbnb와 같은 유명한 plugin labrary를 설치해서 기본 규칙을 정할 수 있지만, 진행하는 프로젝트의 성질과 맞지 않는다면 오히려 불편할 수 있습니다.

eslint-plugin-react : 리액트 전용 린트 플러그인

eslint-plugin-prettier : 린트 위에 사용할 프리티어 플러그인

eslint-config-prettier: 린트 설정과 중복되는 부분이 있으면 프리티어 룰에서 제외하는 플러그인

@typescript-eslint/eslint-plugin : 타입스크립트 전용 린트

extends: eslint 설정이 저장된 외부 파일을 extend하여 ESLint 설정을 확장할 수 있습니다. 여러 설정을 결합하여 사용할 수 있으며, 세부사항은 rules에서 커스터마이징할 수 있습니다.
parser: ESLint가 코드를 분석할 때 사용할 파서를 지정합니다. 기본적으로 espree가 설정되어 있으며, 특정 플러그인을 사용하면 해당 플러그인에서 제공하는 파서를 사용합니다.
rules: 직접 ESLint 규칙을 설정합니다. 각 규칙은 ESLint가 코드에서 무엇을 검사하고 어떤 경고 또는 오류를 생성할지를 정의합니다.

module.exports = {
  root: true,
  extends: [
    'airbnb',  // Airbnb의 JavaScript 스타일 가이드를 따릅니다.
    'airbnb-typescript',  // Airbnb의 TypeScript 스타일 가이드를 따릅니다.
    'plugin:react/recommended',  // React 관련 권장 설정을 적용합니다.
    'eslint:recommended',  // ESLint의 권장 설정을 적용합니다.
    'plugin:tailwindcss/recommended',  // Tailwind CSS 관련 권장 설정을 적용합니다.
    'plugin:@typescript-eslint/recommended',  // TypeScript ESLint 플러그인의 권장 설정을 적용합니다.
    'prettier',  // Prettier와 ESLint를 함께 사용할 수 있도록 설정합니다.
  ],
  parser: '@typescript-eslint/parser', // TypeScript 코드를 분석하기 위해 해당 파서를 사용합니다.
  parserOptions: {  // 파서 옵션을 설정합니다.
    project: './tsconfig.json',  // TypeScript 설정 파일을 지정합니다.
    ecmaFeatures: {
      jsx: true,  // JSX 구문을 지원합니다.
    },
    ecmaVersion: 'latest',  // 최신 ECMAScript 버전을 사용합니다.
    sourceType: 'module',  // ECMAScript 모듈을 사용합니다.
  },
  plugins: [
    'react', // React 관련 플러그인입니다.
    '@typescript-eslint'  // TypeScript 관련 플러그인입니다.
  ],
  settings: {
    tailwindcss: { config: './tailwind.config.ts' },  // Tailwind CSS 설정 파일을 지정합니다.
  },

  rules: {  // ESLint 규칙을 설정합니다.
    'no-unused-vars': 'warn',  // 사용되지 않는 변수에 대해 경고합니다.
    'no-console': 'warn',  // console 사용에 대해 경고합니다.

    // * react
    'react/jsx-props-no-spreading': 0,  // JSX props 확산을 허용합니다.
    'react/jsx-pascal-case': 0,  // JSX 컴포넌트 이름이 PascalCase인지 확인하지 않습니다.
    'react/react-in-jsx-scope': 0,  // React를 범위 내에 가져오는 것을 확인하지 않습니다.
    'import/prefer-default-export': 1,  // 기본 내보내기를 선호하지만, 경고로 설정합니다.
    'import/no-extraneous-dependencies': 0,  // 외부 의존성에 대한 경고를 비활성화 합니다.
    'import/extensions': 0,  // 확장자 검사 규칙을 비활성화 합니다.
    'import/order': [  // 가져오기 순서를 정의합니다.
      'error',
      {
        groups: ['builtin', 'external'],
        'newlines-between': 'always',
      },
    ],
    'react-refresh/only-export-components': [  // React 컴포넌트만 내보내도록 경고합니다.
      'warn',
      { allowConstantExport: true },
    ],

    // * typescript
    '@typescript-eslint/no-shadow': ['warn'],  // 변수 이름이 그림자 변수인지 경고합니다.
    '@typescript-eslint/naming-convention': 0,  // 네이밍 컨벤션을 확인하지 않습니다.

    // * react-query
    '@tanstack/query/exhaustive-deps': 'error',  // React Query 의존성 검사를 강제로 합니다.
    '@tanstack/query/no-rest-destructuring': 'warn',  // Rest Destructuring 사용에 대해 경고합니다.
    '@tanstack/query/stable-query-client': 'error',  // 안정적인 Query Client 사용을 강제합니다.
  },
};

Prettier

Prettier는 사용자의 설정에 따라 코드 스타일을 맞춰 가독성을 높여줍니다. 코드의 구현과는 관계없이 텍스트를 일관성 있게 작성하도록 도와주는 도구입니다. 탭의 간격, 줄바꿈 등의 설정으로 가독성을 크게 향상시킬 수 있습니다.

Prettier를 사용하면 코드 서식에 신경 쓰지 않고 코드 작성에만 집중할 수 있습니다.

코드 작성 후 포맷팅을 실행하여 일관된 코드 스타일을 유지합니다.

☀️ 설치하기

Extention

Plugin

$ npm install -D prettier
-- 혹은 --
$ yarn add -D prettier

☀️ .prettierrc

.json이나 .js 파일로 만들어 기본적인 옵션을 넣어줄 수 있습니다. .eslintrc에 선언할 수 있지만, 가독성을 위해 파일을 분리하는 것을 권장합니다.

{ "arrowParens": "avoid", // 화살표 함수의 매개변수가 하나일 때 괄호를 생략
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정 
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부 
  "printWidth": 80, // 한 줄의 최대길이를 80자로 제한하고 초과하면 자동으로 줄 바꿈 할 폭 길이 
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2) 
  "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식 
  "semi": true, // 세미콜론 사용 여부 -> 각 문장 끝에 세미콜론을 추가
  "singleQuote": true, // single 쿼테이션 사용 여부 -> 문자열을 표현할 때 작은 따옴표를 사용
  "tabWidth": 2, // 탭 너비  -> 들여쓰기에 사용할 스페이스를 2칸으로 설정합니다.
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식 -> 마지막에도 쉼표를 추가
  "useTabs": false, // 탭 사용 여부 -> 들여쓰기 할때 탭 문자가 아닌 스페이스 문자를 사용합니다.
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0) 
  "parser": '', // 사용할 parser를 지정, 자동으로 지정됨 
  "filepath": '', // parser를 유추할 수 있는 파일을 지정 
  "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정 
  "rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정, 
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0) 
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0) 
  "overrides": [ { "files": "*.json", 
				   "options": {
					    "printWidth": 200 
					} 
				} ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용 
}

전역설정

VSCode의 formatOnSave 기능을 사용해 저장시마다 자동으로 포맷팅되도록 할 수 있습니다.
Setting.json에서 다음 항목을 추가할 수 있습니다.

{
"editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { 
	"editor.defaultFormatter": "esbenp.prettier-vscode" 
},
"editor.formatOnSave": true
  
  /* 설정 가능한 항목들
  prettier.arrowParens
  prettier.bracketSpacing
  prettier.endOfLine
  prettier.htmlWhitespaceSensitivity
  prettier.insertPragma
  prettier.jsxBracketSameLine
  prettier.jsxSingleQuote
  prettier.printWidth
  prettier.proseWrap
  prettier.quoteProps
  prettier.requirePragma
  prettier.semi
  prettier.singleQuote
  prettier.tabWidth
  prettier.trailingComma
  prettier.useTabs
  prettier.vueIndentScriptAndStyle
  */
}

editor.codeActionsOnSave : {"source.fixAll.eslint" : true} : eslint rule 상 error로 판단되는 부분들을 알아서 수정해주는 설정
editor.formatOnSave : true, editor.defaultFormatter : esbenp.prettier-vscode : save시에 익스텐션 prettier환경에 맞게 코드를 수정해줍니다. -> 해당 동작이 기능하지 않으면 린트에러나 prettier에러를 알지못해서 onSave기능이 동작을 안합니다. -> 세팅을 다시 확인해야합니다.

통합사용

eslint에도 일관된 텍스트 작성을 위한 기능이 존재하므로 prettier와 충돌이 발생합니다. 따라서 eslint 내부에서 prettier를 이용할 수 있도록 설정을 변경해야 합니다.

추가적으로 플러그인을 설치해야 합니다.

$ npm install eslint-plugin-prettier@latest --save-dev -g 

$ npm install --save-dev eslint-config-prettier # prettier와 겹치는 eslint 룰 삭제 
$ npm install --save-dev eslint-plugin-prettier # eslint 기본 포맷 대신 프리티어 룰과 동일한 포매팅을 이용함

eslint-config-prettier : 불필요하거나 eslint와 충돌할 수 있는 규칙을 prettier에서 자동으로 꺼준다. -> eslintrc에 extends배열 마지막에 'prettier'를 추가합니다. 마지막에 넣어야 다른 구성을 재정의할 수 있습니다.
https://github.com/prettier/eslint-config-prettier
eslint-plugin-prettier : 코드 내에서 prettier에 걸린 부분을 lint 에러로 걸린 것으로 보고하도록 하는 플러그인으로, prettier 규칙에 어긋난 부분도 에러로 파악하기 위한 설정입니다.
prettier를 eslint규칙으로 실행하고 차이점을 개별 eslint 문제로 보고
https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

설치 후 .eslintrc 파일에서 다음과 같이 설정해줍니다.

"extends": [
	"plugin:react/recommended", 
	"plugin:prettier/recommended"
],

내가 설정한 .preettierrc 파일을 기반으로 eslint에서 해당 형식에 어긋나면 에러커리를 하도록 합니다.

// 위 코드는 다음 코드를 축약한 것입니다.
{
  ...
  "extends": ["prettier"], // prettier/react 를 추가하라는 글이 있지만, 8.0.0버전이후부터는 prettier에 모두 포함되어 있다.
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
  ...
}

다음 명령어를 통해 ESLint Prettier 적용을 확인할 수 있다.

eslint lintTest.js --fix # 린트에 프리티어 확장을 설치한 경우 
prettier --check . # 프리티어로 체크했을때 문제가 있는 파일 목록 출력 
prettier --write test.js # test.js파일을 포맷팅해서 덮어쓴다

둘 다 코드 포매팅 기능이 존재하므로 충돌하지 않도록 겹치는 기능은 꺼줍니다.

기본 포맷을 Prettier로 설정해줍니다.
1. command(ctrl) + shift + P : 명령 팔레트를 엽니다.
2. format document를 검색합니다.
3. config default formmatter 에서 prettier를 선택합니다.

👀 Reference

우리 팀을 위한 ESLint, Prettier 공유 컨피그 만들어보기
: 검색하다가 본 공유컨피그 만드는 우아한형제들 블로그글인데, 나중에 기회가 된다면 한번쯤 만들어 보고 싶다.

NewHa

백 번을 보면 한 가지는 안다 👀

다음 포스트

⚙️ | ESLint & Prettier 설정

ᴘʀᴏᴊᴇᴄᴛɪɴɢ

🌱 ESLint

☀️ 설치하기

☀️ .eslintrc

Prettier

☀️ 설치하기

Extention

Plugin

☀️ .prettierrc

전역설정

통합사용

👀 Reference

📔 | Weather API로 widget 만들기 (feat. Vite, React)

0개의 댓글