SPA 초기 세팅

프로젝트 생성: Vite

빠른 시작 | Vue.js
yarn create vue@latest
이 명령은 공식 Vue 프로젝트 스캐폴딩 도구인 create-vue를 설치 및 실행합니다.
TypeScript 및 테스트 지원과 같은 몇 가지 선택적 기능에 대한 프롬프트가 표시됩니다.

실패 이슈..

시작하기 | Vite
yarn create vite
yarn create vite <your-project-name> --template vue-ts

• Select a framwork ✅Vue
• Select a variant ✅TypeScript

우선 앞으로 추가될 패키지를 Git으로 관리하기 위해 Git 초기화 명령어를 실행,
git init 👉 .git 폴더가 추가되었다.

패키지 설치

상태 관리: Pinia

yarn add pinia

HTTP 요청: Alova

yarn add alova

코드 분석: ESLint

종속성 설치

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

설정 파일 생성

.eslintrc.js 파일

• root : true 👉 설정 파일을 찾으러 상위 폴더로 올라가지 않도록
• plugins: 기본으로 제공되는 규칙(rule) 외에도 추가적인 규칙(rule)을 사용할 수 있도록 만들어줌
• extends: 타 기업들이 공개해놓은 설정을 그대로 가져와 기반(base) 설정으로 활용, 추천 설정
  👉 해당 플러그인에서 기본적으로 제공하는 rule set 적용

코드 포매터: Prettier

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

module.exports = {
  root: true,
  plugins: ["vue", "@typescript-eslint"],
  extends: [
    "eslint:recommended", // eslint에서 권장하는 코드 규칙을 통해 JavaScript 문법 검사 진행
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-recommended",
    "plugin:prettier/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
};

🔗참조
ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자.
ESLint 상세 설정 가이드 | DaleSeo
https://velog.io/@rimo09/ESLint-설정
https://velog.io/@hanei100/Vue.js-ESLint-구성
Configuration (.eslintrc) | eslint-plugin-vue
Available rules | eslint-plugin-vue
Vuejs 가장 많이 사용되는 Prettier 설정
prettier 2.0에서 달라진 옵션 살펴보기 | NHN Cloud
Configuration Overrides | Prettier
Option Philosophy | Prettier