Nuxt3 프로젝트에 ESLint, Prettier 적용하기

prettier 설치

eslint-config-prettier eslint-plugin-prettier 등은 설치할 필요 없음

yarn add -D prettier

루트 경로에 .prettierrc 파일을 만들고 아래 내용을 추가한다

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "printWidth": 90,
  "useTabs": false,
  "endOfLine":"auto"
}

사용중인 IDE에서 prettier 설정을 켜준다

원래는 cli 를 통해 간편하게 eslint를 설치했지만..

yarn create @eslint/config

터미널에서 Vue.js를 선택해도 Nuxt와 호환이 되지 않아서 다른 방법을 사용해야 한다(하지만 더 편리해졌다)

Nuxt ESLint 라이브러리를 활용하면 된다

빠른 셋업을 위해 터미널에 아래 명령어를 실행한다

npx nuxi module add eslint

이후 yarn dev를 통해 Nuxt app 을 실행하면 자동으로 eslint.config.mjs 파일이 만들어진다

- 예시

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  // Your custom configs here
)

그리고 eslint 명령어 스크립트를 추가하기 위해 아래 스크립트를 package.json에 추가한다

{
  "scripts": {
    ...
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    ...
  },
}

그리고 IDE(Webstorm 기준)에서 eslint를 인식하게 하기 위해 eslint 라이브러리만 설치한다. 마지막으로 typescript 모듈이 필요하다고 하는 경우 typescript 도 설치해주면 끝이다

+prettier와 호환

- Nuxt ESLint 모듈은 기본적으로 스타일/서식 규칙을 활성화하지 않기에, Prettier와 함께 바로 사용할 수 있다

- 즉, prettier와의 충돌을 걱정하지 않아도 됨

티스토리툴바