정말 필요한 괄호 확장 10 개

2019

Brackets.io는 최근에 자신의 블로그에서 읽을 수있는 몇 가지 훌륭한 새로운 기능과 함께 버전 1.2를 발표했습니다. 우리는 각 확장에 대한 완전한 지침과 함께 가장 훌륭하고 유용한 Brackets 확장 10 개 목록을 특정 순서없이 컴파일했습니다.

대괄호 확장

1. 코드 접기

많은 다른 IDE 및 코드 편집기와 달리 대괄호에는 기본적으로 사용할 수있는 코드 접기 옵션이 없습니다. 코드 접기를 사용하면 코드의 많은 부분을 한 줄로 쉽게 접을 수 있습니다. 코드 접기 확장은 Github 및 대괄호 확장 관리자에서 사용할 수 있습니다.

사용하는 방법

중첩 된 태그를 접으려면 위의 그림과 같이 부모 태그의 왼쪽에있는 아래쪽 화살표를 클릭하십시오. Javascript 또는 다른 형식의 경우에도 마찬가지입니다. 상위 요소의 왼쪽에있는 아래쪽 화살표를 클릭하면 모든 중첩 된 문을 한 줄로 접을 수 있습니다. 확장하려면 더하기 기호를 클릭하기 만하면됩니다.

접힌 선의 줄 번호는 숨겨져 있으므로 코드에 집중할 때 접힌 선을 쉽게 찾을 수 있습니다.

2. Lorem Pixel

자리 표시 자 텍스트를 생성하는 방법은 많지만 프런트 엔드 웹 개발자는 종종 자리 표시 자 이미지가 필요합니다. 빈 자리 표시 자 이미지를 만드는 대신 Lorem Pixel 확장을 사용하십시오. 원하는 크기의 멋진 자리 표시 자 이미지를 삽입 할 수 있습니다. Lorem Pixel의 멋진 점은 이미지를 원하는 범주를 선택할 수 있다는 것입니다.

이것이 충분하지 않다면 페이지를 다시로드 할 때마다 자리 표시 자 이미지가 계속 변경됩니다! 이미지는 종종 색 구성표를 뒤집어 놓을 수 있으므로 Lorem Pixel은 b / w 자리 표시 자 이미지 만 사용하는 '회색 음영'옵션도 제공합니다. 이 확장 프로그램은 lorempixel.com에 의해 제공되며 대괄호 확장 관리자에서 사용할 수 있습니다.

Lorem 픽셀 사용

사용하는 방법

Lorem Pixel 확장을 설치하면 Lorem Pixel 로고 (체크 된 사각형)가 확장 패널 (오른쪽의 라이브 미리보기 버튼)에 나타납니다. 로고를 클릭하여 설정 상자를 불러옵니다. 필요한 이미지 크기 및 선호하는 이미지 범주를 설정하십시오. 그레이 스케일 이미지를 원하면 그레이 스케일 옵션을 확인하십시오. 클립 보드에 링크를 복사하고 필요에 따라 사용하거나 현재 커서 위치에 삽입하십시오.

3. 자동 프리 픽서

코드에 공급 업체 접두사를 추가하는 것은 번거롭습니다. Autoprefixer 확장은 필요한 벤더 프리픽스를 코드에 자동으로 추가하기 때문에 많은 시간과 노력을 절약 할 수 있습니다. 구성을 필요로하지 않으며 코드를 저장할 때마다 접두사를 업데이트합니다. 원하는 경우 코드를 선택하고 자동 접두사를 붙일 수 있습니다.

사용하는 방법

Autoprefixer를 사용하려면 프리픽스 프리 코드 작성을 시작하십시오. 확장자는 저장하는 즉시 접두사가 붙은 코드를 자동으로 추가합니다. 선택한 코드에 자동 접두사를 붙이려면 먼저 코드를 선택한 다음 편집 탭 ⇒ 자동 접두사 선택을 선택합니다.

Autoprefixer를 사용하여 설정에 사용자 정의 접두사를 추가 할 수도 있습니다. 확장 설정으로 이동하려면 편집 ⇒ 자동 프리 머 설정.

계단식으로 아름답고 접두사가있는 코드를 얻으려면 확장 설정에서 Visual cascade 옵션을 활성화하십시오.

4. 마크 다운 미리보기

Markdown은 HTML로 쉽게 변환 할 수있는 멋진 일반 텍스트 마크 업 언어입니다. Markdown Preview는 텍스트 버전 바로 아래에 렌더링 된 Markdown을 제공합니다. Github Flavored Markdown과 Standard Markdown의 두 가지 스타일 중에서 선택할 수 있습니다.

미리보기 창에는 Light, Dark, Classic의 세 가지 테마가 있습니다. Markdown Preview에는 스크롤 동기화 옵션도 있습니다 (기본적으로 사용 가능). 확장 프로그램은 Github 또는 Bracket 확장 관리자에서 다운로드 할 수 있습니다.

사용하는 방법

.md 또는 .markdown 파일을 엽니 다. Markdown Preview를 설치 한 경우 오른쪽에 M ↓ 버튼이 나타납니다. 이를 클릭하면 렌더링 된 Markdown이 표시됩니다. 테마를 변경하거나 스크롤 동기화를 사용 중지하려면 마크 다운 미리보기 섹션의 오른쪽 상단에있는 톱니 바퀴 아이콘을 클릭하기 만하면됩니다.

5. 대괄호 아이콘

코드 편집기에 파일 아이콘을 사용하는 것은 항상 즐겁습니다. 대괄호 아이콘은 파일 유형에 따라 사이드 바에 나열된 모든 파일에 다채로운 아이콘을 추가합니다. 그것은 대부분의 파일 형식에 대한 아이콘을 가지고 있으며 Github 페이지에 아이콘 요청을 게시 할 수 있습니다.

보너스 팁 :

대괄호 아이콘은 Ionicons 프로젝트의 아이콘을 사용합니다. Font Awesome 프로젝트의 아이콘을 사용하는 확장 파일 아이콘 (괄호 아이콘 프로젝트의 포크)을 확인할 수도 있습니다. 결국 개인적 선호로 귀결됩니다.

사용하는 방법

확장 프로그램을 설치하고 대괄호 (F5)를 다시로드하기 만하면됩니다.

6. 문서 도구 모음

대괄호에는 탭이 없습니다. 평범하고 단순한 사실. 문서 도구 모음 확장 기능이이 기능을 추가합니다. 사이드 바의 '활성'섹션에있는 모든 파일은이 확장 프로그램의 탭으로 표시됩니다. 사이드 바를 숨길 수 있으며 멋진 인터페이스를 위해 문서 도구 모음 만 사용할 수 있습니다.

사용하는 방법

확장 장치를 설치하고 브래킷 (F5)을 다시 장착하십시오.

7. 브래킷 Git

요즘은 힘내와 통합하려고합니다. 그것은 가장 인기있는 버전 제어 시스템 (VCS)입니다. 브래킷 Git은 비슷한 브래킷 확장 중에서 가장 쉽게 사용할 수 있습니다. 그것은 당신이 필요합니다 모든 자식 기능이 있습니다. 대괄호 내에서 변경 사항을 손쉽게 커밋하고, 클릭 한 번으로 변경 내용을 푸시 / 풀하고, 파일 기록 및 총 커밋 기록을 볼 수도 있습니다. 힘내 잘하면, 이 확장 기능으로 아무런 문제가 없다.

참고 : Bracket Git을 사용하려면 컴퓨터에 Git이 설치되어 있어야합니다. 확장 프로그램을 설치 한 후에는 Git 실행 파일의 경로를 입력해야 할 수도 있습니다 (기본 경로에없는 경우).

사용하는 방법

대괄호를 사용하여 파일 커밋

대괄호 사용하기 Git은 꽤 간단합니다. 로컬 Github repo 폴더를 대괄호 안에 프로젝트 폴더로 만듭니다. 그런 다음 파일을 열고 변경 한 다음 저장하십시오. 그런 다음 오른쪽에있는 힘내 아이콘을 클릭하면 맨 아래에있는 대괄호 자식 (Git) 패널이 열립니다. 파일에 대한 모든 수정 사항을 나열합니다.

커밋 할 파일을 선택하고 커밋 버튼을 클릭하십시오. 그러면 변경 사항이 나열된 팝업 창이 열립니다. 커밋 메시지를 입력하고 확인을 클릭하십시오. 그리고 대괄호에서 직접 Git에 파일을 커밋했습니다!

커밋 한 후 푸시 버튼을 클릭하십시오 (위의 GIF에서 볼 수있는 것처럼 동기화되지 않은 커밋 수가 표시됩니다).

설정 구성

브래킷 Git 창을 열고 설정 버튼을 클릭하십시오 (오른쪽에서 두 번째). 어쨌든 당신이 그것을 좋아하는 대괄호 자식을 구성하는 자유롭게 느껴보십시오.

파일 및 커밋 기록보기

해당 버튼을 클릭하면 파일 기록 및 커밋 기록이 아름답게 표시됩니다. 아바타를 흑백 아바타, 유색 아바타 또는 Gravatar로 변경할 수 있다고 언급 했습니까?

커밋 내역

8. 린트 모든 것들

린트 모든 것. 모두. 이 확장 기능은 모든 파일을 한 번에 보완합니다. 연결된 파일이 많은 대규모 프로젝트가있는 경우 매우 유용합니다. 모든 lint 오류는 창에 멋지게 나타납니다.

사용하는 방법

Lint ALL Things를 사용하려면 보기 탭으로 가서 Lint 전체 프로젝트를 클릭하십시오.

9. 대괄호 Todo

대괄호 Todo는 모든 TODO 주석을 깔끔한 목록 형식으로 보여주는 깔끔한 작은 확장입니다. 기본적으로 TODO, NOTE, FIXME, CHANGES 및 FUTURE의 5 개 태그를 지원합니다. 주석을 완료로 표시 할 수도 있습니다. 보기 옵션에서 태그별로 의견을 필터링 할 수 있습니다. 대괄호 Todo를 사용하면 자신의 태그뿐만 아니라 태그에 대한 사용자 정의 색상을 정의 할 수 있습니다.

대형 프로젝트에서 작업하고 여러 파일의 주석을 추적해야하는 경우 대괄호 Todo의 검색 범위를 변경할 수 있습니다. 공급 업체 폴더와 같은 일부 파일 및 폴더를 제외하고 싶습니까? 걱정 마. 제외 목록에 경로를 추가하기 만하면됩니다. 루트 프로젝트 디렉토리에 .todo 파일을 추가하여 각 프로젝트의 설정을 사용자 정의 할 수 있습니다.

github 문서의 모든 설정 옵션을 살펴볼 수 있습니다.

사용하는 방법

Brackets Todo를 사용하려면 코드 안에 태그가 포함 된 주석을 추가하십시오. 태그 이름은 대문자 여야하며 그 다음에 콜론 (:)이 와야합니다. 모든 Todo를 보려면 오른쪽 확장 창의 Todo 아이콘을 클릭하십시오.

구성 :

HTML 메모 용 Todo를 허용하려면 설정을 엽니 다 . - Todo 아이콘 → 설정 (톱니 바퀴 아이콘)을 클릭하고을 클릭하여 .todo 파일을 엽니 다. 이 파일에 다음 코드를 추가하십시오.
```
 { "regex": { "prefix": "(? :)"}} 
```
Todo 설정 메뉴의 모양
검색 범위를 변경하려면 다음 코드를 .todo 파일에 추가하십시오.
```
 { "검색": { "범위": "내 프로젝트"}} 
```
검색 범위에서 파일 / 폴더 / 파일 확장명을 제외하려면 다음 코드를 .todo 파일에 추가하십시오.
```
 { "검색": { "범위": "내 프로젝트", 
```
"excludeFolders": [ "yourfolder"]
```
 "excludeFiles": [ "yourfile"] "excludeFiles": [ ".yourextension"]}} 
```