sublime text3 --前端工程師必備

時間 2019-11-16

標籤 sublime text3 text 前端工程師必備欄目 HTML 简体版

原文原文鏈接

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

　　導讀目錄：

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

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

　　對於前端工程師來講，sublime text3絕對是神器，Emmet插件經過自動補齊能夠大大提升咱們的開發效率。css

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

（注意：截圖工具我使用的是 FastStoneCapture，百度便可，很是方便）前端

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

　　複製下面代碼粘貼到其中：node

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)react

　　回車便可。這時能夠看到preferrence下出現了Package Control.git

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

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

　　點擊help--enter lisence：複製粘貼下面三種註冊碼的任何一種，回車便可破解。windows

—– 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

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

　　另外，咱們還能夠直接以你但願的編碼類型從新打開這個文件：

　　是否是很是方便呢!