Vite5 + Vue3 + ESLint + Prettier + TypeScript

설치 당시 버전
Vite : 5.0 / Vue : 3.3 / ESLint : 8.56 / Prettier : 3.1 / Pinia : 2.1 / Vue-Router : 4.2

 

프로젝트 생성

npm create vite@latest [프로젝트 이름]
√ Package name: ... [프로젝트 이름]
√ Select a framework: » Vue
√ Select a variant: » TypeScript

 

src내 필요한 폴더 추가

mkdir src/views
mkdir src/stores
mkdir src/router
mkdir src/styles

 

Prettier 및 ESLint 설치

npm i -D eslint prettier typescript

 

.vscode/setting.json 작성

{
    "editor.formatOnType": true,
    "editor.codeActionsOnSave": { 
        "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true,
    "eslint.alwaysShowStatus": true,
    "eslint.workingDirectories": [
        {"mode": "auto"}
    ],
    "eslint.validate":  [
        "vue",
        "javascript",
        "typescript"
    ]
}

 

터미널에 npx eslint --init 커맨드 입력하여 원하는대로 옵션 설정

npx eslint --init

 

필요한 라이브러리 추가 설치

npm i -D eslint-config-prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier eslint-plugin-import

 

생성된 .eslintrc.cjs 내용에서 추가 수정

npx eslint --init을 실행하면서 설정된 옵션에 따라 필요한 플러그인이 설치 되었습니다.
import 정렬을 위해 미리 install했던 플러그인을 추가해야 합니다.

자세한 내용은 아래 모듈 내용을 확인해주세요.

모든 과정을 따라 했음에도 lint error가 발생한다면, esljint 설치할 때 옵션값이 달라 다른 플러그인이 설치될 수 있습니다. 아래 package.json을 확인하여 추가 install 해주세요.

module.exports = {
	env: {
		browser: true,
		es2021: true,
	},
	extends: [
		'eslint:recommended',
		'plugin:@typescript-eslint/recommended',
		'plugin:vue/vue3-essential',
		'plugin:prettier/recommended',
		'prettier',
	],
	overrides: [
		{
			env: {
				node: true,
			},
			files: ['.eslintrc.{js,cjs}'],
			parserOptions: {
				sourceType: 'script',
			},
		},
	],
	parserOptions: {
		ecmaVersion: 'latest',
		parser: '@typescript-eslint/parser',
		sourceType: 'module',
	},
	plugins: ['@typescript-eslint', 'vue', 'prettier', 'import'],
	rules: {
		'vue/no-v-html': 'off',
		'vue/multi-word-component-names': 'off',
		'prettier/prettier': [
			'error',
			{
				singleQuote: true,
				semi: true,
				useTabs: true,
				tabWidth: 4,
				trailingComma: 'all',
				printWidth: 80,
				bracketSpacing: true,
				arrowParens: 'avoid',
				endOfLine: 'auto',
			},
		],
		'sort-imports': [
			'error',
			{
				ignoreCase: true,
				ignoreDeclarationSort: true,
				ignoreMemberSort: false,
				allowSeparatedGroups: true,
			},
		],
		'import/order': [
			'error',
			{
				'newlines-between': 'always',
				groups: [
					['builtin', 'external'],
					'internal',
					'parent',
					'sibling',
					'index',
				],
				pathGroups: [
					{ pattern: 'vue', group: 'builtin' },
					{
						pattern: '@/**',
						group: 'internal',
					},
					{
						pattern: 'src/**',
						group: 'internal',
					},
				],
				pathGroupsExcludedImportTypes: ['src/**', '@/**'],
				alphabetize: {
					order: 'asc',
					caseInsensitive: true,
				},
			},
		],
	},
};

package.json

{
  "name": "project name",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .js,.ts,.vue src/. --fix"
  },
  "dependencies": {
    "pinia": "^2.1.7",
    "vue": "^3.3.11",
    "vue-i18n": "^9.9.0",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@types/node": "^20.11.5",
    "@typescript-eslint/eslint-plugin": "^6.18.1",
    "@typescript-eslint/parser": "^6.18.1",
    "@vitejs/plugin-vue": "^4.5.2",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-prettier": "^5.1.2",
    "eslint-plugin-vue": "^9.19.2",
    "prettier": "^3.1.1",
    "sass": "^1.69.7",
    "typescript": "^5.3.3",
    "vite": "^5.0.8",
    "vue-tsc": "^1.8.25"
  }
}

 

vite.config.ts 수정

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

export default defineConfig({
	plugins: [vue()],
	resolve: {
		alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
	},
});

path module 못찾는 error 해결 방법 두 가지!

'path' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.ts(2307)
1. @types/node 설치 후 vsc 껐다 켜기

npm i -D @types/node

2. 위 방법을 써도 안 될 경우 tsconfig.json 내용 추가

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "esModuleInterop": true,
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "typeRoots" : ["./@types", "./node_modules/@types"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["vite/client"],
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

 

SCSS 사용을 위해 SASS 설치

npm install -D sass

 

reset.scss 작성

기본적으로 html 요소들이 padding, margin 등을 갖고 있음.
이를 없애고자 추가함.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* make sure to set some focus styles for accessibility */
button, input, select, textarea{
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
}
button, input {
  line-height: normal;
}
:focus {
  outline: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul, li {
  list-style: none;
}
li {
  display: list-item;
}
table {
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
}
tr {
  display: table-row;
}
thead {
  display: table-header-group;
}
tbody {
  display: table-row-group;
}
tfoot {
  display: table-footer-group;
}
col {
  display: table-column;
}
colgroup {
  display: table-column-group;
}
td,
th {
  display: table-cell;
}
caption {
  display: table-caption;
}
th {
  font-weight: bolder;
  text-align: center;
}
caption {
  text-align: center;
}
textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}
a{
  text-decoration: none;
}
a:focus,
a:active,
a:hover {
  outline: 0;
}
h1, h2, h3, h4, h5, h6,
b, strong {
  font-weight: bolder;
}
img{
  margin: 0;
  padding: 0;
  border: 0;
}
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] {
  direction: ltr;
  unicode-bidi: bidi-override;
}
BDO[DIR="rtl"] {
  direction: rtl;
  unicode-bidi: bidi-override;
}
*[DIR="ltr"] {
  direction: ltr;
  unicode-bidi: embed;
}
*[DIR="rtl"] {
  direction: rtl;
  unicode-bidi: embed;
}
@media print {
  h1 {
    page-break-before: always;
  }
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  ul, ol, dl {
    page-break-before: avoid;
  }
}

 

Pinia, Router 설치

npm i pinia vue-router

 

main.ts 수정

import { createPinia } from 'pinia';
import { createApp } from 'vue';

import App from '@/App.vue';
import router from '@/routes/router';

const pinia = createPinia();

createApp(App).use(router).use(pinia).mount('#app');

 

package.json scripts에 lint 추가

{
  "scripts": {
    ... 생략 ...
    "lint": "eslint --ext .js,.ts,.vue src/. --fix"
  },
}