[React] ESLint와 Prettier

potatoj11n·2024년 4월 19일

리액트

목록 보기
1/1

ESLint와 Prettier

자바스크립트에서 코드를 작성할 때 코드 품질을 높이고 일관된 스타일을 유지하기 위해 사용되는 도구

  • 둘을 함께 사용하면 코드 품질과 일관성을 높일 수 있으며,
  • 프로젝트의 협업 과정에서 코드 리뷰를 보다 효율적으로 진행할 수 있다.

ESLint는 코드 품질 및 버그 검사에 중점을 두고, Prettier는 코드 스타일을 관리하는 데 중점을 둔다.

ESLint

ESLint는 보통 프로젝트의 초기 빌드 과정에서 사용되어, 개발자가 코드를 작성하는 동안 실시간으로 코드를 검사하여 오류를 찾아낸다. 또한, IDE나 코드 에디터에서 플러그인으로 사용되어 개발자에게 편의성을 제공한다.

  • 자바스크립트 코드의 스타일을 일관된 형식으로 유지하도록 돕고,
    - 들여쓰기, 줄 바꿈, 세미콜론 사용 등 코드 스타일을 체크해 일관성 유지

  • 코드를 분석해 잠재적인 오류나 버그를 찾아내는 정적 분석 도구
    - 잘못된 변수 사용, 사용되지 않는 변수, 잘못된 조건문등을 검출

  • 프로젝트에 맞게 ESLint 규칙을 추가하거나 수정해 사용 가능
    - 개발 프로젝트 팀원끼리 자체적으로 정한 스타일을 강제할 수 있다.

ESLint 세팅

  1. 패키지 설치
  • 프로젝트 상위 폴더에서 터미널을 열어서
$ npm install eslint --save-dev
// or
$ yarn add -D eslint
  • 타입스크립트를 사용하는 경우
$ npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
  1. VS Code 확장 프로그램 설치
  • 확장 프로그램에서 eslint 검색후 설치

  1. .eslintrc.js 파일 설정

  • 프로젝트 루트 경로의 .eslintrc.js 파일 설정

  • .eslintrc.js, .eslintrc.json, .eslintrc 3가지 파일의 형태 모두 가능하다.

  • .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'react', 'prettier'],
  rules: {
    'react/react-in-jsx-scope': 'off',
  },
};

Prettier

코드의 스타일을 일관되게 유지하고 관리하기 위해 사용

  • 보통 Prettier는 코드 저장 시 자동으로 동작하여 코드 서식을 일관되게 유지한다.
  • 빌드 프로세스에서도 Prettier를 실행하여 코드의 일관성을 유지하고, 코드 리뷰에서도 팀원들 간의 서식을 통일시키는 데 사용된다.

Prettier 세팅

  1. 패키지 설치
$ npm install -D prettier
// or
$ yarn add -D prettier
  1. 확장 프로그램 설치
  2. VS Code 설정 바꿔주기
  • 저장할 때마다 prettier가 적용되게 하기
  • VS Code 에서 cmd+shift+p 로 열고 settings 검색

settings.json 파일에 추가

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
  • ctrl + , 으로 설정 창 열어서 Editor: Default Formatter 검색
    맥은 cmd + ,
  • prettier-code formatter 선택
  1. 프로젝트 루트 경로에.prettierrc 파일 생성해서 원하는 프리티어 설정
  • .prettierrc
{
  // 한 줄에 표시될 최대 문자 수
  "printWidth": 120,
  // 탭의 너비
  "tabWidth": 2,
  // 탭 대신 공백 문자를 사용할 것인지 여부
  "useTabs": false,
  // 세미콜론 사용 여부
  "semi": true,
  // 작은 따옴표 사용 여부
  "singleQuote": true,
  // 여러 줄의 배열 또는 객체 리터럴 마지막 요소 뒤에 쉼표 추가 여부
  "trailingComma": "all",
  // 객체 리터럴의 중괄호 사이에 공백 추가 여부
  "bracketSpacing": true,
  // 화살표 함수의 매개변수가 단일 매개변수인 경우 괄호 사용 여부
  "arrowParens": "avoid",
  // proseWrap 옵션은 Markdown과 같은 텍스트에서 줄 바꿈을 적용하는 방식을 설정
  "proseWrap": "never",
  // 파일의 끝에 있는 줄 종료 문자 설정
  "endOfLine": "lf"
}

ESLint와 Prettier 동시 세팅

주로 ESLint와 Prettier은 개발 과정에서 함께 사용된다. 하지만 Prettier와 ESLint를 같이 사용하게 되면 두 설정이 다 적용되어 충돌이 발생한다.

이러한 문제를 해결하기 위해서 ESLint 내부에서 Prettier를 이용할 수 있도록 설정을 변경해야 한다.

세팅

추가 플러그인이 필요하다.

  • eslint-config-prettier :
    ESLint의 규칙 중 Prettier에서 이미 다루는 것과 중복되는 부분을 비활성화하여 충돌을 방지한다. 이를 설치하면 ESLint가 Prettier의 규칙을 무시하고 서로 충돌하지 않는다.
  • eslint-plugin-prettier :
    Prettier가 적용되는 부분을 ESLint 에러로 표시하여 개발자가 Prettier의 서식을 준수하도록 유도한다.
  1. 패키지 설치
npm i -D prettier eslint-plugin-prettier eslint-config-prettier
  1. .eslintrc 파일에 다음과 같이 추가
{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"]
}

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
  • 타입스크립트 사용 시

패키지 설치

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --D
  • 프리티어 설치
prettier eslint-config-prettier eslint-plugin-prettier -D

.eslintrc 파일에 다음과 같이 추가

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "prettier/prettier": "error"
  }
}
  • .eslintrc.js
module.exports = {
  env: {
    browser: true, // 브라우저 환경에서 실행되는 코드에 대한 설정
    es2021: true, // ECMAScript 2021 기능을 사용할 수 있도록 설정
  },
  extends: [
    'eslint:recommended', // ESLint의 권장 설정 사용
    'plugin:@typescript-eslint/recommended', // TypeScript에 대한 ESLint 권장 설정 사용
    'plugin:react/recommended', // React에 대한 ESLint 권장 설정 사용
    'plugin:prettier/recommended', // Prettier와 함께 사용할 권장 설정 사용
  ],
  overrides: [
    {
      env: {
        node: true, // Node.js 환경에서 실행되는 코드에 대한 설정
      },
      files: ['.eslintrc.{js,cjs}'], // 해당 파일에만 적용되는 설정
      parserOptions: {
        sourceType: 'script', // 파일이 스크립트 형식인지를 지정
      },
    },
  ],
  parser: '@typescript-eslint/parser', // TypeScript 코드를 파싱하는 데 사용할 파서 지정
  parserOptions: {
    ecmaVersion: 'latest', // ECMAScript 최신 버전 사용
    sourceType: 'module', // 모듈 형식의 코드 사용
  },
  plugins: ['@typescript-eslint', 'react', 'prettier'], // 사용할 플러그인 목록
  rules: {
    'react/react-in-jsx-scope': 'off', // JSX 파일에서 React import 없이 JSX 사용을 허용
  },
};
  • env: 프로젝트에서 사용하는 환경을 설정한다. 위의 예제에서는 브라우저와 ECMAScript 2021을 사용하도록 설정되어 있다.
  • extends: 프로젝트에 적용할 ESLint 구성을 확장한다. 위의 예제에서는 ESLint의 기본 설정과 React 플러그인의 권장 설정을 확장하고 있다.
  • parserOptions: ESLint가 코드를 파싱하는 방법을 설정, 위의 예제에서는 ECMAScript 버전 및 모듈 형식을 설정하고 있다.
  • plugins: 사용할 ESLint 플러그인을 설정한다. 위의 예제에서는 React 플러그인을 사용하고 있다.
  • rules: 프로젝트에서 사용할 규칙을 설정한다. 필요한 경우 추가적인 규칙을 적용
profile
potatoj11n

0개의 댓글