[ Nuxt ] Nuxt에 ESLint 및 prettier 환경 설정 | prettier 옵션 정리

ESLint

• 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구
• JS코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구 (에러 표시)
• 다양한 방식으로 구현할 수 있는 코드 방식을 일관성있게 구현할 수 있도록 잡아준다.
• 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있다.

ESLint Module - Nuxt ESLint

 

(공식 문서를 참고하여 적용했습니다)

 

 

기본 설정

1. 설치

npm install -D @nuxt/eslint eslint typescript

타입스크립트를 사용하는 경우 typescript도 설치한다.

 

 

2. nuxt.config.ts 파일 설정

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
  eslint: {
    // options here
  }
})

모듈에 @nuxt/eslint 등록

 

 

3. eslint.config.mjs 파일 생성

자동 생성되었을 경우 생략 가능

 

 

4. vscode 설정

ESLint 익스텐션 추가

 

settings.json 편집

// ESLint의 새로운 설정 방식인 Flat Config를 활성화
"eslint.useFlatConfig": true

• Flat Config란, 기존 .eslintrc 파일 기반 설정 방식 대신 더 단순하고 유연한 방식으로 설정을 관리하기 위해 ESLint에서 도입된 새로운 방식이다.
• 기본적으로 ESLint는 .eslintrc 파일을 기반으로 작동하기 때문에, eslint.useFlatConfig 옵션을 true로 설정해줘야 새로운 Flat Config 방식으로 동작하게 된다.

 

 

6. package.json 편집

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

• lint 에러 확인 → npm run lint
• lint 에러 자동 수정 → npm run lint:fix

 

 

Config 커스텀

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

export default withNuxt().override("nuxt/typescript/rules", {
  // Your custom configs here
  rules: {
    // ...Override rules
    "@typescript-eslint/no-unused-vars": "off", // 선언만 해놓고 사용 안 하기
  },
});

 

 

예외 처리

Ignore Files - ESLint - Pluggable JavaScript Linter

• Inside of your eslint.config.js file
• On the command line using -ignore-pattern

export default withNuxt(eslintPluginPrettierRecommended, {
  ignores: ["node_modules", "lib", "presets"],
})

 

 

 

---

 

prettier

• 일관적인 코드 스타일을 유지할 수 있게 도와주는 툴
• 줄 바꿈, 공백, 들여쓰기 등과 같은 스타일 교정

 

1. 설치

npm install prettier

 

 

2. .prettierrc 파일 생성

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "consistent",
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
}

 

 

prettier option

Prettier · Opinionated Code Formatter

 

 

옵션명	옵션 타입	기본 값	설명	비고
printWidth	int	80	코드 작성 시 한 줄에 작성할 최대 글자 수 (초과 시 자동 줄바꿈)	• 80 이상을 권장 • 최대 100 ~ 120 이하를 권장
tabWidth	int	2	탭 너비
useTabs	bool	false	들여쓰기 공백을 스페이스 대신 탭으로 처리
semi	bool	true	문장 끝 세미콜론 사용
singleQuote	bool	false	큰따옴표(””) 대신 작은 따옴표(’’) 사용
quoteProps	as-needed, consistent, preserve	“as-needed”	객체 속성에 쿼테이션 적용 방식	• as-needed: 필요한 경우에만 • consistent: 항상 • preserve: 입력 시에만
jsxSingleQuote	bool	false	JSX에 큰따옴표 대신 작은 따옴표 사용
trailingComma	all, es5, none	“all”	여러 줄 코드 작성 시 후행 콤마 사용 방식	• all: 전부 • es5: 객체, 배열 등 • none: 적용 안 함
bracketSpacing	bool	true	객체 리터럴에서 괄호 사이 공백 삽입	ex) { foo: bar }
bracketSameLine	bool	false	여러 줄 HTML 요소에서 >을 마지막 속성과 같은 줄에 사용	• self-closing elements는 해당 X
arrowParens	always, avoid	"always”	화살표 함수 괄호 사용	ex) (x) => x
rangeStart	int	0	포매팅을 적용할 파일의 시작 위치
rangeEnd	int	Infinity	포매팅을 적용할 파일의 끝 위치
parser	string	None	사용할 parser	자동 지정됨
filepath	string	None	parser를 유추할 수 있는 파일명
requirePragma	bool	false	파일 상단에 특정 주석(pragma) 사용	/** * @prettier */
proseWrap	always, never, preserve	"preserve”	Markdown, JSDoc 등의 서술형 텍스트 자동 줄 바꿈 처리 방식	• always: printWidth 초과 시 줄 바꿈 • never: 무조건 한 줄로 사용 • preserve: 사용자가 줄 바꿈 한 부분만 유지
htmlWhitespaceSensitivity	css, strict, ignore	"css”	HTML 공백 감도
vueIndentScriptAndStyle	bool	false	vue 파일의 <script>, <style> 태그 내부 코드 들여쓰기 여부
endOfLine	lf, crlf, cr, auto	“lf”	파일에서 줄의 끝 문자 처리 방식 (운영 체제 별 차이)	• lf: \\n • crlf: \\r\\n • cr: \\r • auto: 자동 감지
embeddedLanguageFormatting	off, auto	“auto”	내장 언어 포맷 여부
singleAttributePerLine	bool	false	HTML, JSX, Vue 등의 태그에서 각 속성을 별도의 줄에 배치 여부

 

 

tailwind 설정

npm install --save prettier-plugin-tailwindcss

 

.prettierrc 파일에 plugins 추가

  "plugins": ["prettier-plugin-tailwindcss"]

 

 

---

 

그 외 설정

자동 설정

eslint 버전이 9 이상일 경우만 가능

npm i -D eslint-config-prettier eslint-plugin-prettier

eslint에 prettier configuration을 추가하기 위해 설치 (eslint와 prettier 설정의 충돌을 피하기 위해)

 

import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
// ESLint 설정 확장
import withNuxt from "./.nuxt/eslint.config.mjs";

export default withNuxt(eslintPluginPrettierRecommended);

 

혹시나 안된다면 settings.json을 확인해보자

{
	// ...
	"eslint.enable": true,
}

 

 

 

Delete ␍ eslint (prettier/prettier)

  rules: {
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
      },
    ],
  },

 

 

The template root requires exactly one element.

vue의 template 하위에 여러 개의 최상단 태그를 사용할 경우 생기는 에러

vue3부터는 여러 개의 태그 사용이 허용되기 때문에 원한다면 해당 규칙을 off 해도 좋다.

  rules: {
    "vue/no-multiple-template-root": "off",
  },