[Brackets]setting & 확장기능 ( .brackets.json , js.concat )

## 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) (디버그 > 환경설정파일열기)

1806 : 

brackets.json

{

    "fonts.fontSize": "12px",

    "fonts.fontFamily": "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace",

    "hirse.beautify.onSave": false,

    "brackets-synapse.version": "1.2.90",

    "brackets-synapse.server-settings": "[]",

    "brackets-synapse.use-crypt": false,

    "custom.work.showButtonForToolbar": true,

    "custom.work.horizontalBar.noSplitButton": true,

    "custom.work.useIconsOfCustomWork": false,

    "custom.work.grayScaleIcons": true,

    "custom.work.hover.sidebar": true,

    "custom.work.scrollwheel": true,

    "themes.theme": "monokai-pastel",

    "linting.collapsed": true,

    "fileFilters": [

        {

            "name": "",

            "patterns": [

                ":tr"

            ]

        },

        {

            "name": "",

            "patterns": [

                ":tra"

            ]

        },

        {

            "name": "scss",

            "patterns": [

                "*.html",

                "*.css"

            ]

        },

        {

            "name": "js",

            "patterns": [

                "*.scss",

                "*.css",

                "*.map",

                "*.html"

            ]

        },

        {

            "name": "html",

            "patterns": [

                "*.js",

                "*.scss",

                "*.css",

                "*.map"

            ]

        }

    ],

    "brackets-minifier.on-save": false,

    "mikaeljorhult.bracketsAutoprefixer.visualCascade": false,

    "mikaeljorhult.bracketsAutoprefixer.browsers": [

        "> 1%",

        "last 2 versions",

        "Firefox ESR",

        "ie >= 8"

    ],

    "mikaeljorhult.bracketsAutoprefixer.enabled": false,

    "caferati.cssfier.status": true,

    "openinterm.terminal": "cmd",

    "styleActiveLine": true,

    "brackets-indent-guides.enabled": true,

    "brackets-minimap.whatsnew": "3.2.6",

    "brackets-minimap.enabled": false,

    "brackets-minimap.width": 69,

    "noDistractions": false,

    "livedev.multibrowser": true,

    "debug.showErrorsInStatusBar": false,

    "useTabChar": false,

    "eqFTP.projectsPaths": [],

    "brackets-eslint.gutterMarks": true,

    "brackets-eslint.useLocalESLint": false

}

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

# site-root relative path 변경

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

Original 

 // build target folder path

        if (queryDir.length > 0 && queryDir[0] === "/") {

            // site-root relative path

            targetDir = ProjectManager.getProjectRoot().fullPath +

                        decodeURI(queryDir).substring(1);

        } else {

            // page relative path

            targetDir = docDir + decodeURI(queryDir);

        }

Change

// build target folder path

        if (queryDir.length > 0 && queryDir[0] === "/") {

            // site-root relative path

            targetDir = ProjectManager.getProjectRoot().fullPath + "/root/" +

                        decodeURI(queryDir).substring(1);

        } else {

            // page relative path

            targetDir = docDir + decodeURI(queryDir);

        }

---

# 브라켓 플러그인

# 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

{

    "sass.enabled": false,

    "sass.compiler": "libsass",

    "path": {

        "scss/test.scss": {

            "sass.enabled": true,

            "sass.options": {

                "includePaths": [ ],

                "outputDir": "../css/",         /* 패스의 상대경로 */

                "imagePath": null,

                "sourceComments": false,

                "outputStyle": "nested"     /* :expanded or :nested or :compact or :compressed */

            },

            "linting.collapsed": false

        },

        

        "scss/test2.scss": {

            "sass.enabled": true,

            "sass.options": {

                "includePaths": [ ],

                "outputDir": "../css/",

                "imagePath": null,

                "sourceComments": false,

                "outputStyle": "nested"

            },

            "linting.collapsed": false

        }

        

    }

}

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

compass watch

config.rb

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

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

2. clientlibs.combine (수정)

{

    "combineOnSave": false,

    "combine": [

        {

            "output": "resources/css/headlibs.min.css",

            "files": [

                "resources/thirdparty/bootstrap/css/bootstrap.min.css",

                "resources/thirdparty/bootstrap/themes/sb-admin-2/css/sb-admin-2.css",

                "resources/css/global.css"

            ]

        },

        {

            "output": "resources/js/headlibs.min.js",

            "files": [

                "resources/js/common.js",

                "resources/js/routes.js",

                "resources/js/filters.js",

                "resources/js/directives.js",

                "resources/js/factories/*.js",

                "resources/js/services/*.js",

                "resources/js/controllers/*.js"

            ]

        },

        {

            "output": "resources/js/bodylibs.min.js",

            "files": [

                "resources/thirdparty/bootstrap/js/bootstrap.min.js",

                "resources/thirdparty/bootstrap/themes/sb-admin-2/js/sb-admin-2.js"

            ]

        }

    ]

}

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

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

2. js.concat (수정)

// 이 파일은 프로젝트 루트에 배치해야

// 이 경우 파일을 저장하는 경우 중 하나를 저장하거나 // 파일 목록을 연결

concatOnSave = true;

// 결부 된 파일의 출력 경로, 디렉토리가 생성됩니다

output = js/all.js;

// true로 설정하면 연결된 파일을 축소

minify = true;

   

// 파일 목록 연결하는 (상대 경로는 루트를 투사하기)

-lib/js/js1.js;

-lib/js/js2.js;

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

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