Atom package and snippet

     

  沒想到在工作了五年後還有機會再接觸寫code,也謝謝家裡老爹老娘的體諒.

         現在前端寫程式和以前印象中感覺有了巨大的不同，以前寫code都是用ide一個字一個字慢慢敲  compile 執行後 報錯然後開始debug，現在前端的開發 用的是看起來十分酷炫的editor 像是Atom or sublime 加上一些像是Emmet的外掛軟体 來編輯html css and javascript , 寫程式就像是寫選擇題，因為老師上課時用的是sublime, 因此在編輯 Atom snippet 的時候遇到了一些狀況,卡關了兩個禮拜,花了許多時間找資料,希望如果後續大家可以省下這些時間.

參考資料:

https://www.sitepoint.com/use-code-snippets-atom/

http://flight-manual.atom.io/using-atom/sections/snippets/

一開始就到atom 找snippet 的說明,但是只有一個javascript 的範例如下

但是我想做的是html 的snippet 阿.....

然後兩個禮拜過去了 鬍子都長出來了 終於在第二個網站看到

the snippet scope in snippets.cson must also have a period added to the start of that string. Popular web-language scopes include:

• 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

網站中的範例不知道為什麼存檔的時候會報錯, 但是自己試著打了一個css clear 是成功的 , 希望大家下次不用再花兩個禮拜研究atom 的snippet QQ (by the way snippet 的編輯  ubuntu 是在edit 底下的 snippets...    windows 是在 file 底下的snippets... 位置有一點點的不一樣 ,另外存檔後就可以使用, 但好像要新開的檔案才會生效).

// 後面為註解 存檔時要拿掉不然會報錯喔～～

'.text.html.basic':   //設定為  html 的snippet 

  'Css Clear':    //  snippet 命名

    'prefix': 'cssclear'  // 打什麼樣的縮寫可以觸發 此範例打 log 就會出現body 的內容

    'body': """

   

      """

下面這段直接貼上 save後,
打 csslcear 就可以選擇按下選擇cssclear  然後 按Enter鍵呼叫出body 的內容了 （ 因為tab 和emmet 快捷鍵相衝 所以用鍵盤+enter 選擇）

'.text.html.basic':  
  'css Clear':
    'prefix': 'cssclear'
    'body': """
   
      """

順便擺一下atom 剛進去的畫面

下面是有目前有用到的 外掛 package

emmet

default-language

fake-image-snippets

intentions

linter

linter-ui-default

minimap

open-in-browser

pigments

atom-beautify

autocomplete-path

busy-signal

color-picker