Browsersync, VSCode, Brackets

Browsersync

프로젝트 내의 static 파일 저장시, 변경사항을 감지해서, 자동으로 브라우저를 reload해준다.여러개 가능(크로스 브라우징 체크시 유용할 듯)

설치(시간이 좀 걸린다.)

cmd> npm install -g browser-sync

해당 프로젝트 root로 이동해서

cmd> browser-sync start --server --files "*"

* Nojde.js, react, Play Framework 등으로 서버를 구성해도, 소스 변경사항을 실시간으로 변경해주지만.

Browsersync는 별다른 설정이 필요없다는 장점! 

출처: https://www.browsersync.io

VSCode

세팅 순서

        Ctrl+P : 파일찾기

        Ctrl+Shift+P : 세팅찾기(파일찾기앞에 > 추가한 것과 같음)

    Ctrl+Shift+P > 언어구성 (locale.json 수정)

    ext > 이클립스 키맵 설치

    ext > auto Rename tag 설치

    ext > Code Runner 설치

    for자동완성 -> let대신 var 사용할려면 어떻게?? -> 스니펫 수정

    ext > project manager 설치 하고 save

    ext > overtype 설치 : insert key 작동

ext > vue 2 Snippets

ext > vetur

User settings (Ctrl + ,)

"git.ignoreMissingGitWarning": true,

    "javascript.format.enable": false,

    "editor.tabCompletion": true,            // 나만의 스니펫 만들기??

    "editor.fontSize": 16,

    "jslint.version": "es5",    //?    

    "eslint.options": { "configFile": "/Users/yu/projects/eslintrc.json"

"emmet.syntaxProfiles": {"vue-html":"html", "vue":"html"}

출처: https://github.com/Microsoft/vscode/issues/22585

javascript.json

    "For_Loop": {

        "prefix": "fora",

        "body": [

          "for (var ${1:i} = 0 ; i < ${2:arr}.length ; i++) {",

          "\t$0",

          "}"

        ],

        "description": "For Loop"

},

- Ctrl + P로 파일을 열때 한번에 완전히 열리지 않음, 수정을 하거나 하지 않은 상태에서 다른 파일을 다시 열면 방금 열었던 파일과 같은 탭에서 열림 

("workbench.editor.enablePreviewFromQuickOpen": false 옵션 추가로 해결)

Brackets

확장기능

emmet

extract for brackets -> photoshop 응용

> 소스를 저장하기 전에 작동하는 live preview기능은 browsersync보다 괜찮은 기능이다. 

문제 1. 하지만 새로운 tag를 작성하면 live preview가 멈춰버린다.-_-;; ( html 샘플 파일을 사용했을때)

>> 새로운 파일로 간단하게 작업할때는 멈추지 않는다.

>>> 문법이 틀렸나?

>>>> 예를 들어 p 안에 div를 만들려고 하면, live preview가 멈춘다. 문법적인 문제.!!!! 해결!!

https://github.com/adobe/brackets/blob/master/src/command/Commands.js

keymap.json

{

    "documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",

    "overrides": {

        "Ctrl-Alt-Down":"edit.duplicate"

        ,"Ctrl-D":"edit.deletelines"

        ,"Ctrl-Shift-R":"navigate.quickOpen"

        ,"Alt-Up":"edit.lineUp"

        ,"Alt-Down":"edit.lineDown"

    }

}

문제2. live preview 임시서버로 테스트했을 때와 Apache서버로 테스트 했을때, javascript event 발생 순서가 다르다.

> youtube autoplay 기능이 live preview에서는 작동하지 않는다. 왜???

===========================================================================================

{

"git.ignoreMissingGitWarning": true,

"javascript.format.enable": false,

"editor.tabCompletion": false,

"editor.tabSize": 2,

"editor.fontSize": 16,

"workbench.statusBar.visible": true,

"prettier.eslintIntegration": true,

"emmet.syntaxProfiles": {

"vue-html": "html",

"vue": "html"

},

"window.zoomLevel": -1,

"workbench.activityBar.visible": true,

"editor.minimap.enabled": false,

"explorer.confirmDragAndDrop": false,

"files.eol": "\n",

"workbench.editor.enablePreview": false,

"javascript.updateImportsOnFileMove.enabled": "always",

"breadcrumbs.enabled": true,

"browsersync.options": {

"port": 80

}

}