Vite 환경에서 eslint, prettier 적용해보기 (airbnb 모드로 설정하기)

● Vite 환경에서 eslint, prettier 적용해보기 (airbnb 모드로 설정하기)

먼저 vite 프로젝트를 설치해주었습니다.

npm create vite@latest

 

 

❍ eslint 적용하기

vite를 설치하고 나니까 기본적으로 eslint가 적용되어 있었는데요, eslint의 기본설정인

eslint:recommended와 react환경과 관련된 플러그인들이 extends에 설정되어있었습니다.

• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-react-refresh

 

대체 이 플러그인들이 무엇인가.. 현타가 왓읍니다..

• eslint:recommended는 초기 설정입니다.
• eslint-plugin-react : eslint에 대한 리액트 특정 린팅 규칙
• eslint-plugin-react-hooks : ESLint 플러그인은 훅의 규칙을 적용합니다. 이는 React용 Hooks API의 일부입니다.
• eslint-plugin-react-refresh:  빠른 새로고침으로 구성 요소를 안전하게 업데이트할 수 있는지 확인합니다.

 

플러그인들의 해석을 보니 정말 기본적인 설정만 되어 있는 것 같았습니다.

이제 에어비엔비 모드에 적용하기 위해서는 아래의 명령어를 치면 필요한 패키지들을 살펴볼 수 있었습니다.

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

 

그럼 필요한 패키지와 버전들까지 나오게 됩니다. 먼저 제 vite 프로젝트에는 eslint-plugin-react와 eslint-plugin-react-hooks는 깔려있으니 나머지 두개의 패키지만 깔아주면 되겠죠?

나머지 모듈을 데브디펜던시에 설치해주었습니다.

npm i -D eslint-config-airbnb

npm i -D eslint-plugin-import

npm i -D eslint-plugin-jsx-a11y

• eslint-plugin-import : 이 플러그인은 ES2015+(ES6+) 가져오기/내보내기 구문의 린팅을 지원하고 파일 경로 및 가져오기 이름의 철자 오류 문제를 방지하기 위한 것입니다. ES2015+ 정적 모듈 구문이 제공하고자 하는 모든 장점을 에디터에서 마크업합니다.
• eslint-plugin-jsx-a11y: 리액트 element 의 접근성 이슈를 짚어 lint 해주는 플러그인임. 예를 들면 " interactive 하지 않은 엘리먼트에 click 핸들러가 달여있다 " 이런 오류를 냄.

 

그리고 아래 명령어로 제가 설치한 모든 패키지들을 한번에 설치할 수 있습니다.

npx install-peerdeps --dev eslint-config-airbnb

 

그다음 이제.. eslintrc.js파일을 수정해줍니다.

module.exports = {
  env: { browser: true, es2020: true, node: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'airbnb',
  ],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react', 'react-hooks', 'react-refresh'],
  rules: {
    'react-refresh/only-export-components': 'warn',
  },
};

 

❍ prettier 적용하기

npm install prettier --save-dev --save-exact

prettier를 개발 모드로 설치하며 exact로 하여 정확한 문구에서 설치되도록 하였습니다. prettier는 코드를 정해진 규칙에 따라 자동으로 포멧팅 해주는 기능을 제공합니다. 위와 같은 명령어로 설치 또는 extension에서 설치하면 됩니다.

 

.prettierrc.json / .prettierrc.js / .pretterrc.yml 중 하나를 선택하여 파일을 생성해줍니다. 저는 js파일로 작성하였습니다.

.prettierrc.js

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

 

❍ eslint, prettier 충돌 설정해주기

eslint-config-prettier
eslint-plugin-prettier

• eslint-config-prettier: prettier와 겹치는 formatting 규칙을 비활성화하기 위해서 설치합니다. 즉, 중복되는 포멧팅 규칙은 prettier가, 문법은 ESLint가 검사하고 실행하는 것입니다.
• eslint-plugin-prettier: prettier eslint 규칙을 바탕으로 실행합니다. (prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력해주기 위해) 즉, 이 플러그인으로 pretteir규칙이 ESLint규칙으로 추가되는 것으로 볼 수 있습니다. 쉽게 말하면 prettier가 eslint로 들어가게됩니다. 그래서 eslint만 돌려도 돌아가게끔 작동합니다.

 

아래 명령어로 패키지를 깔아줍니다.

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

 extends: [ 'plugin:prettier/recommended']
 plugins: ['react', '@typescript-eslint', 'prettier'],

 

그다음 넣어주고 설정해주면 끝인데,, ㅜ ㅜ 하자마자 마주한 에러들이 너무 많았따.. 눈물.. 에어비엔비는 아직 제가 쓰기에는 너무 어렵네용..

 

 

에러를 해결한 링크들은 아래와 같습니다.

https://github.com/InKyoJeong/TIL/issues/1

[eslint] typescript 프로젝트 절대경로 [import/no-unresolved] 에러 (CRA) · Issue #1 · InKyoJeong/TIL

https://kjwsx23.tistory.com/545

[ESLint, Airbnb] import/extensions 규칙 설정하기

 

 

참고했던 블로그

React-vite-eslint(airbnb)-prettier-typescript 설정

 

Blog Project with React and NodeJS

 

프론트엔드 개발환경의 이해: 린트

 

 

 

 

 

---

06.16 

나중에 팀프로젝트 진행할때, 사용하면 좋을 것 같은 eslint 적용법!

알아두면 쓸데있는 ESLint & Prettier 설정 방법 (feat.우아한테크코스)