Angular + Prettier + Eslint

[공지사항] 푸샤 깃허브 블로그 업데이트 사항

Eslint 및 Prettier 관련 라이브러리 설치

# ESLint 설치
npm install --save-dev eslint

# 추가적인 플러그인들 설치
npm install --save-dev @typescript-eslint/eslint-plugin eslint-plugin-prettier

# Prettier 와 Prettier-ESLint dependencies 설치
npm install --save-dev prettier prettier-eslint eslint-config-prettier

• eslint: ESLint 핵심 린팅(linting) 라이브러리
• @typescript-eslint/eslint-plugin: 타입스크립트에 특정한 eslint 규칙을 포함시킨 플러그인
• prettier: 프리티어(prettier) 핵심 라이브러리
• eslint-config-prettier: prettier와 충돌할 수 있는 Eslint 규칙을 비활성화 시켜줍니다
• eslint-plugin-prettier: Prettier를 Eslint 규칙으로 실행시켜줍니다.

Eslint 파일 설정

.eslintrc
{
  "parser": "@typescript-eslint/parser", // ESLint 파서를 지정합니다.
  "extends": [
    "plugin:@typescript-eslint/recommended", // @typescript-eslint/eslint-plugin의 권장 규칙을 사용합니다.
    "plugin:prettier/recommended" // eslint-plugin-prettier 및 eslint-config-prettier를 활성화합니다. 이것은 ESLint 오류로 prettier 오류를 표시합니다. 이것이 항상 extends 배열의 마지막 구성인지 확인하십시오.
  ],
  "parserOptions": {
    "ecmaVersion": 2020, // 최신 ECMAScript 기능의 구문 분석 허용
    "sourceType": "module" //import 사용 허용을 위해서
  },
  "rules": {
    // ESLint 규칙을 지정하는 위치입니다. 확장 구성에서 지정된 규칙을 덮어쓰는 데 사용할 수 있습니다.
  }
}

.Eslintignore 파일 추가

.eslintignore
예시
package.json
package-lock.json
dist

prettierrc 파일 작성

.prettierrc
{
  "singleQuote": true,
  "trailingComma": "none",
  "endOfLine": "auto"
}

.pakage.json 파일 설정

.package.json
원하시는데로 스크립트를 작성해줍니다
"scripts": {
  "lint": "tsc --noEmit && eslint . --ext js,ts --quiet --fix",
}

그 외

• 자동저장 및 수정 기능을 위해서는 setting.json을 확인해줍니다.editor.formatONsave 기능 및 extension 설정 등을 꼭 확인해주세요.

요약

• 관련 라이브러리 설치해줍니다
• eslint 및 prettier 파일을 추가 및 작성해줍니다
• vscode 설정을 확인해줍니다

참조 문서 및 사이트

• Using ESLint and Prettier with VScode in an Angular Project 🚀(outdated)

상단으로 푸샤 깃허브 이동