React, Vite, Typescript, Prettier, Eslint, Vscode 적용하기

Vite로 React-ts를 빌드하고 Tslint, Prettier 설정을 해보자

 

Vite 설치

yarn create vite

위 명령어를 입력하면 어떤 환경을 설정할지 가이드가 주어진다. 가이드에 따라 진행하면 아래와 같이 된다.

npm을 이용해도 된다. vite공식 문서를 참고하자.

이후 만든 디렉토리로 이동 후 yarn으로 패키지들을 설치

yarn

vscode 확장 설치

• eslint
• prettier

 

package 설치

"yarn add -D" 를 통해 아래 패키지들을 설치해준다.

eslint 관련

eslint
eslint-config-airbnb
eslint-config-prettier
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-prettier
eslint-plugin-react
eslint-plugin-react-hooks

typescript 관련

@typescript-eslint/eslint-plugin
@typescript-eslint/parser

vite 관련

vite-tsconfig-paths

 

vite.config.ts에서 tsconfigPaths 플러그인을 추가해준다.

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()],
});

 

config 파일

.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 파일 생성 후 아래 입력

{
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "arrowParens": "always"
}

 

 

vscode 설정