eslint prettier (에어비앤비)

ESLint와 Prettier의 차이

프로젝트 생성

npx create-react-app 디렉토리명 --template typescript

//vite
npm create vite@latest

ESLint 패키지 설치

//eslint 설치
npm i -D eslint
//타입스크립트 관련 linting 규칙을 설정하는 플러그인, 타입스크립트 ESLint 파서
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
//에어비엔비 코딩 규칙을 사용한다 (react), 에어비앤비 타입스크립트 지원
npm i -D eslint-config-airbnb eslint-config-airbnb-typescript
//ESLint의 formatting 관련 설정 중 Prettier와 충돌할 수 있는 모든 규칙을 비활성화한다.
//Prettier에서 인식하는 코드 상의 포맷 오류를 ESLint 오류로 출력해준다
npm i -D eslint-config-prettier eslint-plugin-prettier
//리액트에 대한 lint 설정 지원, 리액트 hooks 지원
npm i -D eslint-plugin-react eslint-plugin-react-hooks
//ES2015+의 import/export 구문을 지원
npm i -D eslint-plugin-jsx-a11y eslint-plugin-import

// ctrl c + v
npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import

패키지 설치

npm i -D eslint
npx eslint --init

다시 처음부터…

//vite
npm create vite@latest

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

npm i -D eslint
npx eslint --init

//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

.eslintrc.cjs

• extends에 해당 설정들 추가

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

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 관련 처리 방식
	// lf : Line Feed만 사용함 - mac linux git저장소 에서 주로 사용
	// crlf : Carriage Return + Line Feed만 사용 - window
	// cr : Carriage Return만 사용 - 매우 드물게 사용
	// auto : 기존의 라인 종료를 유지함

	"printWidth": 80, //  줄 바꿈 할
	// int

	"tabWidth": 2, // 탭 너비
	// int

	"useTabs": false, // 탭 대신 스페이스를 사용할지 여부
	// true
	// false

	"semi": true, // 세미콜론 사용 여부
	// true
	// false

	"singleQuote": true, // 작은따옴표(') 대신 큰따옴표(") 사용 여부
	// true
	// false

	"singleAttributePerLine" : true,// 속성 하나당 한줄씩 차지하게 설정
	// true
	// false

  "bracketSpacing": true, // 객체 리터럴에서 중괄호 앞뒤에 공백을 추가할지 여부
	// true
	// false

	"bracketSameLine": false, //props여러개 있을 때 닫는 태그

	"arrowParens": "always", // 화살표 함수 괄호 사용 방식
	// always : (x) => x
	// avoid : x => x

	/* 거의 사용안되는 옵션 */

 "속성 이름" : "기본값",
	// 설정가능한 옵션들

	"endOfLine": "if" // EOF 관련 처리 방식
	// lf : Line Feed만 사용함 - mac linux git저장소 에서 주로 사용
	// crlf : Carriage Return + Line Feed만 사용 - window
	// cr : Carriage Return만 사용 - 매우 드물게 사용
	// auto : 기존의 라인 종료를 유지함

	"printWidth": 80, //  줄 바꿈 할
	// int

	"tabWidth": 2, // 탭 너비
	// int

	"useTabs": false, // 탭 대신 스페이스를 사용할지 여부
	// true
	// false

	"semi": true, // 세미콜론 사용 여부
	// true
	// false

	"singleQuote": false, // 작은따옴표(') 대신 큰따옴표(") 사용 여부
	// true
	// false

	"singleAttributePerLine" : false,// 속성 하나당 한줄씩 차지하게 설정
	// true
	// false

  "quoteProps": "as-needed" // 객체 속성의 따옴표 스타일을 결정
	// as-needed : 객체의 key에서 따옴표가 필요한 경우만 사용
	// consistent : 객체내의 key중 하나이상이 따옴표가 필요하면 전부 따옴표 사용
	// preserve : 이미 따옴표가 존재하는 경우 그대로 유지

  "jsxSingleQuote": false, // JSX에서도 작은따옴표 사용 여부를 결정
	// false
	// true

	"trailingComma": "all", // 객체 or 배열을 여러 줄을 사용할 때, 후행 콤마 사용여부
	// all : 맨 마지막에 무조건 붙여 사용 - 함수 호출 , 매개 변수 , 객체 , 배열 등
	// es5 : es5에서 유효한 위치에서만 사용 - 주로 객체, 배열
	// none : 사용 안함

  "bracketSpacing": true, // 객체 리터럴에서 중괄호 앞뒤에 공백을 추가할지 여부
	// true
	// false

	"bracketSameLine": false,
	"jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
	// true
		onClick={handler}>
	// false
		onClick={handler}
		>

	"arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
	// always : (x) => x
	// avoid : x => x

	"proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식
	// alaways : printWidth 를 초과하는 경우 줄바꿈
	// never : 줄바꿈하지않고 한줄로 표현함
	// preserve : 형태 그대로를 유지

	"htmlWhitespaceSensitivity": "css", // HTML 전역 공백 처리 방식을 정의
	// css : css display 속성의 기본값을 따름 - 뭔 말이니
	// strict : 모든 태그 주변의 공백을 의미있는 공백으로 간주함
	// ignore : 공백의 의미를 없앰

	 "overrides": [
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 파일 별로 옵션을 다르게하고싶을 때 사용되어짐

	/* 거의 사용안되는 옵션 */
	"parser": '', // 사용할 parser를 지정, 자동으로 지정됨
	// 보통 이 옵션을 명시적으로 설정하지 않아도 됨
	// 다만, 특별한 상황에서 또는 다른 파서를 시도해 보고자 할 때 이 옵션을 사용할 수
	"filepath": '', // parser를 유추할 수 있는 파일을 지정

	"rangeStart": 0,
	"rangeEnd" : Infinity,
	// 파일에서 start 줄부터 end 줄까지 포맷팅함 - 포맷팅 구역을 지정함

	"requirePragma": false // 파일 상단에 아래 작성된 주석이 존재할때만 해당 파일을 포맷팅함
	/**
	 * @prettier
	 */

	// 또는

	/**
	 * @format
	 */
	// 둘 중 한개라도 상단에 명시가 되지 않으면 prettier가 동작하지 않음
	"insertPragma": false, // 위에 2개의 주석중 @format 주석이 파일에 자동으로 생성되도록 설정함

	"vueIndentScriptAndStyle": true, // 뷰의 script style 태그의 들여 쓰기 여부
	// true
	// false

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

prettier 설정 추천?

{
  // 쌍따옴표 대신 홑따옴표 사용
  "singleQuote": true,
  // 모든 구문 끝에 세미콜론 출력
  "semi": true,
  // 탭 대신 공백으로 들여쓰기
  "useTabs": false,
  // 들여쓰기 공백 수
  "tabWidth": 2,
  // 가능하면 후행 쉼표 사용
  "trailingComma": "all",
  // 줄 바꿈할 길이
  "printWidth": 80,
  // 객체 괄호에 공백 삽입
  "bracketSpacing": true,
  // 항상 화살표 함수의 매개 변수를 괄호로 감쌈
  "arrowParens": "always",
  // OS에 따른 코드라인 끝 처리 방식 사용
  "endOfLine": "auto"
}