# Sublime【Package Control】 - babel-sublime

sublime【套件應用篇】新手教學之 babel 應用，請安心服用。 

最近在寫 React 時，

相信大家在 js 檔編譯 babel 時，會發生 syntax 不完整的問題（即文字顏色失效），

本篇簡單說明如何透過安裝 babel-sublime ，打造合適的 babel 開發環境。

**前置作業**
--------

1.  安裝好 [sublime](http://www.sublimetext.com/2) ( 本篇以 sublime2 為範例 )。
2.  準備一隻檔案 （.js） 測試用。

下載套件
----

1.  到 [Babel](https://github.com/babel) 官方 Github 下載 [babel-sublime](https://github.com/babel/babel-sublime)。
2.  ![Capture-d%E2%80%99%C3%A9cran-2015-04-21-%C3%A0-17.47.31.png](https://raw.githubusercontent.com/explooosion/blogs/refs/heads/main/docs/images/2016-05-26_Sublime%E3%80%90Package%20Control%E3%80%91%20-%20babel-sublime/Capture-d%25E2%2580%2599%25C3%25A9cran-2015-04-21-%25C3%25A0-17.47.31.png)
3.  解壓縮後得 「babel-sublime-master」資料夾。

安裝套件
----

1.  到 sublime 的 Packages 資料夾底下。
2.  ![1464272915_44983.png](https://raw.githubusercontent.com/explooosion/blogs/refs/heads/main/docs/images/2016-05-26_Sublime%E3%80%90Package%20Control%E3%80%91%20-%20babel-sublime/1464272915_44983.png)
3.  將剛剛下載的資料夾貼進此，即完成手動安裝。

設定環境
----

1.   Color Scheme：babel-sublime
2.  ![1464273349_74537.png](https://raw.githubusercontent.com/explooosion/blogs/refs/heads/main/docs/images/2016-05-26_Sublime%E3%80%90Package%20Control%E3%80%91%20-%20babel-sublime/1464273349_74537.png)
3.  開啟 .js 檔案，Syntax： JavaScript（babel）
4.  ![1464273538_92378.png](https://raw.githubusercontent.com/explooosion/blogs/refs/heads/main/docs/images/2016-05-26_Sublime%E3%80%90Package%20Control%E3%80%91%20-%20babel-sublime/1464273538_92378.png)

完成結果
----

　　　整體看起來配色以及 syntax 都很完美。  QQ 太感動惹 ~~

[![1464273666_90128.png](https://raw.githubusercontent.com/explooosion/blogs/refs/heads/main/docs/images/2016-05-26_Sublime%E3%80%90Package%20Control%E3%80%91%20-%20babel-sublime/1464273666_90128.png)](https://dotblogsfile.blob.core.windows.net/user/incredible/e9767885-3183-47ed-8f49-63b470be4c05/1464273666_90128.png)

有勘誤之處，不吝指教。ob'\_'ov