webPublishing
코딩의 작업효율을 올려주는 Brackets 확장기능
Loryis
2017. 12. 27. 10:15
- Color Merge – CSS에 적용된 컬러를 뽑아서 팔레트로 표시
- Document Outline – HTML5문서의 아웃라인을 표시
문서의 아웃라인을 확인할 수 있게 해줍니다. Chrome등의 브라우저에서 플러그인으로 Heading을 기준으로 하는 아웃라인을 확인하던 기능인데 에디터상에서 확인할 수 있어서 나름 편리한 기능입니다. - Tabs- Custom working – 열려있는 각 파일간을 Tab으로 이동
- Indent Guides – 문서에 인덴트 적용
- Todo – 문서상의 todo를 확인
- Emmet – 젠코딩
- Interactive Linter – 각종 오류체크 확인
각종오류를 체크해줌으로 생각지 말고 필수 설치 항목이라 생각됩니다!!
coffeescript, csslint, htmlhint, eslint, jscs, jshint, jslint, jsx, jsonlint를 포함하고 있기 때문에 작업시 오류가 나거나 확인이 필요한 부분을 확인이 가능합니다. - SASSHint – SASS에서 사용된 변수값을 쉽게 불러올수 있게 해줌
미리 지정해 둔 값들을 불러들이기에 편합니다.
SASS 파일 작성시 ‘$’를 붙이면 지정되어 있는 값들을 보여주기 때문에 작업이 수월합니다. - W3CValidation – w3c의 문법을 체크
- Brackets Outline List
Document Outline과 마찬가지로 문서의 아웃라인을 확인할 수 있게 해줍니다만 다른점은 HTML, CSS문서를 해석해서 쭈~욱 보여준다는 점입니다. Class나 Id를 사용할 경우 태그 옆에 보여줌으로 파악하기가 편할 수도(?) 있을 것 같습니다. - Brackets Git : 에디터내에서 Git을 사용할 수 있게 도와줍니다.
- Brackets Snippets (by edc)
이미 저장되어 있는 스니펫만으로도 편리하다고 생각되지만, 설정도 변경가능한 만큼 개인취향에 맞게 수정해가는것도 나쁘진 않을 것 같습니다. - QuickForm Tool :form과 관련된 요소들을 타이핑없이 원클릭으로 요소 추가를 할 수 있게끔 도와줍니다.
- Lorem Pixel
Placeholder Image를 첨부시켜줍니다. 데모페이지를 작성하거나 샘플용 이미지를 작성할때 사용하기 편할 것 같습니다. 이미지를 웹상에서 불러오는 만큼 랜더링에는 시간이 걸리는 담점이 있다고 생각됩니다. - Lorem Ipsum
영문이지만… 무의미한 데모텍스트를 작성하기 쉽게 도와줍니다.
lorem_p3, lorem_html_p3, lorem_s, lorem_link 등을 타이핑후 tab을 클릭하면 랜덤텍스트가 생성됩니다. - Markdown Preview
Markdown형식으로 문서작성을 한다면, 설치해두면 편할듯한 플러그인. 당연한 이야기지만, 파일의 확장자는 md여야 합니다. - CSS Comb
Sublime Text에서도 도움을 받고 있는 CSS를 깔끔하게 빚질해주는 플러그인으로 소스를 정렬에 민감한 분들에게 추천합니다. - Beauty
아름답게(?) 문서를 정렬해줍니다. ‘,’와 ‘{}’를 기준으로 정렬, 줄바꿈 및 자동 인덴트를 적용해주는것 같습니다. 당연한거지만 Sass등으로 컴파일된 CSS에 사용하는건 적합하지 않으며 개인적으로는 HTML에서 사용빈도가 높을것 같습니다. - Autoprefixer
Css에서 -moz-, -webkit-, -o-등의 폴리필을 첨부해주는데 codekit, glup, grunt등 컴파일을 도와주는 툴을 사용하지 않고 순수하게 하드코딩을 할 경우 도움이 될것 같습니다.