KKBruce的2016年軟體(開發)工具大補帖

因為不知名原因，電腦 Windows 10 所有原生 App 全部無法使用(如上圖)，網路上有放著放著就會自己好的說法，我放了二週，重開了 N 次，還是一樣，只好選擇進行 Re-Install OS。現在重灌 Windows 10 + 安裝 Driver (少數) + Windows 10 App 還原，整體時間和以前相比，時間成本真的是大大減少許多，而且已經還原 5 成以上作業的能力了。現在反而是非 Windows App 的軟體，下載、安裝與設定花的時間多很多。很久以前從 Scott Hanselman 的 Blog 學習到整理軟體清單(我2011年整理)這件事，當時從 Scott Hanselman 的清單挖到不少寶，有些現在還使用。時過境遷，在下載(找)軟體時，突然回想起軟體清單這件事，就順手把目前有在使用的軟體重新整理一下，就當成2016年版軟體(開發)工具清單。

好軟體需要你我支持

以下同時出現 free, pay 代表有測試版(或免費版)可下載使用，通常是功能限制。沒註明的通常是免費的。

身為一位軟體開發人員，我一直推廣：在個人付擔的起的情況下，不要當一位只願意自己喝星巴克而不願意買軟體的人。絕大部份的軟體都不貴，如果真的對你有幫助，你需要天天喝咖啡，就不能請一下這位寫出好用軟體的人(或公司)嗎？當然，那種數百美金以上的事，就看你怎麼找到痛點來介紹與推廣給公司，絕不是(抱怨)不可能，只是那痛點是否被你找到。

1. binaryfortress工具
2. Tools software
3. 文書工具
4. 截圖工具
5. 桌面工具
6. Windows 10 App
7. 輸入法
8. 開發工具
9. Visual Studio 2015 擴充套件
10. Azure 工具

使用Sublime Text 3製作可攜式React開發環境

在閱讀facebook React學教手冊時，希望能動手寫個「Hello World!」，這才發現，我們被Visual Studio保護的太好，根本不知道火星(前端)是個什麼樣的世界，目前VS2015對React的支援還很有限，只好把Sublime Text請出來。但公司、家裡每一台電腦都需要重新設置一次又很麻煩，想到了Sublime Text的portable version，不用還好，一用就愛上了它的方便性。

Sublime Text 3 portable version

之前和同事聊天才學到，原來Sublime Text本身的portable version是個很棒的設計。portable想成「綠色軟體」，即不用安裝下載即用。然後在這個下載的portable版本裡，你可以依照不同的工作模式去製作各種的開發環境，例如，JavaScript開發環境、CSS開發環境、PHP開發環境、AngularJS開發環境、C#開發環境…等，並且互相不干擾。

這樣，可以讓每一個portable保有小又快的特性(不太會有越來趣肥越慢的問題，因為每一portable只針對一個某個開發環境來製作)，並且帶到那用到那，換電腦也不必重新設定，非常方便。

React開發環境

以下Sublime Text 3的portable version並設定React的開發環境。

前端開發神器 - Emmet LiveStyle

從Emmet到Emmet LiveStyle

之前介紹過Zen Coding，而Emmet是ZenCoding更進一步的進化版（PS. ZenCoding 已停止維護）。目前Emmet更發展一套Emmet LiveStyle的前端開發神器，各位可以先看一下範例影片：

Emmet LiveStyle主要功能

• 即時更新。即見即所得 -- 不需要進行檔案儲存，不需要頁面重載。
• 不需要本地端檔案。
• 跨平台。
• Multi-View與Multi-Device更新。你可以在不同的視窗中打開同一頁面並獲得即時更新。如果你的顯示器夠大，可以輕鬆地調整響應式設計是前所未有的！在一個視窗中 DevTools 所做的變更將自動反應到其他視窗。
• Multi-site更新。你甚至可以Live edit不同的Web-sites，例如，desktop和你的mobile版本網站共享相同的CSS程式碼。
• 極其簡單的設置：在編輯器中打開CSS檔，並將其與LiveStyle瀏覽器進行關聯。

實用Sublime Text 2套件整理(2012/12)

Sublime Text 2的延伸套件

文字編輯器在接觸Sublime Text 2之前大多以Notepad++為主，筆記本為輔。不過看過Kevin Tseng的Sublime Text 2系列教學文之後，又花了一段時間來上手，發現Sublime Text 2這個又免費又付費的編輯器，實在是用程式設計師的角度來開發，而不是像一般編輯器是用編輯器的角度來開發，慢慢的喜歡上它，而且它多元化的輔助套件，和Visual Studio的擴充套件一樣，令Sublime Text 2加分不少。

以下整理我由A選到Z的套件，分類為安裝與選用，安裝是我正在安裝使用中的套件，選用是可依個人需求安裝使用。

Sublime Text 2實用安裝套件

• Package Control

  必啟用，沒有它你就無法安裝擴充套件，快速鍵：Ctrl+Shift+P

  啟用請參考：啟用Package Control

• BracketHighlighter

  讓你在撰寫如HTML程式碼時，能有高亮度提醒功能。請參考以下官方圖片：

  
• ColorHighlighter

  當的游標移至文字中如"#FFFFFF"，"rgb(255,255,255)"，"white"會自動顯示對應的顏色。當然，用在CSS居多。

Zen-Coding - 教你極速撰寫HTML5與CSS3程式碼

什麼是Zen-Coding？

Zen Coding本身是個外掛程式，官網上的資料，Zen Coding目前可以使用在36套各類HTML與CSS編輯器中，像是Aptana、TextMate (Mac)、Notepad++、PSPad、Dreamweaver、Sublime Text 2、Visual Studio…等常用的編輯器都有支援Zen Coding。

那Zen-Coding的作用是什麼呢？它的目標很簡單，就是利用已有的技術，高速的架構出HTML、CSS、XML、XSL或HAML。什麼是已有的技術，簡單說，它是CSS Selector（CSS選擇器）的再利用。

一些些改變，能帶來什麼呢？

極速

就我使用Zen-Coding它的經驗而言，就算只是簡單拿來產出HTML5或CSS3的程式碼，Zen-Coding也可以非常有效率的加速我寫HTML5與CSS3的速度，加多少，這我很難用言語或文字表示，先看一段影片：

哇!哇!哇!哇!哇!哇!

如果看完沒有跟著哇！那再來一次！

哇!哇!哇!哇!哇!哇!