初階SASS安裝基本與學習參考用筆記
atom初試與好用的擴充套件
atom初試與好用的擴充套件
因為想找方便配合SASS的撰寫網頁的方便軟件
DW實在有點太繁重的感覺
其他的又需要付費~
找來找去就找到了atom
雖然本來是在找自動 compile SASS的軟件拉
找到Prepros
他是比compass方便安裝~~也很直覺能夠使用,
不過compile之後檔案要在重開一次才能看見更新
相較之下我還是回來用compass好
另外Koala好像也是挺方便的
不過我覺得習慣一種就好啦
然後這裡有非常詳盡的教學網站
我一邊看他示範一邊做
真的教得非常詳細呢!
DW實在有點太繁重的感覺
其他的又需要付費~
找來找去就找到了atom
雖然本來是在找自動 compile SASS的軟件拉
找到Prepros
他是比compass方便安裝~~也很直覺能夠使用,
不過compile之後檔案要在重開一次才能看見更新
相較之下我還是回來用compass好
另外Koala好像也是挺方便的
不過我覺得習慣一種就好啦
然後這裡有非常詳盡的教學網站
我一邊看他示範一邊做
真的教得非常詳細呢!
值得紀錄的幾點
- 整理一份乾淨的專案資料夾 (以後開新專案都複製該原始資料夾撰寫)
- cd 資料夾名稱 ( 指定到該資料夾 )
- compass watch 資料夾名稱 (監聽SASS修改)
另外就是關於SASS架構分檔的學習
ATOM的部分
他很方便的可以安裝很多擴充套件,而且都能一鍵下載
不喜歡就刪掉或關閉~還有繁體中文支援
真的是很方便呢!!!
紀錄一下
套件推薦取自於此
---------------------------
語言相關
試用中
因為很多沒用過所以轉貼了一下~~以後有機會多多嘗試後再來修改
----------------------------
紀錄一下常用快捷鍵
ctrl-shift-p 所有選項
ctrl-shift-m 預覽網頁檔
-------------------------------------------------------------
另外就是如果SASS裡面有中文註釋的話
轉出來的CSS就會出現錯誤
解決方法如下
把專案底下把設定檔 config.rb 打開,在最前端添加
Encoding.default_external = 'utf-8'
然後重新 compass watch 就可以了。
ATOM的部分
他很方便的可以安裝很多擴充套件,而且都能一鍵下載
不喜歡就刪掉或關閉~還有繁體中文支援
真的是很方便呢!!!
紀錄一下
套件推薦取自於此
---------------------------
- Auto Update Packages 這個套件正如他的名字,可以自動更新你的所有套件,相當的方便使用,印象中預設是要自己手動更新的。
- Atom Color Highlight 當你撰寫到色碼的時候,他會自動把底色轉成你設定的顏色,方便確認跟選擇,可以搭配 Color Picker 使用。
- Autocomplete Plus 比官方預設的 Autocomplete 還要強大的 Package 有了這個你就可以關閉預設的 Package 了,可以幫你節省掉不少時間。
- Autocomplete Snippets 強化 Autocomplete Plus 的套件,提供更多建議的選項。
- Autocomplete Paths 他會讀取你的檔案結構,幫你補完你的檔案路徑。
- Color Picker 圖形化界面,可以讓你快速的選擇你要的顏色。
- Emmet 網頁開發當然不能少掉 Emmet ,雖然現在大多數用 Jade 比較少用到,不過仍然很推薦使用。
- File Icons 單純美化用,你的檔案前面都會增加那個語言的 Logo ,超好看!
- Git Diff 官方內建的套件,本來是不會拿出來講,但是強烈建議打開 Show Icons In Editor Gutter ,可以幫助判讀做了哪些修改。
- Git Plus 讓你 Git 操作再也不需要終端機了。
- Go To Line 有的時候要移動很多行,嫌按著鍵盤跑太慢,又不想用滑鼠,那就使用者個套件可以跳到你想要的行數。
- Highlight Line 他會高亮你游標在的那一行,可以幫助你判斷游標在哪邊,其實還有另外一個套件 Highlight Column是垂直的,不是水平的,我用的超不習慣,個人是不推薦。
- LiveReload 可以與瀏覽器上的 LiveReload 連接使用,存檔時自動刷新網頁,這個套件有內建 LiveReload Server。
- Mocha Test Runner 他可以直接在 Atom 執行 Mocha ,不用在 Atom 與終端機之間切來切去。
- Project Manager 讓你可以像 Sublime Text 一樣自由自在的建立、切換工作區
- Zen 讓你可以一鍵關閉多餘的界面,讓你專心開發。
- Localization Atom 界面多國語言化,降低使用門檻,目前有正體中文喔!
- Recent Projects 這個套件會顯示最近 20 筆的專案紀錄,方便你啟動的時候回覆到原本的專案、或是切換專案,這個可能比 Restore Windows 還要好用。
- Merge Conflicts 這個套件會把你 Git 有衝突的地方高亮起來,並且可以直接用 GUI 選擇,而不再需要人工刪除、更改。
- Atom Beautify 提供大量語言的 Beautify 功能,如果沒有支援的還可以自己發 PR 增加喔!
- Git Log 提供 Git 得視覺化 log,畫面非常的漂亮清楚。
- Git Blame 提供 Git Blame 的功能,可以清楚瞭解哪一行是那個 commit 更改的、誰寫的。
- Highlight Selected 高亮已選擇的項目,可以幫助你找到它。
- Indent helper 幫助你把賦予值的等於位置對齊。
語言相關
- Coffee Compile 讓你可以即時看到 Coffee 轉 Javascript 的結果,可以方便除錯。
- Coffee Lint 如果你的 Coffee 語法寫錯了,他會有提示!可以幫你減少一些笨笨的錯誤,例如縮排。
- Refactor 重構的基礎套件,需要搭配額外的套件使用。
- Coffee Refactor Coffee 的重構套件,雖然現在用到的不多,不過挺好用得很推薦。
- Go Plus 身為 Golang 的愛好者當然不能少掉這個,一個套件幾乎可以滿足你開發 Go 的需求。
- Go Format 你存檔的時候自動幫你執行 go fmt,非常的好用。 ### 主題
試用中
- Restore Windows讓你重新啟動的時候可以回復到關閉的時候的工作環境,Atom 預設是會紀錄你在專案下的工作環境,但是你關閉的時候,他並不會讀取回去那個專案,你必須要自己開回去才行。
- Fat Arrow快捷鍵輸入 => 和 -> ,根本懶人專用XD。
- Quick Jump類似 Vim EasyMotion 的實做的套件。
- Indent helper對齊你的縮排,宣告變數、資料的時候很好用,可以提高可讀性。
- Clipboard History剪貼簿紀錄!可以讀取最近的剪貼紀錄。
因為很多沒用過所以轉貼了一下~~以後有機會多多嘗試後再來修改
----------------------------
紀錄一下常用快捷鍵
ctrl-shift-p 所有選項
ctrl-shift-m 預覽網頁檔
-------------------------------------------------------------
另外就是如果SASS裡面有中文註釋的話
轉出來的CSS就會出現錯誤
解決方法如下
把專案底下把設定檔 config.rb 打開,在最前端添加
Encoding.default_external = 'utf-8'
然後重新 compass watch 就可以了。