Nuxt3 프로젝트를 시작하고 있나요?

이 포스트에서는 Eslint과 Stylelint을 소개합니다. 이는 Nuxt3 Ecosystem에서 프로젝트를 시작하기 전에 설정하기 좋은 Nuxt3 모듈입니다. 저는 설치부터 설정까지 간략하게 다룰 예정입니다.

Eslint

Eslint는 코드 품질을 확인하고, 코드 스타일을 통일하고, 버그를 사전에 방지하고, 코드 가독성을 향상시키는 도구입니다. Prettier와 함께 사용하는 것이 일반적이지만, Nuxt3에서는 Eslint만 사용하는 것이 좋습니다.

1. Eslint 설치

먼저, Nuxt3 프로젝트에서 Eslint를 사용하려면, @nuxt/eslint-config 모듈을 사용해야 합니다. 또한, Typescript를 사용하는 경우, @nuxtjs/eslint-config-typescript도 설치해야 합니다. 기본적인 @eslint 모듈도 설치해야 합니다. 이러한 모듈을 설치하려면, 다음 명령어를 사용하세요.

// bun
bun add -D @nuxt/eslint-config @nuxtjs/eslint-config-typescript @eslint

// yarn
yarn add -D @nuxt/eslint-config @nuxtjs/eslint-config-typescript @eslint

// npm
npm install -D @nuxt/eslint-config @nuxtjs/eslint-config-typescript @eslint

2. Eslint 설정

위에서 언급한 것처럼 설치한 후, 프로젝트의 루트 폴더에 .eslintrc.js 파일을 생성하고 다음 설정을 추가합니다.

// .eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    '@nuxt/eslint-config',
    '@nuxtjs/eslint-config-typescript'
  ],
  rules: {
    // add your custom rules here
  } 
}

위의 설정을 통해, Nuxt3 프로젝트에서 Eslint를 사용할 수 있습니다. 또한, package.json에 다음 스크립트를 추가하여 Eslint를 실행할 수 있습니다.

// package.json

{
  "scripts": {
    "lint:eslint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."
  }
}

`Stylelint`

Stylelint는 CSS 코드 품질을 검사하고, 코드 스타일을 통일하고, 버그를 사전에 방지하고, 코드 가독성을 향상시키는 도구입니다. 프로젝트에 CSS 또는 SCSS 파일이 포함되어 있으면, Stylelint를 사용하는 것이 좋습니다.

1. Stylelint 설치

Stylelint를 사용하려면, @nuxtjs/stylelint-module 모듈을 설치해야 합니다. 또한, 다음 모듈도 설치해야 합니다: stylelint, postcss-html, stylelint-config-recommended-scss, stylelint-config-recommended-vue.

// bun
bun add -D @nuxtjs/stylelint-module stylelint postcss-html stylelint-config-recommended-scss stylelint-config-recommended-vue

// yarn
yarn add -D @nuxtjs/stylelint-module stylelint postcss-html stylelint-config-recommended-scss stylelint-config-recommended-vue

// npm
npm install -D @nuxtjs/stylelint-module stylelint postcss-html stylelint-config-recommended-scss stylelint-config-recommended-vue

2. Stylelint 설정

위에서 언급한 것처럼 모듈을 설치한 후, nuxt.config.ts 파일을 다음과 같이 설정합니다.

// nuxt.config.ts

export default defineNuxtConfig({
  // ...
  modules: [
    '@nuxtjs/stylelint-module'
  ],
  // Nuxt3 프로젝트를 시작할 때, stylelint를 자동으로 실행하려면, 다음과 같이 설정합니다.
  stylelint : {
    lintOnStart: true
  },
  // ...
})

추가 설정은 @nuxtjs/stylelint-module에서 확인할 수 있습니다. 그 후, 다음과 같이 .stylelintrc.js 파일을 생성하여 설정을 추가합니다.

// .stylelintrc

{
  "extends": [
    "stylelint-config-recommended-scss",
    "stylelint-config-recommended-vue"
  ],
  "overrides": [
    {
      "files": ["*.scss", "*.vue", "**/*.vue"],
      "rules": {
        // 여기에 커스텀 규칙을 추가하세요.
      }
    }
  ]
}

위와 같이 설정한 후, .stylelintcache를 무시하도록 .gitignore 파일에 다음을 추가합니다.

// .gitignore

.stylelintcache

또한, package.json에 다음 스크립트를 추가하여 Stylelint를 실행할 수 있습니다.

// package.json

{
  "scripts": {
    "lint:stylelint": "stylelint --fix --ignore-path .gitignore ."
  }
}

이제 프로젝트를 만들어봅시다!

오늘은 Eslint와 Stylelint을 설정하는 방법을 살펴봤습니다.

다음에 봐요!