[Vue.js] Today I Learned - 프로젝트 생성 및 환경 구성

프로젝트 생성

Vue CLI 설치

npm install -g @vue/cli

Vue CLI 버전 확인

vue --version

Vue CLI 프로젝트 생성

vue create '프로젝트 명'

프로젝트 생성 설정

1. 프리셋(플러그인의 집합) 설정 : Manually select features 선택

 

2. 필요한 도구 설정 : Babel, Linter, Unit Testing 선택

 

3. Vue 버전 설정 : Vue 2.x 버전 선택

 

4. Linter & formatter 설정 : ESLint & Prettier 선택

 

5. Lint feature 설정 : Lint on save 선택

 

6. Unit testing solution 설정 : Jest 선택

 

7. 각 도구 설정정보 저장 방식 설정 : In dedicated config files 선택

 

8. 설정정보 저장여부 선택 : N 입력

 

9. 프로젝트 생성

ESLint

Javascript에서 에러가 날 수 있는 가능성을 제거하도록 도와주는 문법 검사 도구

 

프로젝트 레벨로 ESLint 규칙을 관리해야 하는 이유

공동 작업 시 IDE에 관계 없이 일관적인 규칙을 갖고 코드 정리가 가능하여 생산성, 효율성이 증가되기 때문이다.

 

ESLint 설정파일 살펴보기

프로젝트 폴더 내 .eslintrc.js 파일을 통해 ESLint 플러그인 설정을 수정할 수 있다.

 

형식

module.exports = {
  // root: 현재 폴더 위치를 기준으로 하위의 파일에 Lint 적용 여부. 상위 폴더에 Lint 적용 X
  root: true,
  env: {
    node: true,
  },
  // extends: 기본적인 문법 검사 규칙 이외에 추가적인 규칙들을 적용
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  // plugins: NPM으로 설치하여 사용할 수 있는 확장 규칙. 다른 라이브러리와 결합하여 Lint 사용 가능
  // rules: Lint를 실행할 때 사용자가 임의로 규칙을 추가하여 검사에서 제외 또는 추가하는 속성
  rules: {
    // no-console: console이 있으면 안된다.
    // console이 있을 경우 발생하는 오류를 검사하지 않는다.
    "no-console": "off",
    // 환경변수 값에 따라 경고 혹은 rule 미검사
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    // no-debugger: debugger가 있으면 안된다.
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
    // "prettier/prettier": ['off, warn, error', {prettier의 속성}]
    "prettier/prettier": [
      "error",
      {
        singleQuote: true,
        semi: true,
        useTabs: true,
        tabWidth: 2,
        trailingComma: "all",
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: "avoid",
      },
    ],
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
      ],
      env: {
        jest: true,
      },
    },
  ],
};

※ 설정파일 변경 시 서버 재시작 필수

 

VSCode ESLint 플러그인 설정(setting.json)

// 저장 시 code Action 수행여부
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
// eslint 동작 디렉토리 설정
// 해당 설정을 해줘야 저장 시 자동 수정기능이 동작
"eslint.workingDirectories": [
  {
    "mode": "auto"
  }
],
// 상태바 표시여부
"eslint.alwaysShowStatus": true,
// eslint 동작 파일형식 지정
"eslint.validate": [
  {
    "language": "vue",
    "autoFix": true
  },
  {
    "language": "javascript",
    "autoFix": true
  },
  {
    "language": "javascriptreact",
    "autoFix": true
  },
  {
    "language": "typescript",
    "autoFix": true
  },
  {
    "language": "typescriptreact",
    "autoFix": true
  }
],

Prettier

정해진 규칙을 바탕으로 코드를 정리해주는 도구

 

ESLint에서 Prettier 설정하기

Prettier용 설정파일(.prettierrc)을 이용하여 설정도 가능하지만 ESLint용 설정파일(.eslintrc.js) 내 rules에 prettier/prettier로 등록을 하면 코드 정리뿐만 아니라 오류까지 잡아주기 때문에 ESLint에서 설정한다.

 

형식

rules : {
  "prettier/prettier" : ['off/warn/error', {prettier 속성}]
},

 

ESLint와 Prettier 충돌 방지하기

ESLint와 Prettier를 같이 사용할 경우 ESLint도 코드 포맷팅 기능이 포함되어 있어 충돌이 발생할 수 있다.

때문에 아래와 같은 설정을 통해 충돌을 방지할 수 있다.

 

1. Prettier 플러그인 사용 안함 설정

 

2. 설정에서 'format on save' 검색하여 체크 해제

파일의 절대 경로 설정

컴포넌트 임포트 시 경로를 지정할 때 해당 컴포넌트의 위치에 따라 경로가 다르고 길어지면 사용하기가 어렵다.

그렇기 때문에 특정위치나 src, components 폴더를 기준으로 경로를 사용할 수 있도록 설정하는 것이 좋다.

 

설정하기

VSCode에서 제공하는 파일을 이용해 절대 경로 설정

 

1. Vue CLI로 생성한 프로젝트를 VSCode에서 새로 열기

 

2. VSCode 기능을 활용하기 위한 jsconfig.json 파일 생성

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "~/*": [
                "./*"
            ],
            "@/*": [
                "./src/*"
            ],
        }
    },
    // compilerOptions 에 제외될 폴더
    "exclude": [
        "node_modules",
        "dist"
    ]
}

참고

code.visualstudio.com/docs/languages/jsconfig

jsconfig.json Reference

kr.vuejs.org/v2/style-guide/index.html

Style Guide — Vue.js