24.08.22 yarn vite js react 에 eslint적용하기

vite로 만든 react프로젝트는 eslint가 알아서 적용되어있다. 하지만 사용해본적이없어 설정해보고자 한다.

 

1. react프로젝트 생성

yarn create vite vite-react-eslint --template react

 

2. eslint관련 패키지 추가

yarn add eslint eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react prettier

 

react hooks도 강제하고싶다면 아래 패키지도 추가하자.

yarn add eslint-plugin-react-hooks

 

타입스크립트를 사용할때는 아래패키지를 추가로 설치한다.

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser

 

3. 설정파일 생성

.prettierrc - prettier관련 설정을 지정하는 파일

.prettierignore - prettier가 정렬을 할 수 없게 만들고싶을 때 지정하는 파일

 

vite로 프로젝트를 위와같이 생성하면 eslint.config.js파일이 생성되어있다.

//eslint.config.js
import js from "@eslint/js";
import globals from "globals";
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";

export default [
  //dist폴더와 node_modules폴더 제외
  { ignores: ["dist", "node_modules"] },
  {
    //js파일과 jsx파일에 eslint적용
    //ts쓴다면 ts, tsx추가
    files: ["**/*.{js,jsx}"],
    languageOptions: {
      //ECMAversion설정
      ecmaVersion: 2020,
      //글로벌 변수 정의
      globals: globals.browser,
      //ECMAScript기능 및 모듈 시스템 설정
      parserOptions: {
        ecmaVersion: "latest",
        ecmaFeatures: { jsx: true },
        //module로 설정하여 ES모듈 사용가능
        sourceType: "module",
      },
    },
    //React버전 정의
    settings: { react: { version: "18.3" } },
    //eslint Plugin 정의
    plugins: {
      react,
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
    },
    //eslint rules설정
    rules: {
      //eslint/js 패키지의 추천규칙 확장, 최신 js규칙을 포함하여 권장되는 설정
      ...js.configs.recommended.rules,
      //eslint-plugin-react추천규칙 포함, react에 특화된 규칙 제공
      ...react.configs.recommended.rules,
      //jsx 변환방식인 automatic모드 규칙 제공, react17에 JSX변환도입되어 새 변환 지원
      ...react.configs["jsx-runtime"].rules,
      //eslint-plugin-react-hooks의 규칙 포함, react hooks 사용에 관련된 규칙 제공
      ...reactHooks.configs.recommended.rules,
      //target=_blank 속성을 가진 a태그에 대한 경고 발생
      //보안상 이유로 rel="noopener noreferrer" 추가권장
      "react/jsx-no-target-blank": "off",
      //React fast Refresh와 관련된 규칙, 컴포넌트만 내보내는 것을 권장
      //개발 중 상태유지와 빠른 새로고침 지원
      //wran레벨로 지정하여 경고로 표시됨
      "react-refresh/only-export-components": [
        "warn",
        //상수값도 내보낼 수 있도록 허용
        { allowConstantExport: true },
      ],
    },
  },
];

rules에 특정 룰을 추가하고 싶다면 eslint Playground에서 체험해보며 룰을 지정하자

 

//.prettierrc
{
  "printWidth": 120,
  "tabWidth": 4,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "bracketSpacing": true,
  "trailingComma": "none"
}

prettier설정을 해당 프로젝트에서 공유하고 싶을 때 작성해주면 된다.

prettier설정 또한 prettier Playground에서 직접 변경해가며 수정하고 넣어주면 된다.

 

//.prettierignore
*.md

prettierignore파일은 prettier의 영향범위에서 벗어날 파일을 지정하는 것이다.

gitignore에서 깃에 연관지어지지 않을 파일(env 등)을 지정했던 것처럼 파일을 지정해주면 된다.

나는 README.md가 prettier때문에 변경되는 것이 싫어 md확장자 파일은 모두 지정되지 않게 설정하였다.