[태그:] editor

생활코딩에 Atom editor 사용법(https://opentutorials.org/module/1579)이 있길래, 보면서 몇가지 적는다. 적다보니, 내가 뭘 또 이런 것까지 적고 있나 싶긴 한데… ^^;;

• Toggle tree view:  View / Toggle Tree view (Ctrl + \)
• Find in buffer: Ctrl + F
• Find Next: F3, Find Previous: Shift + F3
• Find File: Ctrl + P. 파일명 일부 혹은 패턴만 쳐도 찾아준다.
• 아래쪽 오른쪽에 나온 Auto detect 된 File type이 나온다. 변경하고 싶다면 클릭 후 변경.
• Toggle Developer tools: View / Developer / Toggle Developer tools (Ctrl + Shift + I)
• Stylesheet: Atom 에디터 내의 element들의 lesscss를 수정할 수 있다. File / Stylesheet
• Plugins:
  • emmet: HTML tag 작성 시, syntax 작성 후 Tab 혹은 Ctrl+E 하면 html로 풀어준다.
    • !: html template 입력
    • li*20: <li></li> 가 20개 입력.
    • li>a*20: <li> <a href=””></a><a href=””></a>…<a href=””></a> </li>
    • (li>a)*20: <li><a href=””></a></li> <li><a href=””></a></li>…<li><a href=””></a></li>
    • Syntax: https://docs.emmet.io/cheat-sheet/, 더 자세히는 https://docs.emmet.io/abbreviations/syntax/, CSS도 abbreviation 제공(https://docs.emmet.io/css-abbreviations/)
      • Child: >
        • div>ul>li

          <div>
              <ul>
                  <li></li>
              </ul>
          </div>

      • Sibling: +
        • div+p+bq

          <div></div>
          <p></p>
          <blockquote></blockquote>

      • Climb up: ^
        • nav>ul>li^^a

          <nav>
              <ul>
                  <li></li>
              </ul>
          </nav>
          <a href=""></a>

      • Multiplication: *
        • a*10

          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>

      • Grouping: ()
        • nav>ul>(li>a)*5

          <nav>
              <ul>
                  <li><a href=""></a></li>
                  <li><a href=""></a></li>
                  <li><a href=""></a></li>
                  <li><a href=""></a></li>
                  <li><a href=""></a></li>
              </ul>
          </nav>

      • Attiribute:
        • ID attribite: #
          • nav#navigation

            <nav id="navigation"></nav>

        • Class attribute: .
          • li.list

            <li class="list"></li>

        • Tag attribute: []
          • a[target=”_blank” title=”asdf”]

            <a href="" target="_blank" title="asdf"></a>

      • Value: {}
        • li>a>{table}

          <li><a href="">table</a></li>

      • Numbering: $
        • ul.li.item$*5

          <ul class="li item1"></ul>
          <ul class="li item2"></ul>
          <ul class="li item3"></ul>
          <ul class="li item4"></ul>
          <ul class="li item5"></ul>

  • script: script를 입력 후 단축키(Shift + Ctrl + B로 바로 실행 결과 확인. 실행 환경은 따로 설치해야 함.