ESLint/Prettier

ESLint/Prettier 설치 과정

//vite
npm create vite@latest

React+Typescript 선택
cd 디렉토리명
npm install

//eslint 설치 및 초기 설정
npm i -D eslint
npx eslint --init

ESLint init 옵션

타입 스크립트 - Yes format - JSON, JS 중 선호하는 것 선택

//peerdeps가 airbnb와 관련된 필요한 eslint 설정을 다운 받게 해준다.
npx install-peerdeps --dev eslint-config-airbnb
//typescript도 사용하므로 typescript 설정도 추가해준다.
npm install -D eslint-config-airbnb-typescript

//prettier 설치
npm install -D prettier eslint-config-prettier eslint-plugin-prettier

ESLint/Prettier 파일 생성 및 수정

.eslintrc.cjs

• extends에 해당 설정들 추가

• plugins에 '@typescript-eslint', 'react-hooks', 'prettier' 추가

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
		// extends 추가
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
		// 아래 기존 설정은 삭제하기
    //'eslint:recommended',
    //'plugin:@typescript-eslint/recommended',
    //'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
	// plugins 추가
  plugins: ['react-refresh', '@typescript-eslint', 'react-hooks', 'prettier'],
  rules: {
    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
  },
};

.prettierrc

"endOfLine": "auto" // EOF 관련 처리 방식
"printWidth": 80, // 줄 바꿈 기준
"tabWidth": 2, // 탭 너비
"useTabs": false, // 탭 대신 스페이스를 사용할지 여부
"semi": true, // 세미콜론 사용 여부
"singleQuote": true, // 작은따옴표(') 대신 큰따옴표(") 사용 여부
"singleAttributePerLine" : true, // 속성 하나당 한줄씩 차지하게 설정
"bracketSpacing": true, // 객체 리터럴에서 중괄호 앞뒤에 공백을 추가할지 여부
"bracketSameLine": false, // props 여러 개 있을 때 닫는 태그
"arrowParens": "always", // 화살표 함수 괄호 사용 방식