본문 바로가기

웹언어/코딩에디터사용법

[Brackets] 설치 및 확장 플러그인

728x90
반응형

 

 

 

 

1. 설치하기

- 아래 주소에 들어가서 다운 받는다.

http://brackets.io/index.html

 

A modern, open source code editor that understands web design

Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long.

brackets.io

 

 

 

 

 

 설치가 다되면 프로그램목록에 이런 아이콘이 생성 - 더블클릭하여 실행

 

 

 

 

 

 

 

 

 

 

 

2. 확장 플러그인

1) 확장 플러그인 설치

우측상단의 레고모양 아이콘을 클릭하면 확장기능을 설치할 수 있다.

 

 

 

 

 

 

 

 

2) Emmet - 문법 자동완성 기능 

 

 

문법 참고 사이트

https://docs.emmet.io/abbreviations/syntax/

 

Abbreviations Syntax

Abbreviations Syntax Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes. Elements You can use elements’ names like div or p to generate HTML tags. Emmet doesn’t have a predefined set

docs.emmet.io

 

 

 

 

 

 

 

 

3) Custom Work 

- 사용 파일을 오른쪽에 띄우고

- 파일별로 아이콘 처리

 

 

 

 

 

 

 

4) Indent Guide

- 탭키 누를시 탭라인 보여줌

- 플러그인 설치 후 [보기] - [Indent Guide]선택해야 보임

 

 

 

 

 

 

 

 

 

5) Interactive Linter

- HTML/CSS/JS 오류시 옆에 전구 모양 아이콘 표시

 

 

 

 

 

 

 

6) Color Highlighter

- CSS에서 색상 선택시 색상 표시

 

 

 

 

 

 

 

 

 

728x90
반응형