티스토리 뷰

## Brackets 

# Brackets 설치 (https://www.youtube.com/watch?v=jGoErIDq_4Y&list=PL3U6UclpWg-HpfyoQ8PNdoqfkAWQAYoh0)

# Brackets extensions (http://brackets.dnbard.com/extensions)

# sass 컴파일툴

- 스카우트 : (http://bkaprt.com/sass/6/) or (http://mhs.github.io/scout-app/

- live reload : (http://bkaprt.com/sass/8/) or (http://livereload.com/)

- 코파스.앱 : (http://bkaprt.com/sass/9/) or (http://compass.kkbox.com/)

- 코알라 : http://koala-app.com/

- prepros : https://prepros.io/ (유료)


1. brackets.io

2. 단축 키 : https://github.com/adobe/brackets/wiki/Brackets-Shortcuts




# 부트스트랩 sass 버전설치 

1. 도스창 : 

- pass설정bower : set PATH=%PATH%;C:\Users\<계정이름>\AppData\Roaming\npm

- pass설정git : set PATH=%PATH%;C:\Users\<YourUserName>\AppData\Local\GitHub\PortableGit_<SomeGuid>\cmd

npm install bootstrap-sass@3.3.2


2. SCSS 부트스트랩 불러오기 : 

@import "../bootstrap-sass-master/assets/stylesheets/bootstrap";




확장 플러그인 (도움말 => 확장 기능홀더 열기 )

1806 : 

extensions.z01

extensions.zip




@개인설정값 C:\Users\\AppData\Roaming\Brackets (brackets.json) (디버그 > 환경설정파일열기)


@개인설정값 현재 프로젝트 상태 C:\Users\\AppData\Roaming\Brackets (state.json)




# site-root relative path 변경

C:\Program Files (x86)\Brackets\www\extensions\default\UrlCodeHints/main.js


Original 


Change






# 브라켓 플러그인

# Monokai 테마설치 (Monokai Pastel Theme)

1. 파일 -> 확장기능 관리자 -> 테마 (Monokai) 설치

2. 보기 -> 테마... -> 현재테마 (Monokai) 선택


# Emmet 설치 (http://docs.emmet.io/cheat-sheet/)

1. 파일 -> 확장기능 관리자 (Emmet) 설치


Brackets Synapse 설치 (ftp)

1. 파일 -> 확장기능 관리자 (Brackets Synapse) 설치

2. sftp 접속오류 해결방법

"C:\Users\사용자계정\AppData\Roaming\Brackets\extensions\user\brackets-synapse\node\node_modules\ssh2-streams\lib"

sftp.js 파일수정

constants = process.binding('constants'),

아래로 변경 ==>

constants = require('fs').constants || process.binding('constants'),


Brackets Website Admin설치 (ftp)

1. 파일 -> 확장기능 관리자 (Brackets Website Admin) 설치


Move File (파일 트리에서 드래그로 파일이동)  

1. 파일 -> 확장기능 관리자 (Move File) 설치


Brackets Icons (파일 트리에서 아이콘으로 보여줌)  P.S Brackets Synapse 아이콘 비활성화 후 사용

1. 파일 -> 확장기능 관리자 (Brackets Icons) 설치


CSS-Color Market (css 코드를 색상으로 보여줌)  

1. 파일 -> 확장기능 관리자 (CSS-Color Market) 설치


# Colors++ (css, scss, less,  코드를 색상으로 보여줌)

1. 파일 -> 확장기능 관리자 (Colors++) 설치


# Brackets Sass Hints (including local/global variables, functions, mixins, keywords, parameters) 힌트

1. 파일 -> 확장기능 관리자 (Brackets Sass Hints ) 설치

2. 변수 : $ Ctrl + Space

3. 함수 : @includ Ctrl + Shift + Space


Autoprefixer 설치 (자동으로 css 벤더 적용)

1. 파일 -> 확장기능 관리자 (Autoprefixer) 설치

2. 편집 -> Autoprefixer 옵션 설정

['last 2 versions', 'opera 12', 'ff 15', 'chrome 25' 'ie 8', 'ie 9']


# Custom Work <= Tabs - Custom Working (파일을 상단 텝형태로 보여줌)

1. 파일 -> 확장기능 관리자 (Custom Work <= Tabs - Custom Working) 설치 


Brackets Beautify (소스코드 코드 자동 정열)

1. 파일 -> 확장기능 관리자 (Brackets Beautify) 설치 

2. 마우스 드래그 라인선택 : Ctrl + Alt + B


# Indent Guide (열린태그 닫는태그 라인 가이드)

1. 파일 -> 확장기능 관리자 (Indent Guide) 설치 

2. 보기 -> Indent Guide 활성화


# brackets-console-log-control (콘솔 컨트롤)

1. 파일 -> 확장기능 관리자 (brackets-console-log-control ) 설치 

2. 편집 -> 에서 단축키확인


# Open project in terminal (터미널 열기)

1. 파일 -> 확장기능 관리자 ( Open project in terminal ) 설치 

2. 보기 -> set terminal ,  오른쪽 아이콘생성


# Brackets SASS (SASS 컴파일?) 

1. 파일 -> 확장기능 관리자 (Brackets SASS) 설치

2. .brackets.json  ! 페이지내에 주석이 있으면 안됩니다.

.brackets.json




참고 : config 실행 (compass 설치후)

compass watch


config.rb



# Brackets Clientlibs Combine (css, js 파일 뭉치기)

1. 파일 -> 확장기능 관리자 (Brackets Clientlibs Combin) 설치

2. clientlibs.combine (수정)




# Brackets JS Concat (js 파일 뭉치기)

1. 파일 -> 확장기능 관리자 (Brackets JS Concat) 설치

2. js.concat (수정)


js.concat




HTML Wrapper 설치 (목록을 드래그해서 단축키를 누르면 부모 속성에따라 태그및 속성을 자동생성합니다.)

1. 파일 -> 확장기능 관리자 (HTML Wrapper) 설치

2. Ctrl + Shift + E 



brackets-compare (두개의 파일 비교)

1. 파일 -> 확장기능 관리자 (brackets-compare) 설치

2. 오른쪽패널 아이콘생성



Notes (파일에 메모하기)

1. 파일 -> 확장기능 관리자 (Notes) 설치

2. 오른쪽패널 아이콘생성


CSSFier (HTML구조를 카피해 CSS에 뿌려주면 이름이 자동 생성됩니다.)

1. 파일 -> 확장기능 관리자 (CSSFier) 설치

2. HTML구조 : Ctrl + C

3. CSS파일 : Ctrl + V


Paste and Indent (붙여넣기 했을때 자동 드려쓰기)

1. 파일 -> 확장기능 관리자 (Paste and Indent) 설치

2. 마우스 드래그 라인선택 : Ctrl + C , Ctrl + V


Join Lines (드래서 선택한 줄을 1줄로 만듬 -> Emmet -> merge line 동일)

1. 파일 -> 확장기능 관리자 (Join Lines) 설치

2. 마우스 드래그 라인선택 : Ctrl + Alt + J


# brackets-smooth-scrool (부드러운 스크롤)

1. 파일 -> 확장기능 관리자 (brackets-smooth-scrool) 설치


Minimap (서브라임 텍스트에있는 미니맵 기능입니다.)

1. 파일 -> 확장기능 관리자 (Minimap) 설치

2. 다른파일선택 or 프로그램 재시작


QuickDocsJS (js 소스 설명, jquery설명지원)

1. 파일 -> 확장기능 관리자 (QuickDocsJS) 설치

2. 마우스 드래그 라인선택 : Ctrl + K


# 소스힌트

- HTMLHint (HTML 힌트)

- CSScomb  (CSS힌트)

- JSHint

- SASSHints (스 힌트)

- AngularJS Code Hints

- jQuinter (변수 소스 힌트)

- Brackets Code Completion ( css, js 자동완성 )


# 문법 검사

- CSSLint

- SCSS Lint

- JSLint

- W3CValidation (문법검사)

# 자동완성

- Autoprefixer (브라우저별 자동 접두어 생성)



Markdown Preview ( .md 문서 마크업과 바로보기)

1. 파일 -> 확장기능 관리자 (Markdown Preview) 설치

2. 오른쪽 아이콘 생성




XAMPP Apache + MariaDB + PHP + Perl

download : https://www.apachefriends.org/index.html

설치 방법 : https://www.youtube.com/watch?v=HiuYce7bclU


- 윈도우 하단검색 "고급 시스템 설정"



댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday