패키지 설치

• eslint - JavaScript와 TypeScript를 위한 Linter인 ESLint입니다. 코드 품질을 유지하고 일관성 있는 코딩 스타일을 적용하는 데 사용됩니다.
• prettier - 자동 코드 포맷팅 도구인 Prettier입니다. 프로젝트에서 일관된 코드 스타일을 유지하고, 들여쓰기, 따옴표, 콤마 등의 스타일을 설정에 따라 자동으로 조정해줍니다.
• eslint-config-prettier - Prettier와 ESLint의 충돌을 방지하기 위한 ESLint 구성입니다. Prettier가 관리하는 규칙과 ESLint 규칙이 충돌하지 않도록 해줍니다.
• eslint-plugin-prettier - Prettier를 ESLint와 통합하여 코드 포맷팅을 자동화하는 플러그인입니다. ESLint 규칙과 Prettier 규칙을 함께 사용하며, ESLint에서 Prettier 규칙을 검사하고 자동으로 포맷팅

Vue 를 위한 패키지

• eslint-plugin-vue - Vue.js 프로젝트에서 사용할 수 있는 Vue.js 관련 ESLint 플러그인입니다. Vue.js 애플리케이션에 대한 추가적인 규칙을 제공합니다.
• eslint-plugin-nuxt - Nuxt.js 프로젝트에서 사용할 수 있는 Nuxt.js 관련 ESLint 플러그인입니다. Nuxt.js 애플리케이션에 대한 추가적인 규칙을 제공합니다.

TypeScript 를 위한 패키지

• @typescript-eslint/eslint-plugin - TypeScript용 ESLint 플러그인입니다. TypeScript 코드에 대한 추가적인 검사 및 규칙을 제공합니다.
• @typescript-eslint/parser - TypeScript용 ESLint 파서입니다. TypeScript 코드를 분석하고 이를 ESLint 규칙과 함께 사용할 수 있도록 지원합니다.
• @nuxtjs/eslint-config-typescript - Nuxt.js TypeScript용 ESLint 구성입니다. Nuxt.js 프로젝트에서 TypeScript와 함께 사용되는 ESLint 규칙과 설정을 제공합니다.

실습

1. 패키지 설치

   npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue eslint-plugin-nuxt @typescript-eslint/eslint-plugin @typescript-eslint/parser @nuxtjs/eslint-config-typescript
   

2. 패키지 설치 후 npx eslint --init 명령어로 초기화 진행.

   

   • .eslintrc.cjs 파일

3. package.json 명령어 추가

   "scripts": {
   	"build": "nuxi build",
     "dev": "nuxi dev",
     "generate": "nuxi generate",
     "preview": "nuxi preview",
     "postinstall": "nuxi prepare",
     **"lint": "eslint \\"**/*.{ts,tsx,vue,js}\\" --fix",
     "lint-eslint": "eslint --ignore-path .gitignore **/*{ts,tsx,vue,js,json} --fix",
     "lint-prettier": "prettier --write \\"**/*.(ts|tsx|vue|js|json)\\""**
   },
   

   npm run lint 명령어 테스트

VSCode ESLint 설정