티스토리 뷰
[Brackets]setting & 확장기능 ( .brackets.json , js.concat )
turfrain 2016. 3. 9. 14:05## 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 :
@개인설정값 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 옵션 설정
# 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 ! 페이지내에 주석이 있으면 안됩니다.
참고 : config 실행 (compass 설치후)
compass watch
# Brackets Clientlibs Combine (css, js 파일 뭉치기)
1. 파일 -> 확장기능 관리자 (Brackets Clientlibs Combin) 설치
2. clientlibs.combine (수정)
# 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
- 윈도우 하단검색 "고급 시스템 설정"
'작업환경 > Publishing(setting)' 카테고리의 다른 글
[유투브, 네이버 팟케스트, 변환]mp3, mp4 다운로드 (0) | 2016.08.22 |
---|---|
[Compass] 사용법 (sass and .scss) (0) | 2016.03.23 |
[Sublime Text3] 단축키 (0) | 2016.02.18 |
[Sublime Text3] Setting (0) | 2016.02.17 |
[Grunt] sass 설치&기본세팅 (min.css, min.js) (2) | 2016.02.01 |
- Total
- Today
- Yesterday