sublime text3 --前端工程師必備

阿新 • • 發佈：2017-08-11

https try sin 說過顯示配置文件 ima 百度 sha256

sublime text3 --前端工程師必備神器

　　導讀目錄：

下載與Emmet插件安裝
sublime text3 中cssrem安裝與使用
sublime Text 3的中文文件名顯示為方框的問題解決方案
如何使用自定義的快捷鍵快速在瀏覽器中打開html文件
安裝jade的高亮插件
安裝ejs的高亮插件
顏色樣式選擇
顯示與修改編碼
安裝vue的高亮插件
解決jsx文件中的html標簽無法自動補全的問題
Sublime中使用typescript(支持報錯)

sublime text3 下載安裝與 Emmet插件的安裝

　　對於前端工程師來說，sublime text3絕對是神器，Emmet插件通過自動補齊可以大大提高我們的開發效率。

　　第一步：進入官網下載sublime text3。比如對於我的64位windows系統，我選擇了如下所示的一項：

技術分享

（註意：截圖工具我使用的是 FastStoneCapture，百度即可，非常方便）

　 第二步：打開sublime text 3，按下ctrl+~ 或者 view--show Console調出命名控制行。

　　復制下面代碼粘貼到其中：

import urllib.request,os,hashlib; h = ‘df21e130d211cfc94d9b0905775a7c0f‘ + ‘1e3d39e33b79698005270310898eea76‘; pf = ‘Package Control.sublime-package‘; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/‘ + pf.replace(‘ ‘, ‘%20‘)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install‘ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb‘ ).write(by)

　　回車即可。這時可以看到preferrence下出現了Package Control.

　　第三步：打開package control，輸入install package，回車, 然後再輸入Emmet,點擊即可完成安裝。

　　然而，僅僅是下載還是不夠的，下面提供破解方法。

　　點擊help--enter lisence：復制粘貼下面三種註冊碼的任何一種，回車即可破解。

—– BEGIN LICENSE —–
Michael Barnes
Single User License
EA7E-821385
8A353C41 872A0D5C DF9B2950 AFF6F667
C458EA6D 8EA3C286 98D1D650 131A97AB
AA919AEC EF20E143 B361B1E7 4C8B7F04
B085E65E 2F5F5360 8489D422 FB8FC1AA
93F6323C FD7F7544 3F39C318 D95E6480
FCCC7561 8A4A1741 68FA4223 ADCEDE07
200C25BE DBBC4855 C4CFB774 C5EC138C
0FEC1CEF D9DCECEC D3A5DAD1 01316C36
—— END LICENSE ——

—– BEGIN LICENSE —–
Nicolas Hennion
Single User License
EA7E-866075
8A01AA83 1D668D24 4484AEBC 3B04512C
827B0DE5 69E9B07A A39ACCC0 F95F5410
729D5639 4C37CECB B2522FB3 8D37FDC1
72899363 BBA441AC A5F47F08 6CD3B3FE
CEFB3783 B2E1BA96 71AAF7B4 AFB61B1D
0CC513E7 52FF2333 9F726D2C CDE53B4A
810C0D4F E1F419A3 CDA0832B 8440565A
35BF00F6 4CA9F869 ED10E245 469C233E
—— END LICENSE ——

—– BEGIN LICENSE —–
Anthony Sansone
Single User License
EA7E-878563
28B9A648 42B99D8A F2E3E9E0 16DE076E
E218B3DC F3606379 C33C1526 E8B58964
B2CB3F63 BDF901BE D31424D2 082891B5
F7058694 55FA46D8 EFC11878 0868F093
B17CAFE7 63A78881 86B78E38 0F146238
BAE22DBB D4EC71A1 0EC2E701 C7F9C648
5CF29CA3 1CB14285 19A46991 E9A98676
14FD4777 2D8A0AB6 A444EE0D CA009B54
—— END LICENSE ——

sublime text3 中cssrem安裝與使用

　　我們在移動端開發時，使用rem布局是一個不錯的選擇，及將所有元素的尺寸使用rem來設置，但是我們每次都需要先用設計稿中的值除以rem值然後才能得到最終的以rem為單位的數字，這時，cssrem插件就可以很好的解決我們遇到的問題了。（註：對於移動端布局，見我的另一篇博文《探究移動端開發》）

　　第一步：下載github中的cssrem，然後將名為cssrem-master文件夾移動到Preferences下的Browse Packages...

　　　　　　如下圖所示：

技術分享

　　第二步：重啟sublime text3，即可使用。但我們可以發現，實際上cssrem將1rem默認為40px。

面臨的問題1：

　　但是如果我們不希望使用這樣的默認項呢？下面介紹方法：

　　進入preference--browse packages,然後進入cssrem-master，並以記事本的方式打開cssrem.sublime-settings，發現下面數據：

技術分享

　　也就是說，默認px到rem的轉化為40，數字的最大長度為6位等等。於是我們在這裏編輯就可以使用自己想要的rem了，是不是很簡單呢！！

面臨的問題2：

　　如果我們不需要移動端rem布局，那麽每次輸入px都會重復的提醒，這是令人厭煩的，這時我們可以將preference--browse packages裏的cssrem-master加一個後綴名，比如.txt，這樣重啟sublime text就會發現不會有這種情況了。當我們再需要使用時就把這個後綴刪去即可。

面臨的問題3：

　　如果我們在html文件中的style標簽下寫css而不是在後綴名為.css的文件下寫css那個這個工具就是沒有用的。

　　結論：必須在 css文件中使用cssrem插件才有效。

解決問題3

　　在問題3中，我們說過必須在css文件中使用cssrem才有效果，但這是因為我們的availabel_file_types選項中只添加了.css、.less、.sass，而沒有添加.html等。在vue的開發中，如果我們希望在.vue中使用，就可以在數組中添加.vue文件，這樣我們就可以直接在vue中進行轉化了。

{
"px_to_rem": 72,
"max_rem_fraction_length": 4,
"available_file_types": [".css", ".less", ".sass", ".vue"]
}

sublime Text 3的中文文件名顯示為方框的問題解決方案

　　問題情況如下所示，中文文件名被修改成了方框：

技術分享

　　解決方法：

　　　　進入 Preferences --settings。

　　　　得到下面的結果：

技術分享

在右邊的settings-user，下面添加

　　　　"dpi_scale":1.0

它類似於JSON數據格式，註意：這個名值對的上一句結束應當再加一個英文狀態下的逗號，如下所示：

技術分享

按下 Ctrl+s保存，重啟Sublime Text 3編輯器。效果如下所示；

技術分享

成功顯示中文文件名，但是對比發現，下面代碼的字體變小了，只要按下 Ctrl+鼠標滾輪即可縮放字體，或在 setting-user下自己修改font-size的值即可。如下所示：

技術分享

如何使用自定義的快捷鍵快速在瀏覽器中打開html文件

　　打開一個html文件有至少三種方式。

　　第一種：在目錄中找到該文件，然後點擊在瀏覽器中打開即可，這無疑是最麻煩的。

　　第二種：直接在sublime的html文件右擊，點擊open in browser ，即可打開，這個也是十分方便的。

　　第三種：設置快捷鍵，使用快捷鍵打開，方法如下：

　　第一步：在沒有文件打開的情況下進入（不會出現問題）Preference--package control（若沒有此項，請參看博文第一部分的介紹），並輸入：Install Package,這時可以發現編輯器左下角正在處理此請求，一分鐘左右處理完畢。輸入View In Browser，片刻即可安裝完成。（註意：對於你之前安裝過的插件，再次搜索時是找不到的。）

　　第二步:進入Preference--KeyBuildings，打開下面的對話框。

技術分享

在右邊的user框的【】中輸入下面的JSON數據：

1	`{` `"keys": ["ctrl+b"],` `"command":` `"open_in_browser"` `}`

這句話是說，按下ctrl+b,即可在瀏覽器中打開文件，快捷鍵可以根據你的習慣修改。註意：這裏的瀏覽器是默認瀏覽器（可以在設置－－系統－－默認應用－－默認瀏覽器下進行修改默認瀏覽器）。

安裝jade的高亮插件

　　在使用node時，我們往往要使用模板引擎，其中jade就是比較常用的一種模板引擎，但是寫jade時，是沒有高亮語法的，所以我們就需要使用相關插件了。

　　步驟：先 ctrl + shift + p 調用package control，然後找到install package回車，等到庫出來之後，輸入jade，回車，看左下角的提示（=來回閃），同時可以觀察右下角的安裝進度。 jade安裝了之後，在同樣的操作安裝jade Build。最後重啟sublime即可。

　　下面就是使用了Jade高亮插件的樣子：

技術分享

　可以發現，對於關鍵字都會高亮顯示，並且在輸入的時候可以發現也有自動提示功能，另外在換行的時候也非常智能，它會在合適的時候自動縮進。

安裝ejs語法高亮插件

在使用node時，我們往往要使用模板引擎，其中jade就是比較常用的一種模板引擎，但是寫ejs時，是沒有高亮語法的，所以我們就需要使用相關插件了。

　　步驟：先 ctrl + shift + p 調用package control，然後找到install package回車，等到庫出來之後，輸入ejs2，回車，看左下角的提示（=來回閃），同時可以觀察右下角的安裝進度。ejs安裝了之後，會有下面的提示：

Package Control Messages
========================

EJS 2
-----

  Thanks for installing EJS 2 :)
  
  Here are some tips to help you get started with this package:
  
  
  ### Color Scheme
  
  EJS 2 comes with the "Dracula EJS" color scheme which you can select from:
  `Preferences` -> `Color Scheme` -> `EJS 2`.
  
  Oceanic Next (https://github.com/voronianski/oceanic-next-color-scheme) is also a
  good color scheme for EJS that works right out of the box.
  
  
  ### Setting the default syntax
  
  By default, files with the extension `.ejs` are opened with the `EJS (<% %>)` syntax.
  
  If you‘d like to open files with a different extension as EJS or you want to use delimiters
  other than "<% %>", follow these steps to set the default EJS syntax for an extension:
  
  1. Open an EJS file
  2. Select `View` from the menu
  3. Then `Syntax` -> `Open all with current extension as...` -> `EJS 2` -> `EJS (<delimiter>)`
  4. Repeat this for each extension you want to open as EJS
  
  This package includes syntax definitions for the following additional delimiters: `<? ?>`, `<$ $>`, `<@ @>`.
  
  
  ### Snippets
  
  In the HTML scope:
  
  + `if`+`TAB` - Inserts EJS `if` statement
  + `for`+`TAB` - Inserts EJS `for` loop

根據以上提示，我們就可以做出配置了。

顏色樣式選擇

在sublime中，我們可以通過 preference -> Color Scheme - Default 來選擇不同的主題顏色。

技術分享

只能說sublime太強大，如果你覺得哪裏不好的話，一定是你沒有充分發掘它的魅力。

顯示與修改編碼

　在sublime中，默認是不會顯示一個文件的編碼格式的，但是我們可以讓他顯示並進行設置。

　　可通過菜單Perference → Settings – User，在打開的配置文件中添加下面幾行代碼（一定要添加在{}裏面）：

    // Display file encoding in the status bar
    "show_encoding": true,

    // Display line endings in the status bar
    "show_line_endings": true

　　這樣，就可以在編輯器的右下角顯示編碼類型了，我們點擊它，就可以修改編碼類型。

　　另外，我們還可以直接以你希望的編碼類型重新打開這個文件：

技術分享

　　是不是非常方便呢!

安裝vue的高亮插件

　　首先 ctrl + shift + P ，然後選擇install package，接著輸入vue , 會匹配hignlight相關插件，點擊安裝即可。

解決jsx文件中的html標簽無法自動補全的問題

這篇文章： http://react-china.org/t/sublime-text-jsx/11430 中的其中的一個回答是有效的，具體實現方式為：

1. 安裝emmet
2. 配置 perferences——》Package Settings——》Emmet——》Key Binding-User，修改為如下配置

Sublime中使用typescript(支持報錯)

　　install package -> typescript 安裝 -> 重啟

sublime text3 --前端工程師必備

https try sin 說過顯示配置文件 ima 百度 sha256 sublime text3 --前端工程師必備神器　　導讀目錄：下載與Emmet插件安裝 sublime text3 中cssrem安裝與使用 sublime Text 3的中文文

sublime text3 --前端工程師必備

sublime text3 --前端工程師必備神器

導讀目錄：

下載與Emmet插件安裝

sublime text3 中cssrem安裝與使用

sublime Text 3的中文文件名顯示為方框的問題解決方案

如何使用自定義的快捷鍵快速在瀏覽器中打開html文件

安裝jade的高亮插件

安裝ejs的高亮插件

顏色樣式選擇

顯示與修改編碼

安裝vue的高亮插件

解決jsx文件中的html標簽無法自動補全的問題

Sublime中使用typescript(支持報錯)

sublime text3 下載安裝與 Emmet插件的安裝

sublime text3 中cssrem安裝與使用

面臨的問題1：

面臨的問題2：

面臨的問題3：

結論：必須在 css文件中使用cssrem插件才有效。

解決問題3

sublime Text 3的中文文件名顯示為方框的問題解決方案

如何使用自定義的快捷鍵快速在瀏覽器中打開html文件

安裝jade的高亮插件

安裝ejs語法高亮插件

顏色樣式選擇

顯示與修改編碼

安裝vue的高亮插件

解決jsx文件中的html標簽無法自動補全的問題

Sublime中使用typescript(支持報錯)

相關推薦

　　導讀目錄：

　　結論：必須在 css文件中使用cssrem插件才有效。