React + Ts Project With Vite

React + Ts Project With Vite

Install Vite

yarn create vite

1. set project name
2. select framework [react]
3. select variant [react-ts]

cd vite-project

yarn

setting eslint, prettier

1. eslint
   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

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

3. set 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',
       },
   }

4. set .prettierc

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

set vite config for ts

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


export default defineConfig({
    plugins: [react(), tsconfigPaths()]
})

참고자로 https://wonillism.tistory.com/271
참고자료 https://vicvijayakumar.com/blog/eslint-airbnb-style-guide-prettier