이번 시간에는 지난시간에 Vite로 생성했던 프로젝트 구조를 설명하고, ESLint와 Prettier를 설정해 보도록 하겠습니다.

프로젝트 구조

├── node_modules
│		└── ...
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── base.css
│   │   └── logo.svg
│   ├── components
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   └── icons
│   │       ├── IconCommunity.vue
│   │       ├── IconDocumentation.vue
│   │       ├── IconEcosystem.vue
│   │       ├── IconSupport.vue
│   │       └── IconTooling.vue
│   └── main.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
└── vite.config.js

설명

vite.config.js

Vite 명령어로 dev 서버를 실행할 때 프로젝트 루트의 vite.config.js 파일 확인을 시도합니다. 그리고 내부에 설정된 값을 참고합니다.

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

package.json

npm 으로 관리하기 위한 프로젝트 정보를 갖고 있는 파일

ESLint, Prettiser

현업에서는 대부분 ESLint와 Prettier를 함께 사용하고 있습니다.

.eslintrc.cjs

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  "root": true,
  "extends": [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-prettier"
  ],
  "env": {
    "vue/setup-compiler-macros": true
  }
}