15_리액트_유용한 tool

Prettier

 

코드 스타일을 내 스타일대로 커스터마이징 할수 있는 기능

 

npx create-react-app useful-tools

 

위 기능을 테스트하기 위해 우선 새로운 리엑트 프로젝트를 하나 만들었다.

 

vs코드에서 Prettier을 깔아주고, 

 

프로젝트 root폴더에 .prettierrc파일을 만들어주자.

 

파일 내용은 아래 홈페이지를 참조해도 좋다

https://prettier.io/docs/en/configuration.html

Prettier · Opinionated Code Formatter

 

 

{
    "trailingComma": "all", 
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true
}

예를 들어 위는

배열내에 콤마( , ) 를 사용할지, 탭키간격, 세미콜론 사용여부, ''이나 "" 사용 등의 여부를 지정해둘 수 있다.

 

사용방법은 해당 root안의 파일에서 f1 - format Document를 눌러서 사용하면 된다.

 

파일 - 설정

위처럼 설정하면 저장할대마다 코드가 예뻐진다

 

 

ESLint

자바스크립트 문법을 검사해준다. 단순 코드뿐 아니라 다양한 옵션을 가지고 검수해준다.

 

 

예를들어 위에같은 옵션같은 경우,  ( == ) 즉 equal을 2개만 쓰면 오류를 내보내게 하는 옵션이다.

prettier을 설정했던 것처럼 확장 모듈에서 설치하고 보면, 수정사항이 있을때 노란색 밑줄로 표시됨을 알 수 있다.

 

 

 

ESLint 커스터마이징

 

yarn add eslint-config-airbnb 등등 필요한 eslint를 설치한다.

 

그 이후,  package.json에서

 

 "extends": [
      "react-app",
      "airbnb"
      "prettier"
      "react-app/jest"
    ]

다음과 같이 추가해주면 된다. Prettier를 넣어주면 겹치는 부분은 Prettier가 알아서 없애준다.

 

 

만약 오류나 에러가 나왔을때 바꾸는 방법이 있다.

 

"rules" {



}

 

 

위 공간을 extends밑에 놔두고 에러항목을 넣은 후에, 0은 표시x 1은 오류로 표시임을 알아두고 바꾸면 되겠다.

 

 

Snippet(코드조각)

 

자주 사용하는 코드를 단축어로 사용

 

 

import React from 'react';

function Sample() {
    return (
        <div>
            hello
        </div>
    );
    
}


export default Sample;

다음과 같이 코드를 작성한 후에

 

https://snippet-generator.app/

snippet generator

위사이트를 간다.

 

그 이후에 이름과 단축키를 정해주고 

 

VS코드 우측하단에 있는 Javascrpit를 눌러서 자동감지를 Javacscript React로 바꿔 준 후에, 

 

설정 - 코드조각을 눌러준다. 그 이후에 사이트에서 가져온 코드를 위처럼 붙여넣어주면 된다.

 

{ 1: } 로 감싸주면 해당 스니펫을 만든다음에 바로 작성할 수 있는 부분으로 넘어갈 수 있는 기능을 넣을 수 있다.