[React] ESLint Prettier 설정방법 1부 (JavaScript)

- 개요

안녕하세요. 이번 시간에는 React에 ESLint와 Prettier를 설정하는 방법에 대해 알아보겠습니다.

 

1부와 2부로 나눠 JavaScript 환경에서 설정하는 방법과 TypeScript 환경에서 설정하는 방법에 대해 알아보겠습니다.

 

React 프로젝트를 생성하는 방법을 모르시는 분들은 아래 링크를 참고해 프로젝트를 생성하고 오시는 걸 추천드리겠습니다.

[React] 개발환경 설정

[React] 개발환경 설정

[React TypeScript] React 프로젝트 TypeScript 적용

[React TypeScript] React 프로젝트 TypeScript 적용

 

- 개념 설명

시작하기 앞서 ESLint와 Prettier에 대한 기본적인 개념을 알아보고 설정을 진행하겠습니다.

 

1. ESLint

ESLint 공식 홈페이지 내용을 확인하면 ESLint는 확실한 목적이 있습니다.

 

코드에 패턴을 인식하고 코드의 일관성을 높이는데 중점을 두고 있다는 걸 알 수 있습니다.

 

다른 JSLint나 JSHint가 있지만 ESLint가 커스터마이징이 쉽고 확장성이 뛰어나 많은 Front-End 개발자가 사용하고 있습니다.

 

2. Prettier

Prettier는 Come Formatter입니다. 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구입니다.

 

여러 개발자가 협업하는 데 있어 각자에 코딩 스타일이 아닌, 정해진 코딩 스타일을 통해 개발을 할 수 있어 여러 사람들이 작업을 하더라도 코드가 일관성으로 유지할 수 있게 됩니다.

 

- 설정

배포 환경에서는 ESLint와 Prettier를 사용하지 않기 때문에 개발환경으로 패키지 모듈을 설치합니다.

현재 버전 확인

npm info "eslint-config-airbnb@latest" peerDependencies

확인된 번전을 통해 설치하기

설치

#npm
npm install eslint@^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react@^7.21.5 eslint-plugin-react-hooks@^4 eslint-config-prettier eslint-plugin-prettier eslint-config-airbnb prettier --save-dev

#yarn
yarn add eslint@^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react@^7.21.5 eslint-plugin-react-hooks@^4 eslint-config-prettier eslint-plugin-prettier eslint-config-airbnb prettier --dev

저는 기본적으로 airbnb를 사용합니다. 모듈 설치 시 eslint-config-airbnb 모듈을 추가해서 설치했습니다.

 

airbnb를 사용하지 않으시는 분들은 제거하고 진행하시면 될 것 같습니다.

 

- 패키지 설명

• eslint: ESLint 코어
• eslint-plugin-react: React 관련 린트 설정을 지원
• eslint-plugin-react-hooks: React Hooks의 규칙을 강제해주는 플러그인
• eslint-plugin-import: ES2015+의 import/export 구문을 지원
• eslint-plugin-jsx-a11y: JSX 내의 접근성 문제에 대해 즉각적인 AST린팅 피드백을 제공
• eslint-config-prettier: prettier와 eslint의 충돌을 일으키는 ESLint 규칙들을 비활성화시켜주는 config
• eslint-plugin-prettier: prettier에서 인식하는 오류를 ESLint가 출력
• eslint-config-airbnb: airbnb사의 코딩규칙을 사용

- eslintrc.js 파일 생성

vscode plugin으로 ESLint와 Prettier를 설치하였더라도 설정 파일 우선순위가 있다.

 

1등. eslintrc.js등 다른 파일 > 3등 vscode 설정 플러그인

 

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:prettier/recommended',
    'plugin:eslint/recommended',
    'prettier',
  ],
  rules: {
    'react/prop-types': 0,
    'no-extra-semi': 'error', // 확장자로 js와 jsx 둘다 허용하도록 수정
    'react/jsx-filename-extension': [1, { extensions: ['js', 'jsx'] }], // 화살표 함수의 파라미터가 하나일때 괄호 생략
    'arrow-parens': ['warn', 'as-needed'], // 사용하지 않는 변수가 있을때 빌드에러가 나던 규칙 해제
    'no-unused-vars': ['off'], // 콘솔을 쓰면 에러가 나던 규칙 해제
    'no-console': ['off'], // export const 문을 쓸때 에러를 내는 규칙 해제
    'import/prefer-default-export': ['off'], // hooks의 의존성배열이 충분하지 않을때 강제로 의존성을 추가하는 규칙을 완화
    'react-hooks/exhaustive-deps': ['warn'], // props spreading을 허용하지 않는 규칙 해제
    'react/jsx-props-no-spreading': [1, { custom: 'ignore' }],
  },
}

 

. prettierrc.js

module.exports = {
  singleQuote: true, // 문자열은 따옴표로 formatting
  semi: false, //코드 마지막에 세미콜른이 없게 formatting
  useTabs: false, //탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
  tabWidth: 2, // 들여쓰기 너비는 2칸
  trailingComma: 'all', // 자세한 설명은 구글링이 짱이긴하나 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록 formatting
  printWidth: 120, // 코드 한줄이 maximum 80칸
  arrowParens: 'avoid', // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
}

 

위 파일을 아래와 같이 Root 경로에 생성해줍니다.

 

이번 시간에는 ESLint와 Prettier 설정해보는 시간을 갖었습니다. 자신만의 코딩 스타일을 규격화해서 적용해 보시는 걸 추천드리겠습니다.