Vue.js 스터디 - 2) vue-cli / eslint 경고

Vue-cli 설치 및 프로젝트 생성

* vue-cli 설치 전 node.js가 설치되어 있어야 함.

​

vue-cli 초기 설치 방법 :

npm install -g vue-cli

​

vue-cli 프로젝트 생성 방법 :

vue init webpack 생성될폴더명

* vue-cli 프로젝트를 Visual Studio Code의 터미널에서 생성 시 vue 명령어가 먹지 않는 경우가 있는데, 이때는 git-bash 터미널을 이용해 프로젝트 생성 가능

( Visual Studio Code의 터미널에 환경변수가 제대로 잡혀있지 않아 나오는 문제로 생각됨.)

​

​

Vue-cli 프로젝트 실행 방법 :

npm run dev - 위 명령어 외에도 npm run - 명령어를 치면 사용가능한 다양한 옵션이 나옴.

eslint 경고

ESLint는 코딩 컨벤션에 위배되는 코드 및 안티 패턴을 자동으로 검출하는 도구.

​

​

vue-cli 프로젝트에서 유독 이러한 것을 많이 볼 수 있는데, 이를 예방하는 방법은 해당 문서 script의 첫 부분에 다음과 같은 주석을 작성해두는것이다.

/* eslint-disable */

​

이후 다시 프로젝트를 빌드하면 위와 같이 정상적으로 빌드가 완료되는 것을 확인할 수 있다.

​

eslint의 경우 사용자가 코딩 컨벤션을 유지할 수 있도록 도와주는 툴이다보니, 별도로 규정해서 사용하는 컨벤션이 없다면 지키는 것이 좋기는 하지만, 테스트를 할 때는 이 eslint가 컴파일을 방해하거나, 많은 양의 로그를 한번에 출력하기 때문에 비활성화 한 상태로 코딩을 하는 것이 좋아보인다.

​

/* eslint-enable */

추가로 위 코드를 disable 이후 다시 작성하면, disable ~ enable 구간은 코딩 컨벤션 규칙에 대한 검사가 진행되지 않고 이후 작성된 코드에 대해서는 코딩 컨벤션 규칙에 대한 검사가 진행된다.

[출처] Vue.js 스터디 - 2) vue-cli / eslint 경고|작성자 마이와트