2016年12月15日

Web程式碼編輯工具:Brackets

雖然不曉得為什麼,但我好像只要工作一段時間就會陷入整體工作停擺的狀況;人還是每天去上班,週遭的一切也仍然在進行,但就是只有我會呈現一個被專案或團隊遺忘的狀態,雖然還是一樣坐在那但不會有任何事發生,就好像徹底從團隊中消失一樣。

個人把這段時間稱為「放生期」。這現象還蠻奇妙的,出社會前不曾想過會有這種情況,明明身處其中卻又像是隱形的存在一樣,除了說「真的很妙」外我還真心想不到太多形容詞。

 不過人生會發生什麼事有時候也不是自己能選的,往好處想:至少有段空檔能思考近況然後投資些不同事情的時間,其實也不壞。

最後決定重新練習一下之前唸完沒機會用然後就忘的一乾二淨的CSS,近年因為前端和UI相關技術聲勢大漲的原因,網頁技術成了一種基本門檻,雖然我到現在還是不曉得究竟網頁技術和UI設計有什麼關係,但學會總是不吃虧。

說不定還有可能從遊戲開發這個無間地獄解放出來,但對這個圈子的心得有點難整理,也許留待後話吧。



目前開發網頁的工具而言雖然大部份還是使用Dreamweaver,不過因為前端用到JavaScript、後端用到PHP之類的語言,加上Dreamweaver在程式編輯和預覽的部份有些缺陷一直跟不上時代,身邊走這行的朋友慢慢都轉而投向比較純粹的程式編輯器。

一方面也是因為喜歡不同工具帶來的新鮮感,所以稍微搜尋了一下。

目前這方面的主流似乎是Sublime Text,之前玩的Visual Code也是類似的設計,沒有太多額外的功能,特色便是同樣的輕便單純,而且提供安裝客製化的外掛以強化原本較為陽春的核心,進而打造出偏個人化的Coding環境。

Sublime Text下載來用了一陣子後覺得… 介面實在蠻陽春的,當然這種工具本身就是以簡單為主,要什麼都作到的話整個IDE難免就會像Visual Studio那麼誇張,也就不是太易用了。

Sublime Text3

另一個是雖然可以更換佈景,但只會影響到編輯頁而已,側欄部份基本上就維持一樣的色系,雖然可以把側欄的部份收起來,但強迫症如我總是覺得哪裡不對勁。

後來再搜尋相關工具的時候意外找到原來Adobe也有製作一款叫作Barckets的編輯工具(是說那為什麼不把Dreamweaver也整修一下…),整體看上去和前述的Sublime Text相似,而且網路上有提到的文章大多也一片好評,所以就跟著下載來玩玩看。

安裝完成後,初次啟動會打開一頁Getting Started,簡介Brackests是個什麼樣的東西。

Brackests Getting Started頁。

我下載的Brackests是1.8版,在網路上雖然有提到先前的版本沒有中文化,不過這版已經有了,安裝後可以在「除錯」的項目中找到「切換語言」的選項。切換語系後除了介面所有選項都會轉換成繁中外,包括原本的Getting Started也會跟著換成中文,個人覺得還蠻細心的,而且用詞還挺活潑有趣的。

繁體中文語系切換。

雖然Brackets如同其它編輯器也支援一眾多到滿出來的語言,不過目前看起來最大的特色及用途還是用於網頁開發上。

Brackets所支援的語言。

 最重要的是它擁有即時預覽的功能,除了Google Chrome外,只要在選項中開啟「啟用實驗版即時預覽」,也能開啟Firefox來預覽。

和Dreamweaver相似,只要在原始碼中指定到某個區塊,即時預覽的頁面也會以閃一下爍底色來回應,能很容易知道目前編輯的區塊是影響哪個部份。

即時預覽功能按鈕。
顯示<p>標記的區塊範圍。

另一個很不錯的特色是只要在對應的tag上按ctrl+e快速鍵,就會拉開一個這樣的視窗,可以在色盤中快速調整需要的顏色或透明度,系統也會直接修改原始碼,不用再拼貼一次。

快速編輯面板

CSS在語法上需要輸入提示的時候,以色碼來說Brackets會有個簡單的標示,像background-image的話也會在syntax中彈出像url()之類的提示,Sublime Text就好像沒有了(但不曉得是否能透過套件強化)。
 
color參數提示
當然Brackests也支援安裝客製化的套件,安裝的方式和Sublime Text相同。

開啟套件管理頁面的按鈕。

好像是因為我安裝了Tab相關的套件,所以原本位於右側的功能鍵被移到底下去了(紅框處),點擊可以開啟套件管理的視窗。這部份不曉得如果未來像官網那樣,在右側因新增功能而增加按鈕時,整體版面會不會因此有所衝突,不過目前就先這樣了。
 Brackets的套件管理不像Sublmie Text要再作額外的設定,本身就已經視覺化而且相當清楚,在各分類中可以看到對應的內容並管理,如果要安裝的話,只要在選項欄位中貼上套件安裝網址,或是在GitHub下載套件後開啟Brackets→說明→ 顯示擴充功能資料夾,然後將檔案拖放到User資料夾中重開就行了。

Brackets套件管理頁面。

不過套件管理功能的開啟比較慢一些,稍微瀏覽了一下在數量上也比Sublime Text來得少。

目前有使用的相關套件:

Shizimily Multi-Encoding for Brackets
Brackests不支援UTF-8之外的編碼,Sublime Text 似乎還是可以開啟的,但Brackests會直接彈出錯誤然後拒絕。可以透過安裝這個套件來解決。

Brackets Extension-UTF8 converter
Sublime Text也有的語系轉存用套件。

可以將現有文件作語系轉換。
HTML Templates
可以快速生成HTML、 HTML5等基礎框架,方便快速開發。
 
HTML Templates可以選擇基礎框架。

 Custom Work:Tabs-Custom Working
Brackets沒有分頁功能,可以用這個套件開啟相關的功能。

開啟分頁功能。
Themes for Brackets
換佈景裝逼用,對個人開發實力及速度和經驗完全沒有任何關聯,但就是爽。

Themes for Barckets提供不少佈景可選。

*

基礎的安裝、調整和相關的外掛參考:
MUKI SPACE:我的 Brackets 編輯器設定 (佈景與外掛)
YAO WARK:Brackets 網頁開發軟體

*

使用到現在雖然是個人感覺,Brackets視覺上顯得較為一體化,從編輯區到側欄、切換頁面的彈出視窗以及功能列都是同一個色系,不會看起來一塊一塊的。

整體在設計上比較沒有那麼偏程式人員,介面和彈出視窗等動畫上甚致還有安排緩衝動畫,這點用心讓我還蠻喜歡的。


沒有留言:

張貼留言

路過留個言

後會無期了,Smash & Magic

從去年發佈後玩到現在的彈珠like手遊『Smash & Magic』在昨天例行更新後發佈了停止營運的公告,這之後一直到今年的10/31關閉為止,就是這款手遊的最後一哩路了。