vue 설치 및 eslint & prettier

노드버전 변경하기

nvm install xx.12.0

vue cli 설치

npm install -g @vue/cli
// version 확인
vue --version
// create
vue create [사용자임의 폴더명]

화면 error overlay 없애기

vue.config.js 파일을 만들어 주고 아래의 코드를 작성해주면 됩니다.

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

eslint

설치하기

npm i eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue --save-dev

eslintrc.js를 추가합니다

// .eslintrc.js
module.exports ={
 	//....
  	rules: {
     	"no-console": process.env.NODE_ENV === "production" ? "error" : "off"
    }
}

rules에 no-console 은 개발중에 페이지 내에 콘솔이 있는경우 오류를 발생 시킵니다.

prettier

eslint 안으로 들어가야합니다
rules와 충돌이 나기 때문입니다.

// .eslintrc.js
module.exports ={
 	//....
  	rules: {
     	"no-console": 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',
      }]
    }
}
// vscode 설정 settings.json 
{
 	"editor.formatOnSave": true,
    "editor.formatOnType": true,
    "eslint.validate": [
        { "language": "vue", "autoFix": true }, //vue 체크
        { "language": "javascript", "autoFix": true }, //자바스크립트 체크
        { "language": "html", "autoFix": true } //HTML 체크 <div></div> -> <div />
        { "language": "react", "autoFix": true}
  	],
}

위 코드는 작업중에 코드를 작성하고 저장할 경우에 자동으로 코드를 정리해줍니다.
validate는 autofix를 통해 설정된 language를 체크 하고 자동으로 변경 해줍니다.

절대경로 설정하기

먼저 jsconfig.json 파일을 생성합니다.
이 파일은 vscode 내부의 기능 설정을 위한 파일입니다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./src/*"
      ],
    }
  },
  // 제외하는 목록
  "exclude": [
    "node_modules",
    "dist"
  ]
}

절대경로를 설정하는 이유는 컴포넌트가 많아질 경우 경로를 찾기가 번거롭기 때문입니다.