소개

Nuxt.js를 이용한 개발이 현재 프런트 엔드에서 인기가 있는 것 같습니다.
Nuxt 앱 등의 JavaScript 프로그램은 ESlint Prettier를 이용하여 개발을 효율화시키는 것이 일반적입니다.

우리 엔지니어가 자주 이용하는 에디터로서는 VS Code가 있습니다만, 이 확장 기능안에 ESlint Prettier용의 것이 준비되어 있어 코드 보존시에 자동으로 성형하는 등의 기능을 가능하게 하고 있습니다.

하지만 npx create-nuxt-app 에서 nuxt 앱을 만들고 선택적으로 ESlint Prettier를 로컬에 설치하고 VSCode 확장 기능을 활성화하면 오류가 발생하지 않습니다.

환경

2020년 1월 24일 시점

Node.js 12.15.0
npm 6.13.4
nuxt 2.11.0
ESlint 6.8.0
Prettier 1.19.1

확장 기능 추가

VS 코드에 ESlint Prettier 확장 기능을 추가하고 활성화하십시오.

Nuxt.js 앱 만들기

Node.js가 설치되지 않은 경우 먼저 설치하십시오.
Node에는 버전 관리 패키지가 있으므로 이를 통해 설치하면 향후 버전 관리가 가능합니다.
mac의 경우 nodebrew, windows에서는 nodist가 유명합니다.

이들의 도입에는 이하 사이트를 참고해 주세요.

【mac】 Nodebrew로 Node 설치하기
【windows】 Nodist를 사용하여 Node.js의 버전 관리를 수행하는 방법 【Nodist 소개】

설치가 완료되면 npx create-nuxt-app 에서 프로젝트를 만듭니다.
그 때 몇 가지 질문을 받지만,

? Choose linting tools 
 (*) ESLint
 (*) Prettier
 ( ) Lint staged files 

을 선택하여 이 프로젝트에 로컬로 설치합니다.

자동 성형 설정

설치 후 자동 성형을 켜기 위해 작업 공간에 설정을 추가합니다.

Ctrl (Command) + Shift + P를 사용하여 명령을 열고 설정 및 입력 Workspace 설정을 표시합니다.


settings 검색 막대에 json을 입력하고 Edit in settings.json 링크에서 json을 엽니다.
아래와 같이 설정합니다.

settings.json

{
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

이제 준비가 끝났다고 생각하고 .js .vue 파일을 수정하지 않으면 ESlint가 오류가 발생합니다.


위 그림과 같이 VSCode의 오른쪽 하단에 있는 ESlint 확장이 오류를 나타냅니다. 여기를 클릭하면 에러 출력을 OUTPUT에서 확인할 수 있으며,

Failed to load plugin 'import' declared in 'test\.eslintrc.js » @nuxtjs/eslint-config': Cannot find module 'eslint-plugin-import'

되어 버립니다.

중요: ESlint의 workingDirectories 설정

작업 공간의 settings.json에 eslint가 움직여야 할 프로젝트의 디렉토리 경로를 설정합니다.

settings.json

{
    "eslint.workingDirectories": ["./test"] // これを追加
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

이제 확장 기능이 제대로 움직입니다.
./test는 프로젝트의 디렉토리 이름을 입력하십시오.

시험에 적당하게 js 파일을 작성해, const (와)과라도 넣어 주면,



그리고 빨간색 물결로 지적되고 problems 탭

Parsing error: Unexpected token

> 1 | const
    |^ eslint [1,6]

그리고 제대로 움직입니다.
또 여러가지 써 저장하면 자동으로 성형해 줍니다.

결론

ESlint를 로컬로 설치한 경우에는 WorlingDirectories를 구성해야 한다는 것이 중요했습니다.
Eslint의 확장 기능의 Overview에도 설정 사항이 실려 있습니다.
VSCode ESlint

이것을 몰랐던 자신은 에러 해결에 힘들었기 때문에 같은 상황에 있는 분에게 참고가 된다고 생각합니다.

참고

VS 코드에 ESLint 설정