Vite, React, TypeScript, ESlint, Prettier 환경 세팅하는 법

Vite, React, TypeScript, ESlint, Prettier 환경 설정하기

1.

vite[비트]를 세팅한다.

yarn create vite

프로젝트 이름을 정하라고 나올 텐데 마음대로 지어도 된다. vite가 깔리는 폴더명을 정하는 거여서 나는 무난하게 frontend라고 정했다.
React -> TypeScript 를 선택하면 프로그램이 깔린다.

cd frontend
yarn

2.

ESlint와 Prettier를 세팅한다.

yarn add -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks

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

위와 같이 ESlint와 ESlint-TypeScript를 설정한다.

3.

🪅 .eslintrc.js라는 파일을 만들어 밑 내용을 넣어준다.
🪅🪅 파일명 맨앞에 .이 있다는 걸 주의하자. 🪅🪅

module.exports = {
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 13,
        sourceType: 'module',
    },
    plugins: ['react', '@typescript-eslint'],
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'airbnb',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended',
    ],
    env: {
        browser: true,
        es2021: true,
    },
    rules: {
        '@typescript-eslint/interface-name-prefix': 'on',
        '@typescript-eslint/explicit-function-return-type': 'on',
        '@typescript-eslint/explicit-module-boundary-types': 'on',
        '@typescript-eslint/no-explicit-any': 'on',
    },
}

🪅 .prettierrc라는 파일을 만들어 밑 내용을 넣어준다.
🪅🪅 확장자 없는 거 맞다. 🪅🪅

{
  "printWidth": 100,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 4,
  "trailingComma": "es5"
}

🪅 만들어져 있는 파일 vite.config.js에서 밑 내용을 추가한다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

✔️ 참고 자료 (밑에 비주얼 스튜디오 설정도 나와 있으니 참고하면 좋을 것 같다.)
https://wonillism.tistory.com/271