[VSCode] 檔案圖示無法顯示

症狀

如官方網站所示的精美圖示沒有被顯示出來 :(

解法

首先要確定你有要求 VSCode 顯示檔案圖示：

如果確定已經選擇了一個圖示佈景，卻還是沒有圖示，則可試著參考這裡。

VS Code 簡介

官方網站：https://code.visualstudio.com/

簡介

VSCode 是微軟公司所推出的程式碼編輯器，可以在各個主流平台上面運行。官方所釋出的預設模式已經包含了許多網路相關程式語言的支援（像是 JS, TypeScript, CSS, HTML 的編輯等等），並且可以利用外掛（Extension）來擴充其功能。也因為擴充功能的關係，它已經相當接近一個整合開發環境了。

授權小爭議

有人在 VSCode 的程式碼倉庫詢問了「為什麼官方的執行檔發布包和程式碼倉庫的授權不一樣」之問題，官方之回答重點有：

1. 有許多軟體也使用了這樣的流程（像是 Chrome 建立在 Chronium 之上，但 Chrome 使用了非自由軟體的授權）
2. 官方所散發的執行檔包裝是建置自 VSCode 的程式碼倉庫，不過在建置前，先調整了 product.json 使建置後的結果包含了微軟公司的商標、圖示等資料。
3. 若對官方散發的執行檔所附帶的授權合約不滿意，您可以自行由 VSCode 的程式碼倉庫下載原始碼，自行建置屬於自己的執行檔

雖然有這些解釋，然而還是有人沒辦法接受某些軟體以像是 VSCode 的授權方式釋出。

其他相關文章

• 檔案圖示無法顯示

JavaScript

超簡單介紹

JavaScript （簡稱 JS）是歷史悠久，使用也非常廣泛的一個動態程式語言。諸君所見到的一切網頁幾乎都含有 JS 程式碼，

「受歡迎」歸「受歡迎」，然而它也因為它語法上的「不確定性」以及其動態語言的本質受到許多人詬病。所謂「不確定性」是指其某些違背主流程式語言的規則（例如「所謂 this 為何物」的問題）。這樣的性質燃燒了許多有經驗的程式設計人員腦袋內的養分以及腦細胞。另外，動態語言的本質，讓大多數 JavaScript 陳述式結果無法輕易地被預測（間接讓設計整合開發環境的人傷透腦筋）

雖然如此，但若想不接觸 JS，就必須迴避幾乎所有跟 Web 開發的一切專案，會失去不少機會。再加上 Node.js 的出世，讓 JS 得以在伺服器端，甚至是桌面以及手機應用上大放異彩（藉著 electron 以及 cordova 等）。因此，還是有不少程式設計人員前仆後繼的投入學習。

開發工具

JS 的工具、程式庫相當相當相當的多，簡直就是戰國時代！因此，此處所列者為千秋所接觸過的工具。

1. 整合開發環境
1. Visual Studio Code
   在一定的限度內提供程式碼自動完成的功能
   需要注意程式碼本身在 MIT 授權下發布，但是在官方網站上發布的執行檔則使用了比較有限制性的授權。請參看這裡的解說。
2. Atom
   具有高度自訂性的編輯器。由 Github 所開發。和 VIsual Studio Code 一樣，是使用所謂的 Web Technology 寫成的桌面軟體。
2. 執行環境
1. 瀏覽器
   一般用來調整網頁顯示，以及增加網頁功能的 JS 都是在瀏覽器上運作
   建議使用 Firefox, Chrome 或 Chromium，因為有好用的開發者工具。
2. Node.js
   獨立於客戶端網頁運作的 JS 程式碼均在 node.js 上運作
3. 相依性管理工具
1. npm
   和 Node.js 相輔相成的套件管理工具
   
4. 前處理工具
1. Browserify
   讓 node.js 的套件可以被用在瀏覽器環境上
5. 建置工具
1. Gulp
6. 偵錯工具
1. 您的瀏覽器
   您的瀏覽器有開發者工具，好好利用吧！
2. Node.js (node debug xx.js)
7. （族繁不及備載）

學習資源

1. 互動式教學網站
1.  Codecademy
   不錯的互動教學網站，非常適合初學者使用。也提供其他程式語言的教學
2. 教學與練習網站
1. CodeWars
   也提供其他程式語言的練習
   非基礎題目可能需要演算法的基礎
2. Codingame
   也提供其他程式語言的練習
   非基礎題目可能需要演算法的基礎
3. JSWarrior
   小遊戲
4. Untrusted
   也是小遊戲
5. exercism.io
   練習網站。也提供其他程式語言的練習。特點是撰寫程式時可以離線，在本機上測試通過後才上傳程式碼。
6. JavaScript 30
   以「學習程式就是要親手打造點東西」的精神，提供一個 30 天的 JS 打造之旅。
   千秋的練習：https://gitlab.com/chiakikame/JS30
7. NodeSchool
   提供許多線下 workshop ：教完後就馬上動手做！
3. 參考文件
1. MDN
   提供完整的開發資料
2. Can I use ...
   很適合查詢某瀏覽器是否支援某組 JS API 的好工具
4. JS 專家文串
1. Eric Elliott
   Programming JavaScript Application 的作者

相關程式庫

基本上，在 node.js 上可以執行的東西，有可能可以利用 browserify 使其可在瀏覽器上面運作；但是，只在瀏覽器上面運作的東西大多無法在 node.js 上面運作：因為大多是使用者界面元件相關的東西，會依賴在 node.js 上面沒有的瀏覽器 API 框架。

1. 基礎程式庫（執行引擎）
1. 瀏覽器
   在瀏覽器內執行 JS，以達成某些動態呈現的需求
2. Node.js
   在本機上執行 JS 的執行引擎
2. 使用者界面框架（在瀏覽器上運作）
   某些框架提供了需要 Node.js 才可以運作的「伺服器端呈現」（server-side rendering）功能
1. Vue.js
   新起之秀！下面列出 vue.js 相關的工具
1. Quasar
   可以用同一份程式碼建立網頁、桌面程式（Electron）以及手機程式的框架
2. DejaVue
   將使用 Vue.js 的程式圖形化使開發者易於了解
3. avoriaz
   測試使用了 Vue.js 程式的工具
4. eagle.js
   基於 Vue.js 的投影片播放框架
2. React 
3. Mithril
4. Marko
5. AngularJS 
6. Riotjs
7. hyperapp
3. 使用者界面元件以及小服務（瀏覽器上面運作）
1. 元件
1. medium-draft
   Rich text 編輯器
2. medium-editor
   Inline editor
3. quill
   很強大的 rich text 編輯器
4. trix
   簡單的 rich text 編輯器
5. pell
   小巧，無相依元件的 rich text 文字編輯器
6. uppy
   檔案上傳元件。（開發中） 
7. monaco-editor
   在瀏覽器內，讓您的使用者使用和 VS Code 一樣的編輯器
8. Keen-UI
   基於 vue.js 的元件庫
9. notyf
   沒有其他相依元件的 notification 程式庫
10. flatpickr
    日期選擇器
11. headroom.js
    做出像是 medium.com 那樣子會自動隱藏 / 現身的 heading
12. tingle.js
    在網頁繪圖區做出 modal 對話方塊的效果（跟 JS 的 alert 不同）
13. Choices
    下拉式選單 / 文字方塊功能增強
14. Tippy.js
    工具提示（tooltip）
15. botui
    建立一個可以利用對話的方式來收集使用者資訊（代替表單）的使用者界面
2. 使用者界面功能
1. validate.js
   提供送出表單之前，驗證表單資料的功能
2. blazy.js
   在圖片上加上 lazy-loading 機制的幫手
3. gotem
   剪下功能。讓使用者按下某個機關後，把另個元素的內容放入剪貼簿
4. 桌面或手機應用程式框架
1. electron
   桌面程式開發。Atom 以及 VS Code 便是利用此框架開發
2. cordova
   跨平台開發，包括桌面以及手機程式
3. Weex
   跨平台手機程式開發框架
5. 伺服器框架（在伺服器上運作）
1. expres
   很知名常用的伺服器框架。下面列出常用的 middleware
1. body-parser
   Json, text, raw, url-encoded 的 request body 處理
2. multer
   multipart/form-data 處理
3. serve-favicon
   「我的最愛」圖示
4. compression
   Response deflate / gzip 壓縮
5. csurf
   CSRF token middleware
6. helmet
   藉著增加一些 HTTP header 來保護您的 express web app
2. koa
3. hapi
4. fastify
   標榜高效能的伺服器框架
6. 資料庫引擎或驅動程式
   資料庫引擎的話，多半使用在以 node.js 為基礎框架的時候
1. MongoDB（database connector / driver）
2. LevelDB（embedded database）
   若想要在 node.js 上面使用，建議以 npm 安裝 level package。（npm install level）
   有些人指出 levelDB 的資料庫容易在像是斷電的情況下毀損（您可以參考其 github repository 的 issue 區域）
3. NeDB （embedded database，瀏覽器也可以使用）
   小巧的資料庫引擎，不適合存放 big data 等級的資料
4. neo4j-driver（database connector）
   連接 Neo4j 的 driver，由 Neo4j 的開發團隊出品
5. sqlite3（embedded database）
6. rethinkdb （database connector / driver）
   支援以 reactive 的方式取得資料的 NoSQL 資料庫
7. pouchdb （browser database）
   可離線資料庫。可以利用中央的 CouchDB 進行客戶端間的資料同步。
   此資料庫引擎可以使用在瀏覽器或者 node.js 上
8. rxdb （browser database）
   利用 PouchDB 實現的可離線資料庫。
   此資料庫引擎可以使用在瀏覽器或者 node.js 上
7. 測試工具（框架等）
1. tape （Node.js、瀏覽器）
   符合 TAP （test anything protocol）協定的測試框架
2. Postman
   開發 WEB API 的好幫手：可以用來手動執行 API 查詢以進行測試 
3. phantomjs
   多功能的 headless web browser，可以用在使用者界面單元測試、動態網頁的抓取、以及動態頁面的呈現（rendering）等。（爬動態網頁的爬蟲幫手）
   可用 npm 安裝 phantomjs-prebuilt，或者從官方的下載區取得。
4. json-server （node.js）
   利用您提供的 json 檔案，產生一個 mock server 讓您可以測試前端
8. 圖形或遊戲引擎（瀏覽器運作）
1. CraftyJS
   遊戲引擎
2. WhitestormJS
   3D 引擎
3. Planck.js
   2D 物理引擎
4. picogl.js
   嚴格說起來不算是 3D 引擎，而是在 webgl 2 上面再包上簡單的一層，使 webgl 容易使用。
9. 基礎（語言擴充、工具箱等）
1. 工具箱
1. lodash （均可）
   提供許多的工具，像是函數式程式設計輔助、字串處理、數學函數、比較函數等
2. just （均可，瀏覽器使用須配合 browserify）
   提供模組化的許多小工具（陣列使用、物件處理、字串處理等）
3. suger （均可）
   提供模組化的許多小工具（時間、字串處理、物件 reduce ...）
4.  ramda （均可）
   提供 functional programming 工具的程式庫
5. Folktale （ 均可，瀏覽器使用須配合 browserify）
   內容豐富的 functional programming 工具箱，提供了像是 Monad, Either 以及 Maybe 工具。
2. 字串處理
1. voca （均可）
   字串處理工具
2. re-build （均可）
   提供一個比較可讀的方法來建立正規表達式（regular expression）
3. 資料結構
1. immutable.js （均可）
   提供不可變（immutable）資料結構的程式庫
2. mnemonist （均可？）
   提供許多資料結構的實作
3. graphology （均可？）
   提供圖（graph）資料結構的實作
4. freezer （均可？）
   Immutable state holder，會在 state 有更動時發出事件供程式設計人員處理
5. BitArray.js （均可？）
   省記憶體的位元陣列
6. wade
   利用 Trie 提供快速搜尋的機制
4. 數學、數字以及統計
1. math.js （均可）
   數學擴充
2. simple-statistics （均可）
   提供簡單的統計相關計算功能
3. decimal.js （均可）
   大數字操作
4. swarm-numberformat （均可）
   格式化大數字的輸出
5. NodeJS 串流（stream）工具
   別忘了瞧瞧資料剖析的部份，裡面可能有支援串流的程式庫
1. through2
   撰寫 Transform stream 的幫手
   另有 through2-map, through2-filter, 以及 through2-reduce 三樣輔助工具。
2. ez-stream
   一個獨立的 stream library。可以包裹 node.js 的 stream。
6. 其他
1. stampit （均可）
   幫助開發者更完善利用 JS prototypal inheritance 的工具 
2. yargs （node.js）
   命令列參數剖析
3. date-fns （均可）
   提供許多函數，加強了內建 Date 類別的功用
4. fmt-obj （node.js）
   美化 JS 物件以 console 輸出的模樣
5. store.js （均可）
   提供跨瀏覽器的 persistence 方案程式庫
6. ffi （node.js）
   使開發者可以輕易使用與 C 相容 ABI （Application Binary Interface）的程式庫
7. gpu.js
   讓開發者可以輕鬆使用 GPU 的運算資源
10. 多工
1. webworker-threads
   thread-based
2. tiny-worker
   process-based
3. skale-engine
   平行與分散式運算引擎
11. 記憶體相關
1. big-map
   利用 Buffer 提供
12. 美工（繪圖、動畫、圖形處理）
1. pdfkit （node.js、瀏覽器需用 browserify）
   產生 pdf 檔案
   使用中文字型、畫表格、換頁的實例請見這裡。
2. jimp （node.js）
   完全以 JS 實做的影像處理程式庫，支援 bmp, jpg, png。
3. d3.js （瀏覽器）
   可以將資料轉換成圖形的程式庫
4. dimple.js （瀏覽器）
   建構在d3.js 之上的作圖（統計圖）軟體
5. d3-node （node.js）
   讓伺服器端可以使用 d3.js 的功能
6. billboard.js （瀏覽器）
   建立在 d3.js 之上的圖表繪製程式庫
7. color-blind （node.js）
   模擬色盲者所看見色彩的程式庫
8. PixiJS （瀏覽器）
   2D 繪圖引擎，提供硬體加速
9. KUTE.js （瀏覽器）
   動畫引擎
10. chartist （瀏覽器）
    作圖（直方圖折線圖等）。簡單小巧沒有其他相依元件
11. cropper.js （瀏覽器，Node.js ?）
    影像處理（裁剪、放大、旋轉等）
12. sigma.js （瀏覽器）
    作網路圖
13. rough.js （瀏覽器）
    在 HTML5 canvas 上做出手繪風格的圖形
14. UTIF.js （均可？）
    TIFF 影像解碼器，純 js 實做
15. UPNG.js （均可？）
    PNG 影像解碼器，純 js 實做
16. web-dsp （瀏覽器）
    以 web assembly 做出來的影像 / 影片處理程式庫
17. GraphicsJS （瀏覽器）
    繪圖程式庫（利用 SVG / VML 技術）
13. 檔案以及資料剖析
    已知支援 node.js 串流的程式庫後方會有（stream）標記
1. 字型
1. Typr.js（均可）
   TTF 以及 OTF 字型剖析（似乎不太活躍了）
2. opentype.js （均可）
   Open Type （OTF）字型解析
2. 壓縮檔
   不要忘了內建的 zlib 可以提供 streaming 的 gzip 處理體驗
1. node-zip
   zip 壓縮檔處理
2. adm-zip
   zip 壓縮檔處理
3. unzipper （node.js）（stream）
   支援 streaming 的 zip 解壓縮處理
4. compressjs （均可）
   提供多種格式壓縮檔的壓縮與解壓縮
   如果要 streaming ，所提供的 input 以及 output 分別要實做 readByte 和 writeByte
5. decompress （node.js）
   提供多種格式的一口氣解壓縮的功能
6. lzma-purejs （均可）
   lzma 格式的壓縮以及解壓縮
   如果要 streaming ，所提供的 input 以及 output 分別要實做 readByte 和 writeByte
7. xz （node.js） （stream）
   lzma 格式的串流壓縮以及解壓縮
8. unbzip2 （均可）（stream）
   bz2 格式的 streaming 解壓縮
3. 影片
1. JSMpeg （瀏覽器）
   mpeg1 & mp2 影音解碼器
4. 圖檔（請參照美工部份）
5. 其他格式
1. parse5 （node.js）（stream）
   HTML5 剖析器
   具有 ParserStream （WritableStream）
2. htmlparser2 （node.js）
   HTML 剖析器，提供 SAX 界面以及製作成 DOM 文件的方法（要配合 domhandler ）
3. json-parse-async
   提供 JSON.parse 的非同步界面。實際剖析發生在相同的執行緒上面。
4. JSONStream （node.js）（stream）
   利用 Stream 的方式來剖析所指定的部份 JSON 資料
   亦即它無法在 stream 完成後傳回完整的資料，這不是這個程式庫的目標
5. oboe （均可）
   利用類似 SAX 的方式來分段剖析 JSON
14. 網路通訊（Ajax、fetch api wrapper、檔案上傳等） 
1. resumable.js （瀏覽器）
   可以將大型檔案切塊後上傳的工具。需要有伺服器端的配合。
2. ftp （node.js）
3. ftp-client （node.js）
   包裝 ftp 的程式庫，但似乎無法做複雜的操作。若您知道目標檔案的位置而不需要探勘的話，似乎是不錯的選項
4. jsftp （node.js）
   除了 ftp 以外的選擇
5. node-fetch （node.js）
   在伺服器端使用 fetch API ！
6. request （node.js）
   功能強大且方便使用的 http / https client
7. axios （均可）
   功能強大且方便使用的 http / https client。具有取消 request 的功能
8. phin （node.js）
   輕巧的 http / https client。
9. trae （瀏覽器）
   Fetch-based http / https client。
15. 機器學習
1. brain.js （均可）
   類神經網路
2. synaptic （均可）
   architecture-free neural network
3. neurojs （均可？）
   Deep learning
16. 自然語言
1. franc （均可）
   語言偵測。franc-all 支援 375 種語言； franc 支援 175 種語言； franc-min 支援 75 種語言。
17. 紀錄工具（logging）
1. debug （均可）
   簡單的 logging 工具。很多程式庫或者框架均利用 debug 來做錯誤紀錄。
2. winston （node.js）
   功能豐富的 logging 工具。支持非同步、多輸出端、以及自定義格式等功能
18. 開發工具
1. Gulp
2. Npm
3. Browserify
4. phantomjs
   多功能的 headless web browser，可以用在使用者界面單元測試、動態網頁的抓取、以及動態頁面的呈現（rendering）等。（爬動態網頁的爬蟲幫手）
   可用 npm 安裝 phantomjs-prebuilt，或者從官方的下載區取得。
5. nodemon
   簡單的伺服器程式開發小幫手：在檔案有修改的時候幫你重新啟動伺服器軟體
6. tldrlegal
   檢查專案相依程式庫的授權，替你列出這些授權所應該遵守的義務
7. pkg-ok
   檢查 package.json 裡面紀錄的 main 以及 bin 欄位中的檔案是否存在。適合用在 npm prepublish hook

Kotlin

官方網站在這裡

超簡單介紹

Kotlin 是一個以 JVM / JavaScript 為編譯目標的靜態型別程式語言。其簡單輕巧但嚴謹的語法，使其獲得了 「android 上的 swift」 稱號，並且以 JVM 為編譯目標時，可以與現存的所有 Java 程式庫相容。

開發工具

首先來講講撰寫工具吧！

「有個 IDE 來幫你作雜七雜八的事情，才容易體會倒寫程式的樂趣！」如果你跟千秋一樣認可這句話，可以考慮使用 IntelliJ IDEA ：它不需要做額外的調整，直接支援 Kotlin！（雖然這裡的教學說要下載個外掛，但那個外掛在比較新版的 IDEA 裡面已經裝好了）附帶一提，Android 的開發工具 Android Studio 是基於 IntelliJ IDEA，且 IntelliJ IDEA 也有 Android 的開發外掛，所以您也可以使用 Kotlin 來開發 Android 程式！

當然，若諸位比較喜歡使用 Vim / Emacs 的話，也可以下載獨立編譯器來使用。

接著，撰寫好之後就是建置的工具。依千秋淺見，最好用的建置工具是 Gradle，因為：

1. 跟 IntelliJ IDEA 整合得挺好的
2. 有相依程式庫管理系統，可以自 maven repository 或者 JCenter 自動下載相依程式庫，省去大量麻煩
3. 可以建立跨平台的散布壓縮檔
4. 可以幫您進行單元測試

簡單的說，從開始（撰寫程式）到出廠（散發軟體）的工具，Kotlin 跟 Java 一樣，一應俱
全，而且簡單好用。如果已經有使用 Java 經驗的人，很推薦使用 Kotlin 看看！

簡單整理：

1. 整合開發環境
1. IntelliJ IDEA （可直接使用）
2. Eclipse （未試用）
2. 建置工具
1. Gradle （較推薦，且具有整合開發環境支援）
2. Maven （具有整合開發環境支援）

學習資源

如果您想要學習 Kotlin 的話，可以參考官方網站所提供的資源，略整理如下：

1. 官方網站的 Reference 區塊中，Where to begin 段落有提到該如何開始學
2. Try Kotlin 網站提供線上練習以及教學
3. Kotlin Koans 提供了 42 個練習主題

其他的學習資源列出如下：

1. Design patterns in Kotlin
   列出許多設計模型在 Kotlin 下的寫法，值得參考

相關程式庫

這裡只列出以 Kotlin 寫成的程式庫，所以別忘了也參照 Java 的程式庫。Kotlin 可以使用所有 Java 的程式庫。

另外，也不要忘了去 https://github.com/KotlinBy/awesome-kotlin 看看！

1. 單元測試
1. Hamkrest
   利用 Kotlin 的特性對 Hamcrest 進行改良而得，據說用起來較 Hamcrest 好。需要配合 JUnit 這類單元測試驅動程式庫方可使用
2. 網路通訊
1. Fuel
   HTTP 協定通訊程式庫，有特別的 Android 支援
3. 資料剖析
1. Klaxon
   Json 剖析程式庫
4. 概念實現
1. Result
   在 Kotlin 實現 Railway Oriented Programming 的程式庫
5. 統計分析
1. kotlin-statistics
6. 機器學習
1. komputation
   類神經網路框架
7. （待續）

緣起

自從開始留意一些網路上的程式設計以及語言學習資源後，千秋的書籤就一直呈現凌亂的狀態。
利用這個部落格，千秋把這些資源整理起來，並且寫上簡單的描述、或是自己寫的相關程式，供自己以及其他人未來做參考。

程式設計

1. 程式語言（含相關程式庫）
1. JavaScript
2. CSS
3. JVM-based languages
1. Java
2. Kotlin
4. Rust
5. C
6. C++
7. Haskell
2. 平台
1. Android
2. Web
3. Linux
4. Windows
3. 練習網站
4. 工具
1. 程式碼編輯器
1. VS Code
2. Atom
2. 整合開發環境
1. VS Code（加上外掛）
3. 建置工具
5. 美術資源
1. 圖示
2. 字型

 （其他待補）

工具箱

電腦軟體工具，用途不限。和程式設計相關的工具會被列在上個區塊內

1. 命令列工具
1. 檔案管理
1. exa
   用 rust 寫成，在 unix 系統下的 ls 改良版。
2. （其他）
2. 線上工具
1. 繪圖
1. draw.io
   線上的 graph, diagram 繪製系統
2. （其他）
3. （其他）

語言學習

1. 語言
2. 教學網站
3. 字典、辭典
4. 文法查詢
5. 其他工具

作業系統使用以及故障排除紀錄

1. OpenSUSE 42.2

（待補）

圖示

諸君寫程式時，有時不可避免要使用一些圖案來使自己的使用者界面更加具有親和力，然而不少人和千秋一樣不擅長美術，而且常想，要是有人肯佛心提供一些圖示該有多好。
這裡列出所收集的，有提供免費圖示資源的網站
諸君在使用時，請留意這裡的「免費」是有條件限制的。至於是怎樣的條件，請參照網站上的授權。

Linea Free Iconset

請點這裡進入官方網站
考察時間：201610090447+8
這套圖示分成 7 大類，共超過 700 個圖示，使用 CCBY 的授權。
圖示由簡單的線條構成，提供 SVG 以及 PNG 格式，可以很方便利用

Open Iconic

請點這裡進入官方網站；請點這裡進入 github 倉庫
考察時間：201610090459+8
這套圖示可說是另一套付費圖示 Iconic 的「試用版」，svg 的部份使用 MIT 授權（詳細的授權可以參考 github 倉庫內的 *-LICENSE 檔案）
整套圖示中規中矩，提供 svg 以及 png 等格式可供利用。
特別的是，官方聲稱此圖示即使在 8px 下也可輕鬆辨識（hyper-legible），並且體積小，不會增加您使用者的負擔

（未來會陸續增加，敬請期待^^）