[스마트해양물류 ✖ ICT멘토링] Vite + React + TS (Yarn 패키지 매니저)

yarn create vite [프로젝트명]

React. TypeScript + SWC.

 

cd nft

yarn

yarn dev

 

---

 

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-config-airbnb eslint-config-airbnb-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-config-prettier eslint-plugin-prettier prettier eslint-plugin-react-refresh

필요한 패키지 설치

// eslint.config.js
export default {
    root: true,
    env: {
        browser: true,
        es2020: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:react-hooks/recommended',
        'airbnb',
        'airbnb-typescript',
        'prettier',
        'plugin:prettier/recommended',
    ],
    ignorePatterns: ['dist', '.eslintrc.cjs'],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        project: './tsconfig.json',
    },
    plugins: ['react-refresh', 'prettier'],
    rules: {
        'prettier/prettier': 'warn',
        'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
    },
};

eslint.config.js

 

// prettier.config.js
export default {
    printWidth: 80,
    tabWidth: 2,
    useTabs: false,
    semi: true,
    singleQuote: true,
    trailingComma: 'all',
    bracketSpacing: true,
    arrowParens: 'always',
    endOfLine: 'lf',
};

prettier.config.js

 

{
    "name": "nft",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "tsc -b && vite build",
        "lint": "eslint .",
        "preview": "vite preview"
    },
    "dependencies": {
        "react": "^18.3.1",
        "react-dom": "^18.3.1"
    },
    "devDependencies": {
        "@types/react": "^18.3.3",
        "@types/react-dom": "^18.3.0",
        "@typescript-eslint/eslint-plugin": "^8.0.1",
        "@typescript-eslint/parser": "^8.0.1",
        "@vitejs/plugin-react-swc": "^3.5.0",
        "eslint": "^9.8.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-airbnb-typescript": "^18.0.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-define-config": "^2.1.0",
        "eslint-plugin-import": "^2.29.1",
        "eslint-plugin-jsx-a11y": "^6.9.0",
        "eslint-plugin-prettier": "^5.2.1",
        "eslint-plugin-react": "^7.35.0",
        "eslint-plugin-react-hooks": "^4.6.2",
        "eslint-plugin-react-refresh": "^0.4.9",
        "prettier": "^3.3.3",
        "typescript": "^5.2.2",
        "vite": "^5.3.4"
    }
}

package.json

 

---

 

 

✅ ESLint 확인

cd src/ 

npx eslint App.tsx

 

yarn lint

 

yarn lint | less

 

npx eslint .

 

npx eslint src/App.tsx

 

npx eslint --print-config src/App.tsx

 

✅ Prettier 확인

yarn prettier --check .

✅ Prettier 실행

yarn prettier --write .

---

 

✅ JavaScript 모듈

 

.~~rc

: runtime configuration, resource configuration. 소프트웨어나 프로그램의 설정 파일을 뜻한다.

 

.cjs vs .js

Common JS (.cjs)

: Node.js 환경에서 주로 사용되는 모듈 시스템이다. require, module.exports 사용.

 

ECMAScript Modules (.js or .mjs)

: 자바스크립트 표준 모듈 시스템(ESM)이다. import, export 사용.

 

 

✅ 번외. 다양한 방법

템플릿 지정 (yarn create vite [프로젝트명] --template react-ts)

// eslint 설치
yarn add eslint --dev

// eslint 초기화
yarn run eslint --init
npx eslint --init

 

 

---

 

yarn create vite [프로젝트 명]

import js from '@eslint/js';
import prettierConfig from 'eslint-config-prettier';
import prettier from 'eslint-plugin-prettier';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import globals from 'globals';
import tseslint from 'typescript-eslint';

export default tseslint.config({
  extends: [
    'airbnb', // Airbnb 기본 설정
    'airbnb-typescript', // Airbnb의 TypeScript 지원 설정
    js.configs.recommended,
    ...tseslint.configs.recommended,
    'plugin:prettier/recommended', // Prettier와 충돌하는 ESLint 규칙을 비활성화
    prettierConfig, // eslint-config-prettier를 사용하여 Prettier와 충돌하는 규칙 비활성화
  ],
  files: ['*/.{ts,tsx}'], // 모든 하위 디렉토리의 .ts, .tsx 파일 대상
  ignores: ['dist'],
  languageOptions: {
    ecmaVersion: 2020,
    globals: globals.browser,
  },
  plugins: {
    'react-hooks': reactHooks,
    'react-refresh': reactRefresh,
    prettier: prettier, // Prettier 플러그인 추가
    // Airbnb 관련 플러그인들은 자동으로 포함됨
  },
  rules: {
    ...reactHooks.configs.recommended.rules,
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    'prettier/prettier': 'warn', // Prettier 규칙을 ESLint 규칙으로 추가
    // 여기에서 Airbnb 규칙을 필요에 따라 덮어쓸 수 있습니다.
  },
});

eslint.config.js

// global.d.ts
declare module 'eslint-plugin-react-hooks';
declare module 'eslint-plugin-react-refresh';

global.d.ts

// prettier.config.cjs
module.exports = {
  semi: true,
  singleQuote: true,
  jsxSingleQuote: false,
  trailingComma: 'es5',
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  bracketSpacing: true,
  arrowParens: 'avoid',
};

prettier.config.cjs

// test.ts
// Prettier 적용 전
const message: string = 'Hello World'
console.log( message );

// Prettier 적용 후
const message: string = 'Hello World';
console.log(message);

test.ts

{
  "name": "nft",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.8.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^9.8.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^18.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.9.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.0",
    "vite": "^5.4.0"
  }
}

package.json

react-hooks, react-refresh는 원래 있지만 파일 선언 문제로 global.d.ts에서 관리.

Airbnb 스타일 적용할 때, 5개 추가.

 

✅ 총 정리본

https://dekoms-coding.tistory.com/119

[ESLint/Prettier] TypeScript + Airbnb 스타일 설정