Nuxt 3 에서 eslint, prettier 사용 방법

Nuxt2 처럼 eslint 와 prettier 관련 패키지를 추가하고 환경 설정을 해서 해결하였습니다.

설치한 패키지는 아래와 같습니다. 일단 Typescript는 사용하지 않아서 관련 패키지는 제외하였습니다.

"devDependencies": {
    "eslint": "^8.23.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nuxt": "^3.2.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.4.0",
    "nuxt": "3.0.0-rc.8",
    "prettier": "^2.7.1",
    "vite-plugin-eslint": "^1.8.1"
  }

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt';
import eslintPlugin from 'vite-plugin-eslint';

export default defineNuxtConfig({
	vite: {
		plugins: [eslintPlugin()],
	},
});

.eslintrc.js

module.exports = {
	root: true,
	env: {
		browser: true,
		node: true,
	},
	extends: ['eslint:recommended', 'plugin:nuxt/recommended', 'plugin:vue/vue3-recommended', 'plugin:prettier/recommended'],
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-debug': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-unused-vars': 'off',
		'prettier/prettier': [
			'error',
			{
				singleQuote: true,
				semi: true,
				useTabs: true,
				tabWidth: 4,
				trailingComma: 'all',
				printWidth: 160,
				bracketSpacing: true,
				arrowParens: 'avoid',
				endOfLine: 'auto',
			},
		],
	},
};

Nuxt3 는 설정부터 시작해서 바뀐 점이 많네요. 관련해서 강의가 생겼으면 좋겠습니다.

안녕하세요, Nuxt 최신 버전으로 프로젝트를 생성하실 때도 아래와 같이 필요한 도구를 설정하실 수 있습니다 :)