Vite-Vue-eslint-prettier 셋팅(Vue 프로젝트 시작하기)

리액트를 공부하다 Vue로 넘어오면서 초기 셋팅부터 기본적인 설정까지  해보게 되었는데, vite + vue3  프로젝트를 먼저 셋팅해준 후, ESLint와 prettier 설정까지 마무리했다. 이 글은 내가 보기 위해 정리하는 것이다.

리액트와 관련된 라이브러리는 많이 사용해서 알고 있었지만 Vue는 처음이다보니 Vue와 관련된 것들은 모두 생소했다. 그래서 어떤 것들이 필요하고 어떤 것들이 사용되는지부터 차근차근 알아보면서 적용해보려고 한다.

 

1. Vite 란?

Vite는 Webpack과 같은 빌드 도구인데 웹팩을 사용할 때보다 빠른 속도로 빌드된다는 장점이 있어 많은 주목을 받고 있다. 기존까지는 없었던 프론트엔드 개발 경험을 향상시켜줄 새로운 프론트엔드 툴인 것이다. 기존에는 원래 Vue 전용이었지만 지금은 넓게 사용이 가능하다고 하는데 Vite를 이용해서 Vue3 프로젝트를 만들어보려고 한다.

먼저 NPM을 사용한다면 아래와 같이 입력하여 프로젝트를 만들면 된다.

$ npm create vite@latest

 

Yarn을 사용한다면 이렇게 입력해주자.

$ yarn create vite

 

위의 명령어를 통해 프로젝트를 시작하게 되면 프로젝트 이름 입력, 원하는 프레임워크 선택, 추가 옵션 선택과 관련한 것이 순서대로 나오는데 Vue3 프로젝트를 만들 것이기 때문에 아래와 같이 선택해주었다.

 

2. ESLint + Prettier 설정

프로젝트를 만들었다면 ESLint와 Prettier 설정을 추가로 해줘야하는데 각각의 필요한 모듈부터 설치해보자.

Prettier 설치

npm install --save-dev --save-exact prettier

 

prettier를 설치했다면 해당 모듈에 대한 구성 파일 .prettierrc.json을 만들어 각각의 옵션을 추가하면 된다.

// .prettierrc.json
echo {}

 

ESLint 설치

npm install --save-dev eslint eslint-plugin-vue

 

npm을 통해 ESLint를 설치하고 나면 .eslintrc.js라는 파일을 만들어 ESLint 권장 규칙과 Vue3에 대한 권장 규칙을 사용하도록 다음과 같이 구성한다. (타입스크립트용 X)

/* 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,
	},
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'prettier/prettier': [
			'error',
			{
				singleQuote: true,
				semi: true,
				useTabs: true,
				tabWidth: 2,
				trailingComma: 'all',
				printWidth: 80,
				bracketSpacing: true,
				arrowParens: 'avoid',
			},
		],
	},
};

 

필요한 것들을 구성한 후 Prettier와 ESLint가 충돌하지 않도록 해줘야하는데 setting.json 파일에서 필요한 부분을 넣고 정리한다. defaultFormatter가 prettier로 설정이 되어있으면 충돌이 일어나기 때문에 이를 주석처리 해줬다.

{
  "workbench.colorTheme": "Default Dark+",
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  // "prettier.printWidth": 100,
  "editor.formatOnSave": true,
  // "editor.accessibilitySupport": "off",
  // "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.codeActionsOnSave.rules": null,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.tabSize": 2
}

 

3. Vite + Vue3 + ESLint + Prettier + Typescript + Pinia + Vue Router 간편 구성

 

Vite 프로젝트 시작시 세번째 선택사항인 Select a variant에서 Customize with create-vue를 선택하게 된다면 추가적인 옵션들을 조금 더 자세하게 설정할 수 있는데 타입스크립트뿐만 아니라 vue-router와 ESlint, prettier까지 한번에 설치할 수 있는 것 같다. 처음 설치할 때부터 Customize with create-vue를 선택하니 조금 더 편하게 설정할 수 있었다.

Vue Router나 Pinia, ESLint, Prettier 모두 각각 설치하면서 진행해도 되지만 이렇게 프로젝트를 구성한 후 필요에 따라 ESLint 규칙을 바꿔주는 방법으로 해도 괜찮은 것 같다.