Atom Editor Code Snippet : 효율적인 코드 재사용 도구
커서는 ~/.atom 속성 따옴표 사이에 위치합니다. 탭 키를 다시 누르면 커서가 snippets.cson 속성으로 이동합니다. 마지막으로 탭 키를 누르면 커서가 레이블의 끝으로 이동합니다. 입력을 시작하면 코드 스 니펫 트리거 텍스트가 녹색 화살표로 표시됩니다. 커서를 어디에나 넣고 Alt-Shift-S를 누르면 현재 파일 언어 유형의 모든 정의 된 코드 스 니펫을 볼 수 있습니다. 목록을 스크롤하거나 검색하여 특정 코드 스 니펫을 찾고 사용하십시오. 또는 설정에서 패키지 목록을 열고 언어를 입력하여 모든 구문 유형의 목록을보십시오. 하나를 선택하고 코드 스 니펫 섹션으로 스크롤하여 사전 정의 된 트리거 및 코드를 볼 수 있습니다.
에 대한 트리거를 가지고 있지만 사용자 정의 코드 스 니펫으로 개선 할 수 있습니다. 사용자 정의 코드 스 니펫은 파일에 정의되어 있습니다. 파일 메뉴에서 코드 스 니펫 열기를 선택하여 편집하십시오. 코드 스 니펫에는 다음 정보가 필요합니다
<img src="" alt="" />
문자열 <🎜 🎜>
src
alt
를 입력하고 탭을 누르십시오 - 예, 코드 스 니펫을 정의하는 데 도움이되는 코드 스 니펫도 있습니다! … <🎜 🎜>
<img src="" alt="" />
코드 스 니펫 범위의
는 문자열의 시작 부분에 기간을 추가해야합니다. 인기있는 웹 언어 범위는 다음과 같습니다
snippets.cson
.text.html.basic
<<<> 사스 : .source.css
<<<> JSON : .source.sass
<: :> Java : .source.js .source.json
따라서 다음 방법을 사용하여 JSON 로깅 코드 스 니펫을 정의 할 수 있습니다.
.text.html.php
.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;'><img src="" alt="" /></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}
코드 스 니펫을 사용하여 일반적으로 사용되는 코드 블록을 삽입 할 수 있습니까? <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
위 내용은 원자에서 코드 스 니펫을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
