[Vue 3 + Quasar 2.0] 프론트엔드 개발자에게 필수! ESLint + Prettier 사용하기

 

 

ESLint란?

Lint는 보푸라기라는 뜻인데 프로그래밍 쪽에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다. 즉 ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미한다. 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일을 유지(포맷팅)하여 개발자가 쉽게 읽도록 코드를 만들어준다.

 

나는 SSAFY 1학기 프로젝트에서 ESLint를 사용했다고 생각했는데, 사실 확장 프로그램만 설치하고 configuration 해주지 않아서 결국 아무것도 사용하지 않은 꼴이 되었다 ㅋㅋㅋㅋ

 

나와 같은 실수를 하지 않으려면 글에서 서술하듯

 

1. ESLint, Prettier npm install

2. VSCode 관련 확장 프로그램 설치

3. VSCode settings.json 설정

4. .eslintrc 설정

5. VSCode 재시작

 

이 단계를 거쳐 ESLint + Prettier를 올바르게 사용해보자. 무엇보다 좋은 코드를 작성하고 가독성을 높이는 가장 좋은 도구이니까!

 

Quasar CLI로 프로젝트를 구성할 때 ESLint 설정하기

글을 쓰기에 앞서 밝혀둘 것은 이것은 Quasar CLI로 프로젝트를 구성할 때 ESLint를 함께 설치한 것이 아니라, 따로 설치하는 형태로 사용하는 방법을 설명한 글이다. CLI로 함께 설치할 수도 있으나 나중에 Linter를 사용하고 싶을 때 특히 유용할 수 있다.

 

1. ESLint와 Prettier 라이브러리를 npm install한다.

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

 

 

2. VSCode 확장프로그램 'ESLint'와 'Prettier'를 설치한다.

 

1. ESLint

 

코드 편집기에서 바로 ESLint 검사 결과를 표시해준다. 오류일 경우 빨간줄, 경고일 경우 노란줄을 표시하고 마우스를 올리면 어떤 오류인지 알려준다.

 

2. Prettier

 

VSCode에서 제공하는 Prettier 설정을 제공한다.

 

3. VSCode settings.json에 eslint 관련 설정이 모두 있는지 확인하고, 없으면 추가한다. 

Configure VS Code | Quasar Framework

  "eslint.validate": [
    "html",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "markdown"
  ],
  
  "eslint.workingDirectories": [{ "mode": "auto" }],
  
  "eslint.alwaysShowStatus": true,
  
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  
  "editor.defaultFormatter": "esbenp.prettier-vscode",

 

1. eslint.validate

 

eslint가 적용될 파일의 언어 형식을 추가한다.

 

2. eslint.codeActionsOnSave

 

저장할 때마다 자동으로 포맷팅해준다.

 

3. defaultFormatter

 

실무에서는 .prettierrc나 .eslintrc등 설정 파일이 있지만 만약 그런 파일이 없을 경우 prettier 설정을 vscode에서 적용하는 기본 형식으로 적용하겠다는 말이다.

 

4. quasar 프로젝트 내 .eslintrc.js 파일에 ESLint 설정을 입력한다.

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
	root: true,
	extends: [
		'plugin:vue/vue3-essential',
		'eslint:recommended',
		'@vue/eslint-config-prettier',
	],
	// "parser": "@babel/eslint-parser",
	env: {
		node: true,
        browser: true,
	},
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
	},
};

 

1. root 옵션

 

ESLint를 설정할 때는 여러 개의 설정 파일을 사용할 수 있는데요. 특히 Monorepo와 같이 하나의 코드 저장소(repository)에서 여러 개의 프로젝트가 공존하는 경우 매우 유용합니다.

ESLint는 현재 린트(lint) 대상의 파일이 위치한 폴더 안에 설정 파일이 있는지 우선적으로 확인해보고 없으면 그 상위 폴더를 한 단계 씩 거슬러 올라가면서 설정 파일을 찾게되는데요. root 옵션이 true로 설정되어 있는 설정 파일을 만나면 더 이상 상위 폴더로 올라가지 않습니다.

예를 들어, 프로젝트의 별 설정 파일에는 root 옵션을 false로 설정하고, 코드 저장소 최상위 경로에는 root 옵션을 true로 설정하면 코드 저장소의 공통 설정과 프로젝트 별 특화 설정을 분리해서 관리할 수 있어서 편리합니다.

 

(출처: https://www.daleseo.com/eslint-config/)

ESLint 상세 설정 가이드

 

2. extends 옵션

 

공개된 다양한 ESLint 옵션들을 가져와서 사용할 수 있다.

 

3. rules 옵션

 

extends 옵션의 설정들을 덮어쓸 수 있다. 따라서 규칙 하나하나를 세세하게 제어하고 싶을 때 사용한다.

아래와 같은 공식 문서를 참고하여 자유롭게 옵션을 제어해보자. 하지만 내가 당분간 사용할 프로젝트의 수준에서는 기존 라이브러리를 사용하는 것이 합리적으로 보인다.

https://eslint.org/docs/latest/rules/

Rules - ESLint - Pluggable JavaScript Linter

 

4. no-console 관련 설정

 

프로젝트를 하다 보면 console.log()는 필수인데, 사실 JavaScript는 브라우저용 언어이기 때문에 그것을 좋아하지 않아 에러를 띄운다고 한다. 이 에러를 띄우지 않기 위한 설정도 추가해준다.

 

5. VSCode 재시작

VSCode를 재시작 해주면 이제 ESLint + Prettier를 사용할 준비가 모두 완료되었다.

 

6. 검사하는 법

ESLint 확장 프로그램을 설치해주었기 때문에 별도의 명령어로 검사할 필요 없이 저장 시 자동으로 교정된다.

 

 

Ref

https://poiemaweb.com/eslint

ESLint | PoiemaWeb

https://quasar.dev/quasar-cli-webpack/linter

ESLint | Quasar Framework

https://velog.io/@njh7799/Eslint-Prettier-%EC%84%A4%EC%A0%95-%EB%B0%A9%EB%B2%95

Eslint & Prettier 설정 방법 (feat. VS Code)

 

*글에 틀린 내용, 부족한 내용이 있다면 댓글로 알려주세요 :)