2. Atom에 ESLint 설치하기

Vue를 가지고 작업을 할 때 사용하는 IDE를 Atom을 선택을 했습니다.

여기서 추가적으로 필요한 플러그인들이 있는데 이번에는 ESLint라는 플러그인을 Vue 용으로 설치하고 사용해 보도록 하겠습니다.

 ※ 포스팅의 순서가 뒤죽박죽입니다. 이 다음에 Atom을 설치하고 Vue.js 개발환경에 대해 작성하도록 할게요.

ESLint란?

 코딩을 할 때 발생하는 실수를 바로 에러메세지로 표현을 해주고, 이를 자동으로 수정을 해주는 Lint도구 중 하나입니다. 사용자가 어떤 프레임워크를 어떤 언어를 사용하느냐에 따라서 다 다르게 설정을 해줄 수 있습니다. 저는 Vue를 사용하니까 Vue에 알맞는 ESLint를 설치해 보도록 하겠습니다.

설치

 Atom의 플러그인 설치 목록에가서 linter와 linter-eslint  를 다운받습니다.

※ Setting 진입 방법은 [ Ctrl + , ] 를 누르시면 됩니다.

그 다음 해당 프로젝트가 있는 루트의 위치에서 cmd창을 열어줍니다.

npm install eslint-plugin-vue-libs --save-dev

 해당 프로젝트에 Vue용 ESLint플러그인을 설치해줍니다.

설치가 완료되었다면 프로젝트 루트폴더에  .eslintrc 라는 파일을 만들어줍니다. 

{
  "extends": ["plugin:vue-libs/recommended"],
  "env": {
    "mocha": true,
    "node": true
  },
  "rules": {
    "no-console": "off"
  }
}

 만들어진 파일에 위의 내용을 복사에서 붙여넣어 줍니다.

완료

 Atom을 재실행 해줍니다.