Eslint & Prettier

Eslint

ESLint는 ECMAScript/JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 도구로, 코드의 일관성을 높이고 버그를 방지하는 것을 목표로 합니다. 여러 면에서 몇 가지 예외를 제외하고는 JSLint 및 JSHint와 유사합니다.

• ESLint는 JavaScript 구문 분석을 위해 Espree 를 사용합니다.
• ESLint는 AST를 사용하여 코드의 패턴을 평가합니다.
• ESLint는 완전히 플러그인 가능하며 모든 단일 규칙은 플러그인이며 런타임에 더 추가할 수 있습니다.
  -eslint

Eslint 공식 웹의 설명만으로 이해하기 어렵다. 쉽게 설명하자면 Eslint는 Javascript에서 코드에러나 문법에러 발생 시 해당 코드에 표시를 해주는 도구이다.
또한 코딩 스타일을 지정하고 벗어난 형식을 표시하여 바로잡아 주는 기능이 있어 협업에도 좋다.

Eslint 설치

// 설치
npm init @eslint/config

// 실행
./node_modules/.bin/eslint yourfile.js

VScode Extension에서도 설치할 수 있다.

Prettier

What is Prettier?

• An opinionated code formatter
• Supports many languages
• Integrates with most editors
• Has few options

Why?

• You press save and code is formatted
• No need to discuss style in code review
• Saves you time and energy

-Prettier

Prettier는 Eslint와 비슷한 기능을 가진 코드 폼펙터 이다.
맞춤 설정에 따라 자동으로 코드를 정렬해주기에 협업에 사용하기 좋다.

Prettier 설치

// npm
npm install --save-dev --save-exact prettier
npx prettier --write .

// yarn 
yarn add --dev --exact prettier
yarn prettier --write .

설치 후에는 .prettierrc.json 파일을 만들어 prettier를 사용중임을 알려주는것이 좋다.

VScode Extension 설치