회사가 커지고 개발자가 많아지게 되면 각자 자신이 좋아하는 스타일대로 코드를 작성하게 되는데, 여러 사람이 같이 만들게 되는 프로젝트의 경우는 이런 설정을 통일해 주는 것이 필요하다.
ESLint : 코드의 문법을 검사하는 린팅과 코드의 스타일을 잡아주는 포맷팅 기능을 한다. 쉽게 말해 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구이다.
Prettier : 코드의 스타일을 잡아주는 포맷팅 기능을 한다.
eslint 와 prettier 연결과 설정을 위해 아래 패키지들을 설치한다.
CRA
에서 맨 아래 두 줄은 지원해주기 때문에 두 줄은 제외하고 설치한다.
npm i -D eslint prettier
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm i -D eslint-config-airbnb
npm i -D eslint-config-prettier eslint-plugin-prettier
npm i -D eslint-plugin-react eslint-plugin-react-hooks
npm i -D eslint-plugin-jsx-a11y eslint-plugin-import
eslint
: 코드의 문법을 검사하는 린팅과 코드의 스타일을 잡아주는 포맷팅 기능prettier
: 코드의 스타일을 잡아주는 포맷팅 기능@typescript-eslint/eslint-plugin
: Typescript 관련 린팅규칙을 설정하는 플러그인@typescript-eslint/parser
: Typescript 를 파싱하기 위해 사용eslint-config-airbnb
: airbnb 코딩규칙을 사용(리액트 코딩규칙 포함)eslint-config-prettier
: prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시키는 configeslint-plugin-prettier
: Prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력eslint-plugin-react
: React에 관한 린트설정을 지원eslint-plugin-react-hooks
: React Hooks의 규칙을 강제하도록 하는 플러그인eslint-plugin-jsx-a11y
: JSX 내의 접근성 문제에 대해 즉각적인 AST 린팅 피드백을 제공eslint-plugin-import
: ES2015+의 import/export 구문을 지원하도록 함프로젝트 최상위 경로에 .eslintrc.js
파일을 생성 하고 아래와 같이 작성한다.
module.exports = {
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint', 'prettier'],
extends: [
'airbnb',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:prettier/recommended',
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
],
rules: {
'linebreak-style': 0,
'import/prefer-default-export': 0,
'prettier/prettier': 0,
'import/extensions': 0,
'no-use-before-define': 0,
'import/no-unresolved': 0,
'import/no-extraneous-dependencies': 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
'no-shadow': 0,
'react/prop-types': 0,
'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
'jsx-a11y/no-noninteractive-element-interactions': 0,
},
};
프로젝트 최상위 경로에 .prettierrc
파일을 생성하고 아래와 같이 작성한다.
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 120,
"arrowParens": "always"
}
singleQuote
: single 쿼테이션 사용 여부semi
: 세미콜론 사용 여부useTabs
: 탭 사용 여부tabWidth
: 탭 너비 trailingComma
: 여러 줄을 사용할 때, 후행 콤마 사용 방식printWidth
: 줄 바꿈 할 폭 길이arrowParens
: 화살표 함수 괄호 사용 방식