🐧Eslint

• javascript는 동적 분석을 하기 때문에 코드를 직접 실행 시켜 에러를 찾아야 한다.
• lint는 코드를 정적 분석을 하기 때문에, 직접 실행 시키지 않아도 자동으로 검출한다.

import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    const qqq = 3;

    return this.appService.getHello();
  }
}

지금 const qqq = 3 에 있는 qqq는 어디에서 속해 있지 않은 변수이기에 해당주소를 보여주며 해당값이 선언 되어 있지 않다고 나옵니다. 그 주소를 .eslintrc.js 에 rules 입력해주고 off 를 입력하면 그 규칙에 따라 qqq는 해당 값이 읽히지 않더라도 에러가 존재하지 않게 됩니다.

즉, eslint는 협업하는 개발자들간의 규칙을 정해주므로 일관성 있는 규칙으로 구현해준다.

🐧Prettier

• prettier는 eslint처럼 '코드 구현 방식'이 아닌, 줄 바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성되도록 도와주는 것이다.

// .prettierrc

{
      "singleQuote": true,
      "trailingComma": "all"
}

• singleQuote : “ “ 를 ‘ ‘ 로 통일시켜주는 것
• trailingComma : 문장 제일 끝에 콤마( , ) 를 자동으로 붙여주는 것

위 코드처럼 설정하게 된다면 자동으로 문자열은 ‘’로 저장해주고 객체안에 ,를 자동으로 저장해준다.

const result = [
    { 
        email : "aaa@gmail.com", 
        name : "철수",
        phone : "010-1234-5678"
        personal : "220110-2222424"
        prefer : "https://naver.com"

        
    }
//Prettier 적용시
const result = [
    { 
        email : "aaa@gmail.com", 
        name : "철수",
        phone : "010-1234-5678",
        personal : "220110-2222424",
        prefer : "https://naver.com",

        
    }
//객체 뒤에 안 value 뒤에 자동으로 ,를 붙여준다.