Snippets은 정기적으로 사용되는 코드 덩어리로 프로그램 파일에 빠르게 삽입할 수 있다.
유용하고 Atom 텍스트 편집기의 핵심 기능이다.

아톰 패키지와 언어 문법은 종종 미리 정의된 snippets함께 정의 된다.
img입력 한 후 Enter을 치면 다음 코드가 나타난다.

<img src="" alt="" />

커서는 src 속성의 따옴표 사이에 위치한다. 다시 Tab키를 누르면 alt속성으로 이동한다.

snippets 트리거 텍스트를 입력하면 녹색 화살표로 표시된다. 커서를 아무 곳에서 놓고 Alt+Shift+S를 누르면 현재 파일의 언어 유형에 대한 모든 정의된 snippets을 볼 수 있다.
목록을 스크롤하거나 특정 snippets을 찾아서 사용하면 된다.

자신만의 Snippets을 만드는 방법

윈도우에서는 왼쪽 상단 메뉴에 File -> snippets...를 선택
Snippets에서는 다음 정보가 필요하다.

  1. 언어 식별자 또는 범위 문자열
  2. 코드를 간결하게 설명하는 이름
  3. Enter 키를 누르면 해당 Snippets을 실행하는 트리거Trigger 텍스트
  4. Snippets 본문 코드

Snippets을 정의하는 예는 다음과 같다.

'.source.js':
  'Snippet Name':
    'prefix': 'Snippet Trigger'
    'body': 'Hello World!'

Snippet은 Tab을 누르지말고 Enter를 사용해야 한다.
Snippets 문서에서는 Tab키로 안내를 하고 있지만,
필자는 Emmet을 사용하므로 Emmet의 Tab키와 충돌이 나는 것으로 알고 있다. 그래서 Enter를 사용한다.
Snippets의 키를 Tab로 하고 싶다면 Emmet의 단축키를 다른 것으로 변경하면 된다.

※ CSON은 CoffeeScript Object Notation의 약자이다.

먼저 Snippets을 적용할 수 있는 언어를 식별하는 범위 문자열이 필요하다.
Ctrl+Shift+P Command Panel을 열어 install packages를 입력한다.

html lang검색을 하면 해당 언어가 이미 설치 되어있는 것을 알 수 있다. Settings를 눌러서 세팅화면으로 들어간다.

그러면 다음 아래의 이미지처럼 각 언어의 Grammar를 볼 수 있다.


화살표 되어있는 부분을 마우스로 긁어서 복사Ctrl+C를 하면된다.

또한 snippets.cson안에 Snippets 범위는 문자열의 시작 부분에 마침표가 추가 되어야 한다.
많이 사용하는 언어는 다음과 같다.

  • HTML: .text.html.basic
  • CSS: .source.css
  • SASS: .source.sass
  • JavaScript: .source.js
  • JSON: .source.json
  • PHP: .text.html.php
  • Java: .source.java
  • Ruby: .text.html.erb
  • Python: .source.python
  • plain text (including markdown): .text.plain

위에서 언급했듯이 Snippets에 들어간다.

아래 이미지는 Snippets을 HTML적용해보았다.

${1}, ${2}이 보일 것이다. 숫자를 먹힌 것은 트리거를 실행한 후 Tab를 누르면 순서대로 커서가 이동하는 것을 정한 것이다.
이 기능은 서브라임 텍스트의 스니핏과 동일하다.

htmlko트리거를 입력 후 Enter를 적어야한다.
html만 입력을 해도 관련된 Snippets가 나와서 방향키 ↑Up, ↓Down 움직인 후 원하는 곳에서 Enter를 치면 된다.

완성된 화면을 볼 수 있다.

더 많은 Snippets 예제를 보려면 아래 링크를 참조하면 된다.

참고 사이트: