ESlint는 formatter의 꿈을 꾸는가

Linter도 꿈을 꾸나?

Nuxt 프레임워크는 전용 ESlint 모듈을 제공한다. Nuxt ESlint라는 것인데, 이번에 나를 위한 CMS를 구축하려고 대시보드 웹 앱을 Nuxt 프레임워크 기반으로 만들게 되면서 CLI로 프로젝트를 생성할 때 함께 설치하게 되었다.

Prettier만 써오던 나에게 ESlint의 설정은 생소하고 어려웠다. 그러다 antfu가 만든 ESlint configuration 레포지토리를 알게 되었다.

(antfu는 자신의 글에서 Prettier를 사용하지 않고 ESlint로 포맷팅까지 하는 이유에 대해 밝힌 적이 있다.)

Nuxt ESlint가 제공하는 기본적인 설정에 antfu의 설정을 병합할 수 있다. 아래와 같은 코드로 설정이 가능하다.

// eslint.config.mjs

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

export default withNuxt(
  antfu({
    vue: true,
    typescript: true,
    formatters: {
      css: true,
      html: true,
      markdown: 'prettier',
    },
  }),
)

이건 나의 설정 코드를 그대로 옮긴 것인데, 사실 vue, typescript 같은 필드는 필요하지 않다고 생각했다. 그런데 WebStorm의 저장 액션으로 ESlint fix를 아무리 설정해도 코드 포맷팅이 되질 않았다. 그래서 추가했고, formatter 필드 내부의 css, html, markdown과 같은 필드들은 사용하지 않으면 해당 언어의 포맷팅이 전혀 되지 않으므로, 해당 언어로 코드를 쓴다면 무조건 추가해주는 게 좋다.

이 과정에서 계속 ESlint의 컴파일 에러(?)가 나곤 했는데 위 설정과 더불어 꼭 해줘야 하는 설정이 있었는데 빼먹어서 그런 거였다. Nuxt의 전체적인 설정을 아래와 같이 해주어야 한다.

// nuxt.config.ts
import tailwindcss from '@tailwindcss/vite'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [
    '@nuxt/fonts',
    '@nuxt/test-utils',
    '@pinia/nuxt',
    'pinia-plugin-persistedstate/nuxt',
    '@nuxt/eslint',
  ],
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  compatibilityDate: '2025-05-15',
  vite: { plugins: [tailwindcss()] },
  eslint: {
    config: {
      standalone: false,
    },
  },
})

이 코드는 내 프로젝트의 Nuxt configuration 코드를 그대로 옮긴 것이다. 이 코드의 마지막 부분에 eslint 필드로 추가된 standalone 필드값을 false 로 꼭 추가해주어야 한다. 이 설정을 통해 Nuxt ESlint는 커스텀이 가능한 상태가 되고 그래야 antfu의 설정을 적용할 수 있다. 이 설정이 없으면 ESlint의 콘솔에서 해당 설정이 빠졌다고 친절하게 알려준다.

antfu의 ESlint 설정을 써보니 놀라운 게, import 코드의 순서도 자동으로 보장해주고, vue 템플릿 코드의 구조도 알아서 잡아주었다. Prettier로도 이게 불가능하진 않을 것 같은데, ESlint로 이정도까지 포맷팅이 가능하다면 ESlint만 있어도 충분하다는 생각이 든다.

그동안 Biome, dprint 등 Prettier & ESlint 조합보다 더 모던한 툴을 사용해보려고 애썼었다. Biome는 아직 vue 템플릿 코드에 대한 지원이 미비하고, dprint는 WebStrom에서 사용할 때 계속 에러가 나는 현상이 있었다. 결국 다시 이전에 쓰던 조합으로 돌아왔는데, 이젠 ESlint만 써도 될 것 같다는 생각이 든다.

ESlint의 설정은 아주 세세한 부분까지 설정이 가능한 것 같다. 나는 세세한 룰은 거의 파악하지 못했다. 아마 사용하면서 자동으로 포맷팅 되는 영역을 직접 파악하며 점차 알아가야 할 것 같다. 아래 링크는 antfu의 ESlint 설정을 볼 수 있는 웹 페이지다. 이런 식으로 설정을 공유하고 하나로 써서 코드 스타일을 통일하는 게 같은 언어, 같은 코드 베이스를 다루는 팀원과의 협업에서는 매우 중요할 것 같다.

ESLint Config Inspector

#ESlint #Prettier #Linter