1. 調(diào)出骨架網(wǎng)頁html:xt 然后Ctrl+e
2. 調(diào)整大小 Ctrl+滑輪
3. div.top div#header
4. div*5 :5個div
5. ul>li* >代表子級
6. +代表同級
7. 按住滾輪可以豎著選

然后轉(zhuǎn)載了幾篇文章學習下

在我做了一次包含一些現(xiàn)場編碼的演示后，一些觀眾問我是如何操作這么快。當然這里沒有唯一的答案，答案是一堆簡單的快捷鍵和大量的實踐的組合。為了回應那些詢問，我覺得有必要看看我每天想都不用想且使用的快捷鍵。

這里有一個15 16 個快捷鍵的精選列表(1個自定義快捷鍵)，以gif動畫展示，我每天使用。享受吧!

(譯者注：原文所列快捷鍵均為OS X環(huán)境，為了方便Windows和Linux環(huán)境童鞋的學習，譯者將備注Windows和Linux下對應的快捷鍵)

選擇

• 選擇一個選中項的下一個匹配項
• 選擇一個選中項的所有匹配項
• 選擇與光標關(guān)聯(lián)的開始和結(jié)束標簽
• 選擇容器內(nèi)內(nèi)容（新）
• 選擇括號內(nèi)的內(nèi)容

移動行和文本

• 上移或下移行
• 復制行或選中項
• 增加和減少縮進

剪切和刪除，復制和粘貼

• 剪切行或選中項
• 粘貼并保持縮進
• 用標簽包裹行或選中項
• 移除未閉合的****容器元素

文本和數(shù)字操作

• 計算數(shù)學表達式
• 遞增和遞減
• 大寫和小寫

注釋和對齊變量

• 注釋選中項/行
• AlignTab自定義快捷鍵

選擇一個選中項的下一個匹配項: ? + D

******（譯者注：ctrl+d）**

把光標放在一個單詞上，按下?+ D,將選擇這個單詞。一直按住?且按D多次，將選擇當前選中項的下一個匹配項。通過按住?,再按D三次,將選擇三個相同的文本。

img

選擇一個選中項的所有匹配項: CTRL + ? + G

******（譯者注：alt+f3）**

和上面一樣,但它選擇文件中的所有匹配項。小心使用這個,因為它能選擇一個文件中的所有匹配項. .

img

選擇與光標關(guān)聯(lián)的開始和結(jié)束標簽:?+?+ K

******（譯者注：ctrl+shift+’）**

這是一個法寶。也許你希望所有屬性保持不變,但只是想選擇標簽。這個快捷鍵為你這樣做,會注意到你可以在一次操作多個標簽。*需要Emmet插件

img

**選擇容器內(nèi)內(nèi)容:CTRL + D **

（譯者注：ctrl+shift+a）

如果你把光標放在文本間再按下上面的鍵將選擇文本,就像?+ D。但是再次按下它，將選擇父容器,再按,將選擇父容器的父容器。*需要Emmet插件

img

選擇括號內(nèi)的內(nèi)容: ? + ? + Space

******（譯者注：ctrl+shift+m）**

這有助于選擇括號之間的一切。同樣適用于CSS。

img

上移或下移行: CTRL + ? + ↑ 或 ↓

（譯者注：ctrl+shift+↑ 或 ↓）

img

復制行或選中項: ? + ? + D

（譯者注：ctrl+shift+d）如果你已經(jīng)選中了文本,它會復制你的選中項。否則,把光標放在行上,會復制整行。

img

增加和減少縮進: ? + [ 或 ]

******（譯者注：ctrl+[ 或 ]**）

img

剪切行或選中項: ? + X

******（譯者注：ctrl+x**）

剪切一行到你的剪切板，你可以粘貼到其他地方.

img

粘貼并保持縮進: ? + ? + V

******（譯者注：ctrl+shift+v**）這是又一個我每次都用的快捷鍵。在gif中我顯示了普通粘貼(?+ V)和縮進粘貼兩種效果的對比。注意縮進如何排列。

img

用標簽包裹行或選中項: CTRL + ? + W

******（譯者注：alt+shift+w**）

使用標簽包裹一行; 開始輸入你想使用的標簽,你成功了.

img

移除未閉合的容器元素: ? + ‘

******（譯者注：ctrl+shift+;**）這會移除與你的光標相關(guān)的父標簽。對清除標記很有幫助。

img

計算數(shù)學表達式: ? + ? + Y

******（譯者注：ctrl+shift+y**）我從未想過我會經(jīng)常使用這個，但是確實很好用

img

遞增和遞減: ? + OPTION + ↑ or ↓, OPTION + ↑ or ↓

（譯者注：alt+shift+↑ 或 ↓，ctrl+ ↑ 或 ↓）

按住 ? 將以10的步長改變數(shù)字, 不按住以1為步長. 同時注意到你不需要選擇數(shù)字, Sublime Text 足夠聰明到更新本行最近的數(shù)字.

img

大寫和小寫: ? + K then U, ? + K then L

（譯者注：ctrl+k+u,ctrl+k+l）

img

注釋選中項/行: ? + /

******（譯者注：ctrl+/**）

這個在所有語言下都可用, 對行和選中項都可用.

img

額外令人高興的事情!使用AlignTab自定義快捷鍵

上面的快捷鍵都是Sublime Text默認的快捷鍵,但是你也可以添加你自己的自定義快捷鍵。以下示例應用 AlignTab插件使用 三個自定義鍵綁定 來基于=> ,=,和:進行內(nèi)容垂直對齊。因為我工作中主要使用JavaScript和PHP,這些綁定對于幾乎我需要的每一個場景都有用,但是你可以用任何你想要的字符進行垂直對齊。

在你自己的編輯器實現(xiàn)下面gif的效果,只需安裝 AlignTab, ,添加自定義綁定到您的自定義鍵綁定文件中,選擇一些代碼,并點擊CTRL + ? + . 或 ; 或 =.

img

結(jié)論

一旦你看到多行代碼發(fā)生了一個改變,通常有一個使用幾個按鍵來實現(xiàn)改變的方法，而不是一個個地編輯它們。通過連續(xù)使用上面快捷鍵的組合去執(zhí)行重復的或可預見的改變,你可以大大提高你編碼的速度。

這里是一個簡短的Gif,包括選擇所有匹配項,復制鏈接的文本,利用多行光標粘貼復制的文本,并將該文本轉(zhuǎn)換為小寫。

img

個人比較懶，平時喜歡用webstorm，但是因為webstorm打開實在太慢了，并且太看設(shè)備，所以本人編輯簡單的文件依然會選擇使用sublime，雖然網(wǎng)上有很多關(guān)于此類插件的分享了，但是感覺都是片段，沒有重點細致整理。

今天休息，在這簡單的分享下自己常用插件

• All Autocomplete

Sublime Text 默認的 Autocomplete 功能只考慮當前的文件，而 AllAutocomplete 插件會搜索所有打開的文件來尋找匹配的提示詞。

img

• SublimeCodeIntel

一個全功能的 Sublime Text 代碼自動完成引擎 ，本人做過對比，但是如果和webstorm的自動尋找還是稍遜一籌，不過對于大部分人來說夠用了，能很方便跳到你想要的方法

支持的語言挺多的（JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.）

• CTags

實在方法跳轉(zhuǎn)，跳轉(zhuǎn)到你方法

之后在win7下或者linux下安裝ctags軟件

1. 打開ctags插件包的use-setting配置"command": "d:/IDE/ctags58/ctags.exe"這個路徑是下載ctags的安裝路徑
2. 這個插件能跨文件跳轉(zhuǎn)，跳轉(zhuǎn)到指定函數(shù)聲明的地方(ctrl+alt+左鍵)。 使用package control 搜索ctags 進行安裝（安裝ctags插件就可以了， 還有一個 CTags for PHP 插件沒什么用）,注意安裝好插件后要需要安裝ctags命令。window 下載 ctags.exe http://vdisk.weibo.com/s/7QZd7 。 將ctags.exe文件放在一個環(huán)境變量能訪問到的地方。打開cmd， 輸入ctags，如果有這個命令，證明成功了。ubuntu下安裝運行命令：sudo apt-get install exuberant-ctags 。然后在 sublime項目文件夾右鍵 ， 會出 現(xiàn)Ctag:Rebuild Tags 的菜單。點擊它，然后會 生成.tags的文件 然后在你代碼中， 光標放在某個函數(shù)上， 點擊 就可以跳轉(zhuǎn)到函數(shù)聲明的地方。

• AutoFileName

快速幫助你在文件中寫路徑整體來說還不錯

• Autoprefixer

這個插件主要應用css的瀏覽器兼容書寫，自動分析你的css文件，解析出新的css文件，可以配置你要兼容的瀏覽器，不過這個插件要在之前安裝nodejs

img

• BracketHighlighter

配置文件的高亮設(shè)置，讓你的代碼有不同的顏色區(qū)分該插件提供配對標簽，或大括號或字符引號的配對高亮顯示，算是對系統(tǒng)高亮的加強吧。

img

• BufferScroll

你可以輕松書寫一個文件多個位置了

img

• ChineseLocalization

各國語言包，小日本的都有哦

img

• Color Highlighter

顏色功能還是很爽的，找了好久

img

img

• CSS Comments

該有的都有，不該有的也有了

img

• CSS Format

css序列化插件，支持默認多種序列方案，還可以自己配置自己喜歡的

• CSS3

css3語言提示插件，本來不想寫的，也不是什么特別的，但是可能會有人用到

• DocBlockr

DocBlocker 是在Sublime平臺上開發(fā)一款自動補全代碼插件，支持JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ and Rust.等眾多語言

img

img

img

img

• Emmet

Emmet的前身是大名鼎鼎的Zen coding，如果你從事Web前端開發(fā)的話，對該插件一定不會陌生。它使用仿CSS選擇器的語法來生成代碼，大大提高了HTML/CSS代碼編寫的速度

img

img

img

• HTML-CSS-JS Prettify

全能序列化

• JavaScript Completions

js最基本的api快查片段

img

• JsFormat

js序列化，能排在下載插件前25位，好的話就不用說了

• Keymaps

快速查找所有插件的快捷鍵

img

• LiveStyle

LiveStyle是Chrome中提高開發(fā)效率的一款CSS編輯器插件。利用LiveStyle和Sublime Text3編輯器結(jié)合可實現(xiàn)可視化開發(fā)，一次配置，簡單易用！

你本地css文件可以和瀏覽器的css文件映射，同步到本地，但是必須在chrome上運行，chrome必須安裝相應的插件

img

img

• Pretty JSON

JSON，一個輕量級的資料交換語言，目前許多網(wǎng)站AJAX request的回應結(jié)果都是JSON格式

img

• SideBarEnhancements

增強右鍵菜單文件操作功能

img

• SublimeLinter

代碼校驗插件，支持多種語言，這個是主插件，如果想檢測特定的文件需要單獨下載

• SublimeLinter-jshint

這個就是單獨的插件，上面的一個分支

• SublimeTmpl

創(chuàng)建常用文件初始模板，必須html,css,js模板

• Tag

HTML/XML標簽縮進、補全和校驗

• Alignment

代碼對齊

• PackageResourceViewer

通過這個特殊的插件，會給你查看和編輯SublimeText附帶的不同的包帶來很多方便。您也可以提取任何給定的包。這一行動將其復制到用戶文件夾，以便您可以安全地對其進行編輯。

很多人苦惱不能修改左側(cè)導航面板字體大小，用這個可以輕松辦到

安裝PackageResourceViewer 快捷鍵 ?(command)+?(shift)+P 打開 Command Palette 輸入 Package Control:Install 回車，等待加載package列表 搜索并安裝 PackageResourceViewer 包

最后，使用PackageResourceViewer打開Theme文件進行編輯 快捷鍵 ?(command)+?(shift)+P 打開 Command Palette 輸入 PackageResourceViewer: Open Resource 回車，打開包列表 選擇 Theme - Default，再選擇 Default.sublimt-theme 搜索 sidebar_label，在 "class": "sidebar_label" 后邊加一行："font.size": 18，將字體大小設(shè)置為18，保存。 好啦，大功告成！

如果覺得行間距太小，可以往上找下，有個class:"sidebartree"，調(diào)一下里邊的rowpadding配置即可。

img

• Themr

sublime可以下載很多風格樣式，用這個插件可以管理所有的風格

這些就是我們大部分要用到的，其它的我就不細說了，因為每個人不一樣,比如說git，sass，svn這些你們可以自己查找

插件的網(wǎng)址如下，你可以找到你喜歡的插件

https://packagecontrol.io/browse