2021.05.24

브랜치: project-setting

🎉 TIL

1. 프로젝트 생성 & vue-cli

#shell
npm install -g @vue/cli
vue create vue-flix

2. ESLint 오버레이 속성 사용하지 않게 설정하기

: 웹팩 devServer에서 오버레이 속성을 false로 변경한다.

// vue.config.js
module.exports = {
    devServer: {
        overlay: false,
    },
};

3. ✨Prettier 규칙을 ESLint 설정 파일 안에 넣어야되는 이유

Prettier와 ESLint 속성 간에 충돌이 일어날 수 있고, ESLint의 설정이 우선 시 되도록 하기 위해서

• 참고
• Vue.js 개발 생산성을 높여주는 도구 3가지

// .eslintrc.js
rules: {
	"prettier/prettier": [
		"error",
		{
			singleQuote: true,
			semi: true,
			useTabs: true,
			tabWidth: 4,
			trailingComma: "all",
			printWidth: 80,
			bracketSpacing: true,
			arrowParens: "avoid",

			// Delete `␍` eslint (prettier/prettier)에러 발생할 경우 추가
			endOfLine: "auto",
		},
	],
}

4. ESLint와 Prettier의 설정 파일을 수정했음에도 파일이 자동 수정이 안되는 경우 해결 방법

• Vscode 설정 파일에서 "ESLint"를 검색, ESLint의 settings.json파일의 "validate" 속성에 다음의 소스를 추가한다.
  : 소스 링크

{
  // ESLint
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // don't format on save
  "editor.formatOnSave": false
}

• Vscode Prettier 익스텐션 현재 작업에서 "사용 안함"으로 설정(esLint, 설정 파일에서 적용한 포맷팅을 사용하기 위해)

• Vscode 설정 > "format on save" 사용 안함으로 설정(포맷팅 충돌 방지)

5. 파일 절대 경로 설정

• 프로젝트 폴더 root 디렉토리에 'jsconfig.json' 파일을 생성하고 다음의 내용을 입력한다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./src/*"
      ],
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

6. 프로젝트 코딩 컨벤션

7. Netlify를 이용한 자동 배포

8. vue-3 참고

9. Vue 3 버전으로 생성한 프로젝트는 기존의 devtools가 아닌 베타버전 devtools를 사용해야한다!