프로젝트 만들기

vue3 기본 프로젝트를 만들어 보겠습니다.

npm init vue@**3.1.10 // 강의시 버전과 동일하게 프로젝트를 생성합니다.**

위와 같이 ESLint와 Prettier 설정만 Yes로 설정하고 나머지는 No로 한 후 프로젝트를 생성하도록 하겠습니다.

ESLint, prettier는 좋은 품질의 코드를 작성법을 제공하고, 코드가 일관된 스타일을 준수하도록 만들어주는 도구입니다.

• ESLint : ESLint는 ES 와 Lint를 합친 것입니다. ES는 Ecma Script의 약어이며, Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미합니다. 즉, ESLint는 자바스크립트 문법에서 에러를 표시해주는 툴이다.
• Prettier : Prettier는 Code Formatter이다. 개발자들에게 일관적인 코딩 스타일을 유지할 수 있게 도와주는 툴이다.

<aside> 💡 Vue Router와 상태관리 라이브러리인 Pinia는 필요한 순간에 직접 설치해 보도록 하겠습니다.

</aside>

그리고 프로젝트 폴더로 진입하여 의존성 모듈을 설치 후 서버를 개발 모드로 실행해 보도록 하겠습니다.

cd vue3-community
npm install
npm run dev

프로젝트를 실행하면 위와 같이 기본 화면이 잘 나오는 것을 확인할 수 있습니다.

ESlint, Prettier 설정

eslintrc.cjs 파일에 몇가지 rules을 추가하겠습니다.

/* 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,
  },
	parserOptions: {
		ecmaVersion: 'latest',
		sourceType: 'module',
	},
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
        tabWidth: 2,
        trailingComma: 'all',
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
				endOfLine: 'auto', // 한줄 추가
      },
    ],
  },
};

Prettier 옵션은 공식 홈페이지에서 확인 할 수 있습니다.

settings.json 설정

{
	"eslint.validate": [
	    "javascript",
	    "javascriptreact",
	    "typescript",
	    "typescriptreact",
	    // "html",  // 삭제
	    "vue",
	    "markdown"
	],
	"editor.codeActionsOnSave": {
	    "source.fixAll.eslint": true
	},
	"editor.tabSize": 2
}