원자에서 코드 스 니펫을 사용하는 방법

Atom Editor Code Snippet : 효율적인 코드 재사용 도구 코드 스 니펫은 프로그램 파일을 빠르게 삽입 할 수있는 재사용 가능한 코드 블록이며 Atom 텍스트 편집기의 핵심 기능입니다. 사전 정의 된 조각에는 일반적으로 원자 패키지 및 언어 구문이 제공됩니다.

사용자 정의 스 니펫은 파일로 만들어 정의 할 수 있습니다. 언어 식별자, 이름, 트리거 텍스트 및 파편 본문 코드 (선택 사항 탭)가 필요합니다.

스 니펫은 Atom에서 지원하는 모든 프로그래밍 언어에 사용할 수 있습니다. 단편을 정의 할 때 언어의 올바른 범위를 지정하십시오. 변수를 포함 할 수 있으며 공통 코드 블록을 삽입하고 시간을 절약하고 코드 일관성을 보장하는 데 사용할 수 있습니다.

코드 스 니펫은 프로그램 파일을 빠르게 삽입 할 수있는 일반적인 코드 블록입니다. 그것들은 매우 유용하며 Atom 텍스트 편집기의 핵심 기능이기도합니다. 즉, 코드 스 니펫의 존재를 깨닫지 못하거나 그들의 힘을 경험하지 않고 몇 달 동안 편집자를 사용할 수 있습니다! 원자 패키지 및 언어 구문에는 일반적으로 사전 정의 된 코드 스 니펫이 함께 제공됩니다. 예를 들어 새 HTML 파일을 시작하거나 열면 IMG를 입력하고 탭을 누릅니다. 다음 코드가 나타납니다.

커서는 ~/.atom 속성 따옴표 사이에 위치합니다. 탭 키를 다시 누르면 커서가 snippets.cson 속성으로 이동합니다. 마지막으로 탭 키를 누르면 커서가 레이블의 끝으로 이동합니다. 입력을 시작하면 코드 스 니펫 트리거 텍스트가 녹색 화살표로 표시됩니다. 커서를 어디에나 넣고 Alt-Shift-S를 누르면 현재 파일 언어 유형의 모든 정의 된 코드 스 니펫을 볼 수 있습니다. 목록을 스크롤하거나 검색하여 특정 코드 스 니펫을 찾고 사용하십시오. 또는 설정에서 패키지 목록을 열고 언어를 입력하여 모든 구문 유형의 목록을보십시오. 하나를 선택하고 코드 스 니펫 섹션으로 스크롤하여 사전 정의 된 트리거 및 코드를 볼 수 있습니다.

자신만의 코드 스 니펫을 만드는 방법

당신은 코드 스 니펫으로 정의 할 수있는 자체적으로 사용되는 코드 블록을 갖게됩니다. node.js 응용 프로그램을 디버깅 할 때 사용하는 유용한 명령은 객체를 콘솔에 JSON 문자열로 로그인하는 것입니다.

Atom은 이미 사전 정의 된

에 대한 트리거를 가지고 있지만 사용자 정의 코드 스 니펫으로 개선 할 수 있습니다. 사용자 정의 코드 스 니펫은 파일에 정의되어 있습니다. 파일 메뉴에서 코드 스 니펫 열기를 선택하여 편집하십시오. 코드 스 니펫에는 다음 정보가 필요합니다

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

언어 식별자 또는 <🎜 🎜> 범위

문자열 <🎜 🎜> 코드 이름을 단순하게 설명하십시오 탭 키를 누르면 코드 스 니펫의 트리거 텍스트가 트리거되고 src 옵션 탭이있는 코드 스 니펫 바디 코드. alt

<🎜 🎜>의 끝으로 이동하고,

를 입력하고 탭을 누르십시오 - 예, 코드 스 니펫을 정의하는 데 도움이되는 코드 스 니펫도 있습니다! … <🎜 🎜>

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

CSON은 커피 스크립트 개체 표기법입니다. JSON에 직접 매핑 할 수있는 간결한 구문입니다. 첫째, 코드 스 니펫을 적용 할 수있는 언어를 식별하는 범위 문자열이 필요합니다. 범위를 결정하는 가장 쉬운 방법은 설정에서 패키지 목록을 열고 "언어"를 입력하는 것입니다. 필요한 구문 패키지를 열고 상단 근처의 "스코프"정의를 찾으십시오.

코드 스 니펫 범위의

는 문자열의 시작 부분에 기간을 추가해야합니다. 인기있는 웹 언어 범위는 다음과 같습니다 snippets.cson html :

<: :> CSS :
• .text.html.basic <<<> 사스 :
<🎜 🎜> javaScript :
• .source.css <<<> JSON :
<🎜 🎜> <<<> php :
• .source.sass <: :> Java :
<🎜 🎜> <<<> 루비 :
• <🎜 🎜> <: :> 파이썬 : .source.js
일반 텍스트 (Markdown 포함) : <🎜 🎜>
• .source.json 따라서 다음 방법을 사용하여 JSON 로깅 코드 스 니펫을 정의 할 수 있습니다.
• 파일이 저장되면 코드 스 니펫이 적용됩니다. 이 예에서는 다음과 같습니다. <<> .text.html.php 스코프는
(javaScript의 경우) <🎜 🎜>로 설정됩니다 코드 스 니펫의 이름은 "log json"<🎜🎜>입니다 <(> 탭 트리거 (접두사)가
• .source.java로 설정됩니다 코드 스 니펫의 본문은
로 설정되어 있습니다 (그러나 아래와 같이 추가 제어 코드를 추가했습니다).
• .text.html.erb 신체의 단일 따옴표는 Backslash ()로 탈출해야합니다. 탭 정지는 달러 표시와 숫자 (예 : $ 1, $ 2, $ 3 등)를 사용하여 정의됩니다. $ 1은 커서가 나타나는 첫 번째 탭 위치입니다. 탭 키를 누르면 커서가 $ 2로 이동합니다. 위의 탭 정지 $ 1은 기본 텍스트를 사용하여 정의되어 사용자에게 다음을 상기 시키거나 프롬프트합니다. 코드 스 니펫을 사용하는 경우
가 <🎜 🎜>에서 선택되므로 적절한 개체 이름으로 변경할 수 있습니다.
• 다른 코드 스 니펫은 <🎜 🎜> 파일의 하단에 추가 할 수 있습니다. 동일한 언어의 두 개 이상의 코드 스 니펫이 필요한 경우 해당 스코프 섹션에 추가하십시오. 예를 들어, .source.python의 범위에서 다른 JavaScript 코드 스 니펫을 만들어 배열의 길이를 기록 할 수 있습니다.
두 개의
• 태그가 있습니다. .text.plain가 나타나면 두 개의 커서가 표시되며
의 두 인스턴스가 강조 표시됩니다. 배열 이름을 한 번 입력하면 둘 다 변경됩니다!

멀티 라인 코드 스 니펫 <🎜 🎜> <more> 더 모험적인 느낌이라면 3 개의 이중 인용문 "" "" "신체 코드의 시작과 끝에서 더 긴 멀티 라인 코드 스 니펫을 정의 할 수 있습니다.이 코드 스 니펫은 단일 헤더 라인으로 2 × 2를 생성합니다. . 테이블 : <<><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;img src=&quot;&quot; alt=&quot;&quot; /&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> 코드 스 니펫 본문 내부의 코드 압입은 CSON 정의에 영향을 미치지 않지만, 더 큰 가독성을 위해 신체 정의 외부에 압축하는 것이 좋습니다. 코드 스 니펫에 대한 행복한 글을 기원합니다! Atom을 처음 접하는 경우 권장 패키지에 대해서는 10 개의 필수 원자 추가 기능도 참조해야합니다. </p> <p> Atom 에서 코드 스 니펫을 사용하는 <using> faq <a> Atom에서 새 코드 스 니펫을 만드는 방법은 무엇입니까? </a></using></p> <sn> Atom에서 새 코드 스 니펫을 만드는 것은 간단한 프로세스입니다. 먼저 파일 메뉴로 이동 한 다음 코드 스 니펫으로 코드 스 니펫 파일을 열어야합니다. 코드 스 니펫을 정의 할 수있는 .cson 파일이 열립니다. 각 코드 스 니펫은 적용되는 언어를 지정하는 줄로 시작하고, 코드 스 니펫 이름이 따옴표로 시작됩니다. 그런 다음 코드 스 니펫과 코드 스 니펫 본문을 트리거하는 접두사를 정의합니다. 본문은 여러 줄이 될 수 있으며 <p> 구문을 사용하여 탭을 지정합니다. </p> <code> Atom에서 코드 스 니펫을 사용하는 방법은 무엇입니까? <h3> <sn> Atom에서 코드 스 니펫을 사용하려면 코드 스 니펫에 정의 된 접두사를 입력하고 "탭"키를 누릅니다. 이것은 커서에 코드 스 니펫의 본문을 삽입합니다. 코드 스 니펫에 탭이있는 경우 "탭"키를 사용하여 그들 사이를 이동하고 원하는 텍스트를 입력 할 수 있습니다. </sn> </h3> <code> Atom의 프로그래밍 언어로 코드 스 니펫을 사용할 수 있습니까? <p> <can> 예, Atom에서 지원하는 모든 프로그래밍 언어에 코드 스 니펫을 사용할 수 있습니다. 코드 스 니펫을 정의 할 때 언어의 올바른 범위를 지정하면됩니다. 예를 들어, JavaScript의 경우 를 사용하고 Python의 경우 를 사용합니다. <code>.source 내 코드 스 니펫을 다른 사람과 공유하는 방법은 무엇입니까? ${1:default_text} 코드 스 니펫을 다른 사람과 공유하려면 파일을 공유 할 수 있습니다. 이 파일에는 모든 코드 스 니펫 정의가 포함되어 있으며 Atom 구성 디렉토리에서 찾을 수 있습니다. 또는 코드 스 니펫으로 패키지를 만들어 Atom 패키지 저장소에 게시 할 수 있습니다.

코드 스 니펫을 사용하여 일반적으로 사용되는 코드 블록을 삽입 할 수 있습니까? <h3> </h3> 절대적으로! 코드 스 니펫은 일반적인 코드 블록을 삽입하는 좋은 방법입니다. 자주 입력 한 스 니펫의 스 니펫을 정의한 다음 몇 개의 키로 삽입 할 수 있습니다. 이렇게하면 많은 시간을 절약하고 코드의 일관성을 보장 할 수 있습니다. <p> <it> 기존 코드 스 니펫을 Atom에서 편집하는 방법은 무엇입니까? </it></p> <an> Atom에서 기존 코드 스 니펫을 편집하려면 파일을 열고 편집 할 코드 스 니펫을 찾아야합니다. 그런 다음 필요에 따라 접두사, 본문 또는 범위를 수정할 수 있습니다. 완료되면 파일을 저장하여 변경 사항을 적용해야합니다. <h3><var> 코드 스 니펫에서 변수를 사용할 수 있습니까? <h3> 예, 코드 스 니펫에서 변수를 사용할 수 있습니다. 변수는 </h3>로 표시되며, 여기서 "1"은 탭이고 "default_text"는 삽입 할 기본 텍스트입니다. 변수를 사용하여 코드 스 니펫에서 자리 표시자를 만들어 코드 스 니펫을 삽입 할 때 이러한 자리 표시자를 신속하게 채울 수 있습니다. <p> <ete> Atom에서 코드 스 니펫을 삭제하는 방법은 무엇입니까? <code>${1:default_text} Atom에서 코드 스 니펫을 삭제하려면 파일을 열고 코드 스 니펫을 삭제할 것을 찾아야합니다. 그런 다음 코드 스 니펫을 정의하는 코드 줄을 삭제하고 파일을 저장하십시오. 코드 스 니펫은 즉시 삭제됩니다.

다른 편집기에서 코드 스 니펫을 Atom으로 가져올 수 있습니까? <h3> <does> Atom은 다른 편집기에서 코드 스 니펫을 가져올 내장 기능이 없지만 다른 편집기의 스 니펫 정의를 수동으로 복사하여 Atom의 </does> </h3> 파일에 붙여 넣을 수 있습니다. Atom의 코드 스 니펫 구문과 일치하도록 구문을 약간 조정해야 할 수도 있습니다. <p> <code> Atom의 찾기 및 교체 기능에서 코드 스 니펫을 사용할 수 있습니까? <code>snippets.cson 예, Atom의 찾기 및 교체 기능에서 코드 스 니펫을 사용할 수 있습니다. 찾기 및 교체 패널을 열면 교체 필드에 코드 스 니펫을 입력 할 수 있습니다. 교체 작업을 수행하면 코드 스 니펫이 발견 된 텍스트의 위치에 삽입됩니다.

위 내용은 원자에서 코드 스 니펫을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!