Atom에 사용자 정의 코드 단편을 추가하는 방법

그것은 우연이 아닙니다. 원자, Github가 만든 소스 코드 편집기는 웹 개발 커뮤니티에서 널리 사용됩니다. 그것은 단지 쉽게 확장 할 수있는 수천 개의 Atom 패키지로 구성되어 있으며 광범위한 언어 지원, 그러나 거의 모든 부분이 맞춤 설정 가능한 사용자에 의한.

Atom 's를 활용함으로써 스 니펫 기능, 다음과 같이 코딩 워크 플로우를보다 생산적으로 만들 수 있습니다. 반복 코드 스 니펫 재사용 작업의 반복적 인 부분을 줄일 수 있습니다. 이 글에서는 어떻게 할 수 있는지 보여 드리겠습니다. Atom의 내장 코드 스 니펫 사용, 과 나만의 맞춤 스 니펫 만들기.

내장 된 코드 스 니펫 사용

기본적으로 Atom은 내장 된 코드 스 니펫, 각각은 범위에 묶여있다. 특정 파일 유형에 속합니다. 예를 들어, 파일로 작업하는 경우 .js 확장 기능을 사용하면 자바 스크립트 범위에 속한 스 니펫 만 해당 파일에 사용할 수 있습니다..

보다 모든 사용 가능한 스 니펫 현재 파일 형식에 대해 Alt + Shift + S를 누르십시오. 드롭 다운 목록에서 스 니펫을 선택하고 클릭하면 Atom은 더 이상 번거 로움없이 편집기에 전체 스 니펫을 삽입합니다.

이미 옵션을 알고 있다면 반드시 전체 목록을로드 할 필요는 없습니다. 입력을 시작하면 Atom이 자동 완성 결과 상자 특정 범위에 속하는 사용 가능한 코드 조각과 지금까지 입력 한 문자열이 들어 있습니다.

예를 들어, h 문자를 .HTML 파일, 모든 기본 HTML 스 니펫이있는 드롭 다운 목록 h 나타날거야.

옵션을 클릭하면 Atom이 전체 HTML 태그 붙여 넣기 (예 :. ), 시작 및 종료 태그 안에 커서를 놓습니다..

드롭 다운 목록에 신경 쓰지 않으려는 경우 입력하여 동일한 결과를 얻을 수 있습니다. h1, Tab 또는 Enter 누르기 -이 두 키 모두 전체 코드 스 니펫 삽입 스 니펫의 접두어에 속한다..

맞춤 코드 스 니펫 추가하기

1. 구성 파일 찾기

자신 만의 코드 스 니펫을 Atom에 추가하려면 먼저 라는 구성 파일 snippets.cson 그것은 CoffeeScript 객체 표기법 파일.

클릭 파일> 스 니펫 ... 메뉴를 열면 Atom이 snippets.cson 나만의 맞춤 스 니펫을 추가 할 수있는 파일.

2. 올바른 범위 찾기

필요할 것이예요 네 가지 맞춤 스 니펫을 추가하려면 다음 단계를 따르세요.

그만큼 범위 이름
그만큼 스 니펫 이름
그만큼 접두사 스 니펫 핸들로 작동합니다.
그만큼 스 니펫의 본문

스 니펫 (2-4)의 이름, 접두어 및 본문은 전적으로 귀하에 따라 다르지만, 범위의 이름을 찾는다. (1) 사용자 정의 스 니펫을 추가하기 전에.

필요한 범위를 찾으려면 파일> 설정 메뉴를 클릭 한 다음 패키지 탭을 클릭하십시오. 여기에서 필요한 범위에 대한 검색을 실행합니다. 예를 들어 HTML 코드에 코드 조각을 추가하려면 다음을 입력하십시오. HTML 검색 창에.

클릭 언어 지원 패키지 선택한 언어를 선택하고 자체 설정을 엽니 다. 사이에 문법 설정, 아래 스크린 샷에서 볼 수 있듯이 범위 이름을 빠르게 찾을 수 있습니다..

다음은 Atom 프로젝트에서 사용할 수있는 범위입니다.

일반 텍스트: .text.plain
HTML : .text.html.basic
CSS : .source.css
Sass : .source.sass
적게: .source.css.less
자바 스크립트 : .source.js
PHP : .text.html.php
파이썬 : .source.python
자바: .source.java

네가해야 할 일을 잊지 마라. 점 추가 (.) 범위 이름 앞에 그것을 사용하기 위해서는 snippets.cson 파일.

3. 단일 행 코드 조각 만들기

만들려면 한 줄짜리 코드 스 니펫, 스 니펫의 범위, 이름, 접두사 및 본문을 snippets.cson 파일에 다음 구문을 사용합니다.

 '.text.html.basic': '위젯 제목': 'prefix': 'wti'body ':''

이 예제 스 니펫은

태그에 `위젯 제목` 클래스를 HTML 범위에 추가합니다. 이 구문에 따라 Atom 편집기에 다른 단일 행 코드 스 니펫을 추가 할 수 있습니다.

구성 파일을 저장 한 후에는 접두어를 입력하고 Tab 키를 누르십시오., Atom은 속한 코드 조각 본문을 코드 편집기에 붙여 넣습니다. 스 니펫의 이름 (예제에서) `위젯 제목`)가 자동 완성 결과 상자에 표시됩니다..

4. 멀티 라인 코드 조각 만들기

여러 줄 코드 스 니펫 조금 다른 구문을 사용하십시오. 한 줄짜리 스 니펫과 동일한 데이터 (범위, 이름, 접두사 및 스 니펫의 본문)를 추가해야합니다.

다른 점은 스 니펫 바디를 배치해야한다는 것입니다. 한 쌍의 "" " (세 개의 큰 따옴표).

 '.text.html.basic': '이미지 링크': 'prefix': 'iml'body ': "" "     
 "" "

추가하려는 경우 두 개 이상의 사용자 정의 스 니펫 동일한 범위로 범위의 이름을 추가하십시오. 한 번만, 스 니펫을 하나씩 나열하십시오.

 '.text.html.basic': '위젯 제목': 'prefix': 'wti'body ':'"Image Link": 'prefix': 'iml'body ': "" "     
 "" "

5. 탭 정지 추가

다음을 추가하여 맞춤 코드 스 니펫의 사용을 더욱 용이하게 할 수 있습니다. 탭 정지 발췌문 본문에. 탭 정지는 사용자가 Tab 키를 사용하여 탐색 할 수있는 지점을 나타냅니다. 탭 스톱을 사용하면 텍스트 내 탐색에 필요한 시간을 절약 할 수 있습니다..

탭 스톱을 추가 할 수 있습니다. ~을 사용하여 $ 1, $ 2, $ 3, ... 통사론. Atom이 발견 한 위치에 커서를 놓습니다. $ 1, 다음으로 이동할 수 있습니다. $ 2 Tab 키를 사용하여 3 달러, 등등.

 '.text.html.basic': '이미지 링크': 'prefix': 'iml'body ': "" "     
 "" "

6. 선택적 매개 변수 추가

Atom을 사용하면 추가 정보 추가 을 사용하여 스 니펫에 선택적 매개 변수. 이 기능은 다른 사람도 편집기를 사용하고 스 니펫의 목적을 알리거나 사용자에게 메모를 추가하는 데 필요한 복잡한 사용자 정의 스 니펫이있는 경우 유용 할 수 있습니다.

선택적 매개 변수의 값은 다음과 같습니다. 자동 완성 결과 상자에 표시됨 접두사를 입력하기 시작할 때 나타납니다. 아래 예제에서 설명과 a를 추가했습니다. 더… 이전 링크 위젯 제목 맞춤 스 니펫 :

 '.text.html.basic': '위젯 제목': 'prefix': 'wti'body ':''description': '사이드 바 위젯에이 스 니펫과 함께 위젯 제목을 추가 할 수 있습니다.'descriptionMoreURL ':'http://hongkiat.com '

사용자가 접두사를 입력하기 시작하면 중량, 자동 완성 결과 상자 하단에 추가 정보 (설명 + 링크)가 표시됩니다. 봐. 기타 선택적 매개 변수 사용자 정의 스 니펫에 추가 정보를 추가하는 데 사용할 수 있습니다..