오늘의 명언
“ 당신은 소프트웨어 품질을 추구할 수도 있고, 포인터 연산을 할 수도 있다. 그러나 두 개를 동시에 할 수는 없다. ”
-
베르트랑 마이어 (Bertrand Meyer)
300x250
Eslint & Prittier 라이브러리 설치하기
이번 포스팅에서는 Nuxt3에서 Eslint 와 Prittier 관련 라이브러리 설치와 .eslintrc.js 설정하는 방법
또는 타입스크립트 환경을 위한 tsconfig.json 옵션 설정에 대해서 간략하게 설명해볼까 합니다.
package.json에서 Eslint와 Prettier 관련 모듈과 Typesciprt에 관한 Eslint plugin을 설치합니다.
"devDependencies": {
"@nuxt/devtools": "latest",
"@nuxt/types": "^2.17.1",
"@nuxtjs/eslint-config-typescript": "^12.0.0",
"@types/node": "^18.16.19",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"eslint": "^8.44.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "8.8.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-nuxt": "^4.0.0",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-vue": "^9.15.1",
"prettier": "^2.8.8"
}
설치된 라이브러리에 대해서 설명을 해보자면.
- @nuxt/types : Nuxt.js의 타입 정의 파일입니다. TypeScript로 Nuxt.js 애플리케이션을 개발할 때 유용한 타입 정보를 제공합니다.
- @nuxtjs/eslint-config-typescript : Nuxt.js TypeScript용 ESLint 구성입니다. Nuxt.js 프로젝트에서 TypeScript와 함께 사용되는 ESLint 규칙과 설정을 제공합니다.
- @types/node : Node.js의 타입 정의 파일입니다. TypeScript로 Node.js 애플리케이션을 개발할 때 유용한 타입 정보를 제공합니다.
- @typescript-eslint/eslint-plugin: TypeScript용 ESLint 플러그인입니다. TypeScript 코드에 대한 추가적인 검사 및 규칙을 제공합니다.
- @typescript-eslint/parser : TypeScript용 ESLint 파서입니다. TypeScript 코드를 분석하고 이를 ESLint 규칙과 함께 사용할 수 있도록 지원합니다.
- eslint : JavaScript와 TypeScript를 위한 Linter인 ESLint입니다. 코드 품질을 유지하고 일관성 있는 코딩 스타일을 적용하는 데 사용됩니다.
- eslint-config-airbnb-base : Airbnb에서 사용하는 JavaScript 스타일 가이드인 ESLint 구성입니다. 일관성 있는 코드 스타일을 적용하기 위해 사용됩니다.
- eslint-config-prettier : Prettier와 ESLint의 충돌을 방지하기 위한 ESLint 구성입니다. Prettier가 관리하는 규칙과 ESLint 규칙이 충돌하지 않도록 해줍니다.
- eslint-plugin-import : import 문에 대한 ESLint 규칙을 제공하는 플러그인입니다. 모듈 import와 관련된 규칙을 설정하고 검사할 수 있습니다.
- eslint-plugin-nuxt : Nuxt.js 프로젝트에서 사용할 수 있는 Nuxt.js 관련 ESLint 플러그인입니다. Nuxt.js 애플리케이션에 대한 추가적인 규칙을 제공합니다.
- eslint-plugin-prettier : Prettier를 ESLint와 통합하여 코드 포맷팅을 자동화하는 플러그인입니다. ESLint 규칙과 Prettier 규칙을 함께 사용하며, ESLint에서 Prettier 규칙을 검사하고 자동으로 포맷팅을 적용합니다.
- eslint-plugin-vue : Vue.js 프로젝트에서 사용할 수 있는 Vue.js 관련 ESLint 플러그인입니다. Vue.js 애플리케이션에 대한 추가적인 규칙을 제공합니다.
- prettier : 자동 코드 포맷팅 도구인 Prettier입니다. 프로젝트에서 일관된 코드 스타일을 유지하고, 들여쓰기, 따옴표, 콤마 등의 스타일을 설정에 따라 자동으로 조정해줍니다.
eslintrc.js 파일을 작성해보자.
설치했던 라이브러리들을 조합하여 TypeScript에 대한 Eslint 규칙과 Paser 및 Prettier 코드 스타일 포맷팅을 적용해봤습니다. 제가 주로 사용하는 옵션으로 설정하여 주석으로 간략하게 설명을 적어놨습니다. 한번 보시고 참고하시면 됩니다.
// .eslintrc.js
module.exports = {
// 프로젝트의 루트 디렉토리에서 .eslintrc.js 파일을 찾음
root: true,
env: {
// 코드가 실행되는 환경 설정
browser: true, // 브라우저 환경에서 실행
node: true // 노드 환경에서 실행
},
parser: 'vue-eslint-parser', // Vue.js 코드를 분석할 때 사용할 파서 지정
// 파서에 대한 옵션 설정
parserOptions: {
parser: '@typescript-eslint/parser', // TypeScript 코드를 파싱하는 데 사용할 파서 지정
sourceType: 'module' // ECMAScript 모듈 형식으로 코드 작성
},
// 사용할 ESLint 플러그인 목록 - Typescript
plugins: ['@typescript-eslint', 'vue'],
// 사용할 ESLint 확장 구성 목록
extends: [
'airbnb-base', // airbnb에서 사용하는 JavaScript 스타일 가이드
'eslint:recommended', // ESLint에서 권장하는 기본 규칙
'plugin:nuxt/recommended', // Nuxt.js 관련 규칙
'plugin:vue/recommended', // Vue.js 관련 규칙
'plugin:prettier/recommended', // Prettier와 ESLint의 충돌을 방지하기 위한 규칙
'plugin:@typescript-eslint/eslint-recommended', // TypeScript ESLint 규칙
'@nuxtjs/eslint-config-typescript' // Nuxt.js 프로젝트에서 TypeScript와 함께 사용되는 ESLint 규칙
],
rules: {
// 사용자 정의 규칙 설정
'import/extensions': 'off', // 파일 확장자를 명시적으로 지정하지 않아도 되도록 함
'import/no-unresolved': 'off', // 해결할 수 없는 import 경로에 대한 경고 무시
'import/no-extraneous-dependencies': 'off', // package.json에 없는 패키지를 import할 때 에러 무시
'import/prefer-default-export': 'off', // 단일 export가 아니어도 되도록 함
'vue/multi-word-component-names': 'off', // Vue 컴포넌트 이름에 대한 규칙 완화
'no-shadow': 0, // 변수명 중복 사용을 허용
'@typescript-eslint/no-shadow': 'error', // TypeScript에서 변수명 중복 사용 에러
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 프로덕션 환경에서 콘솔 사용 금지
'no-debug': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 프로덕션 환경에서 디버그 관련 문제 발생 시 에러
'no-unused-vars': 'off', // 사용되지 않는 변수에 대한 경고 무시
// Prettier 코드 스타일 설정
'prettier/prettier': [
'error',
{
arrowSpacing: ['error', { before: true, after: true }], // 화살표 함수의 스페이싱 설정
singleQuote: true, // 작은따옴표 사용
semi: false, // 세미콜론 사용하지 않음
useTabs: false, // 탭 대신 스페이스 사용
tabWidth: 2, // 탭의 너비
trailingComma: 'none', // 후행 콤마 사용하지 않음
printWidth: 80, // 한 줄의 최대 길이
bracketSpacing: true, // 객체 리터럴의 괄호 사이에 공백 사용
arrowParens: 'always', // 화살표 함수의 매개변수 괄호 사용
endOfLine: 'auto' // 플랫폼에 맞게 개행문자 설정
}
],
'global-require': 0 // require로 이미지 경로를 지정할 때 발생하는 에러 무시
}
}
TypeScript 설정, tsconfig.json을 작성해보자.
기본적인 구성을 토대로 tsconfig.json을 작성해봤습니다. 여기서 extends 보시면 .nuxt 폴더 tsconfig.json을 상속받는 옵션이 되어있습니다. Nuxt3는 빌드 시스템에서 자동으로 생성되는 .nuxt 디렉토리를 사용하는데 이 폴더에는 빌드와 런타임에 필요한 파일들이 포함되어있습니다 거기서 빌드 시스템에 의해 자동으로 생성되는 TypeScript 설정 파일을 적용하기 위해서 설정합니다.
(기본적으로 nuxt3 설치하면 자동으로 작성되어있으니 그 위에 나머지 옵션이나 설정을 작성하시면됩니다.)
{
// TypeScript 컴파일러 옵션 설정
"compilerOptions": {
"target": "esnext", // 컴파일 대상을 ESNext로 설정
"module": "esnext", // 모듈 형식을 ESNext로 설정
"moduleResolution": "node", // 모듈 해결 방식을 Node.js 스타일로 설정
"lib": [
"esnext",
"esnext.asynciterable",
"dom"
], // 사용할 라이브러리 설정
"noImplicitThis": false, // 암묵적인 'this' 타입 체크를 사용하지 않음
"experimentalDecorators": false, // 실험적인 데코레이터 사용 비활성화
"resolveJsonModule": true, // JSON 모듈 해결 활성화
"esModuleInterop": true, // ES 모듈 형식의 상호 운용성을 위해 CommonJS를 ES 모듈로 변환
"allowJs": true, // JavaScript 파일도 컴파일에 포함
"checkJs": false, // JavaScript 파일의 타입 체크를 비활성화
"sourceMap": true, // 소스 맵 생성
"strict": true, // 엄격한 타입 체크 활성화
"noEmit": true, // 출력 파일 생성 비활성화
"baseUrl": ".", // 상대 경로를 기준으로 모듈 탐색 시작 위치 설정
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
}, // 모듈 경로 별칭 설정
"typeRoots": ["types"], // 타입 정의 파일의 위치 설정
"types": [
"@nuxt/types",
"@types/node",
], // 사용할 타입 정의 설정
"exclude": [
"node_modules"
], // 컴파일 제외할 파일 및 폴더 설정
"include": [
"/**/*.ts",
"**/*.vue"
] // 컴파일에 포함할 파일 및 폴더 설정
},
"extends": "./.nuxt/tsconfig.json" // 다른 tsconfig 파일을 확장하여 사용
}
인텔리제이 (IntelliJ) 에서 Eslint 활성화
File - Settings에서 아래와 같이 설정합니다. Automatic 옵션으로 루트 경로에 작성해둔 .eslintrc.js를 자동으로 찾아서 구성합니다.
이전 포스팅에서는 Nuxt3 설치 하는 방법과 기본적인 폴더구성 또는 Layout과 pages를 설정해봤는데 이번에는 이어서 Eslint와 Prttier 코드 포맷팅 또는 타입스크립트 설정을 하여 프로젝트를 시작하기 위한 가장 기초적인 작업을 진행해봤습니다.
이제 기초가 어느정도 완료되었다고 생각합니다. Nuxt2에서 Nuxt3로 마이그레이션 하면서 Eslint든 prettier등 오래된 버전이 많아서 버전 최신화하면서 호환성 찾느라 힘들었습니다.. 괜히 고생해서 버전 수정하지마시고 편하게 위에 package.json 버전으로 설치하시면 됩니다. 그러면 다음 포스팅으로 찾아뵙겠습니다.!
반응형
잘못된 내용이 있으면 댓글 부탁드립니다. 감사합니다.
