[VS code] 플러그인 추천 / VS code 더 편하게 쓰기

VS code를 더 편하게 쓰기 위한 플러그인 몇가지를 소개하고자 합니다.

 

ESLint

ESLint는 문법 검사 도구로 코드를 작성할 때 기본값을 포함하지 않거나 등의 실수를 하면 에러 메세지를 VS code 에디터로 바로 확인할 수 있게 도와주는 플러그인 입니다.

 

예시를 들어보겠습니다.

 

먼저 ESLint를 설치해주세요.

 

View > Problems 에 들어가주세요. 

하단 에디터에 보시면 위와 같이 에러에 대한 설명이 나오고 확인이 가능합니다. 

에러 내용을 참고하여 문법을 고쳐주시면 됩니다.

---

Prettier 

 

Prettier는 코드를 자동으로 정리해주는 도구입니다. 

리액트를 작성할 때 코드의 가독성을 위해 사용하시면 좋습니다. 

 

일정한 공백으로 정렬을 정리해주고 세미콜론(;)이 빠진 곳은 자동으로 세미콜론을 추가해줍니다.

' ' 작은 따옴표는  " " 큰 따옴표로 바꿔줍니다.

 

예시를 들어보겠습니다.

 

먼저 Prettier 를 설치해주세요.

 

아래 코드는 위에 ESlint로 문법을 검사한 코드입니다.

그러나 정리가 안되어있어 가독성이 떨어지네요.

import React, { Component } from 'react';

export default class Controls extends Component {
  render() {
    return (
        <ul className="controls">
          <li><a href="/" onClick={function(e){
            e.preventDefault();
            this.props.onChangeMode('create');
          }.bind(this)}>create</a></li>
          <li><a href="/" onClick={function(e){
            e.preventDefault();
            this.props.onChangeMode('update');
          }.bind(this)}>update</a></li>
          <li><input type="button" value="delete" onClick={function(e){
            e.preventDefault();
            this.props.onChangeMode('delete');
          }.bind(this)}/></li>
        </ul>
    )
  }
}

 

Prettier을 이용해 코드를 정리해보겠습니다.

 

F1을 누르고 format이라고 입력해주세요.

아래와 같이 선택해주세요.

 

prettier을 이용해 정리한 결과입니다.

 

import React, { Component } from "react";

export default class Controls extends Component {
  render() {
    return (
      <ul className="controls">
        <li>
          <a
            href="/"
            onClick={function (e) {
              e.preventDefault();
              this.props.onChangeMode("create");
            }.bind(this)}
          >
            create
          </a>
        </li>
        <li>
          <a
            href="/"
            onClick={function (e) {
              e.preventDefault();
              this.props.onChangeMode("update");
            }.bind(this)}
          >
            update
          </a>
        </li>
        <li>
          <input
            type="button"
            value="delete"
            onClick={function (e) {
              e.preventDefault();
              this.props.onChangeMode("delete");
            }.bind(this)}
          />
        </li>
      </ul>
    );
  }
}

 

아까보다는 훨씬 보기 편해진 것 같습니다~^^

 

Prettier을 자동으로 설정하는 방법

다음은 Prettier을 자동으로 설정하는 방법을 알아보겠습니다.

VScode 셋팅창에 들어가 format on save라고 입력하고 아래 체크박스에 체크해주세요.

이제 저장할 때 마다 자동으로 prettier가 실행됩니다.

 

 

---

Live server 라이브 서버 

코드를 작성하면서 실시간으로 브라우저에 반영해주는 유용한 플러그인 입니다.

 

html 에서 마우스 오른쪽 클릭 > Open with Live Server 또는 단축키를 눌러 실행 가능합니다.

---

Material Theme

VS code의 테마를 바꿀 수 있는 플러그인 입니다.

 

Set Color Theme를 클릭하면 원하는 색상으로 변경가능합니다.

---

Material Icon Theme

VS code의 Icon 테마를 바꿀 수 있는 플러그인 입니다.

 

아래 이미지처럼 아이콘을 자동으로 변경 생성해줍니다.

 

---

ES7 React Native snippets

리액트를 자동완성 기능을 편하게 사용하기 위한 플러그인 입니다. 

 

리액트 js파일에서 rcc 등을 입력하여 빠르게 클래스 컴포넌트를 생성 가능합니다.

---

* 잘못된 정보 및 오류가 있을 경우 댓글에 적극적으로 말씀 부탁드립니다. 수정, 보완 하겠습니다.