1. 程式人生 > >sublime text3前端開發插件配置以及使用(個人喜愛)

sublime text3前端開發插件配置以及使用(個人喜愛)

div ctrl+ script 新的 emmet java 不必要 nes 兄弟節點

第一步下載軟件
接著Ctrl +~ (回車)把下面安裝包管理添加到sublime
import urllib.request,os; pf = ‘Package Control.sublime-package‘; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), ‘wb‘).write(urllib.request.urlopen( ‘http://sublime.wbond.net/‘ + pf.replace(‘ ‘,‘%20‘)).read())

Package Control安裝插件:
按下Ctrl+Shift+P調出命令面板,
輸入install 調出 Install Package 選項並回車,然後在列表中選中要安裝的插件。

好用的開發插件針對前端開發;

一、Emmet 一種快速編寫html/css的方法,使用方法:(tab快捷鍵)

1、child:>(嵌套操作用來生成元素的DOM樹中的兄弟節點或子節點)
div>p

<div>
<p></p>
</div>

2、Sibling: + (使用 + 生成元素兄弟節點)
div+p

<div>
<p></p>


</div>

3、Multiplication: *(使用 * 生成多個相同元素)
ul>li*2

<ul>
<li></li>
<li></li>
</ul>

4.多類 class名(給元素添加ID和CLASS的方法和CSS的語法類似)
div#footer.class1.class2.class3

<div id="footer" class="class1 class2 class3"></div>

5.文本操作符(Emmet使用 Text:{} 給元素添加文本內容)
a{標簽裏面寫的內容}

<a href="">標簽裏面寫的內容</a>
---------------------------------------------------------------------------------------
二、html5 (支持hmtl5規範的插件包)
使用方法:(新建html文檔>輸入html5>敲擊Tab鍵>自動補全html5規範文檔)
---------------------------------------------------------------------------------------
三、BracketHighlighter(可以匹配括號,引號等符號內的範圍)
---------------------------------------------------------------------------------------
四、Alignment (代碼對齊)
快捷鍵 Ctrl+Alt+A
---------------------------------------------------------------------------------------
五、Doc?Blockr(註釋插件,生成幽美的註釋。標準的註釋,包括函數名、參數、返回值等,並以多行顯示,省去手動編寫)
/** + tab自動生成註釋
輸入/*、/**然後回車
個人喜好配置詳見(https://github.com/spadgos/sublime-jsdocs/)
---------------------------------------------------------------------------------------
六、SideBarEnhancements (右鍵增強功能插件)
---------------------------------------------------------------------------------------
七、ChineseLocalzations (菜單漢化)
---------------------------------------------------------------------------------------
八、SublimeCodeIntel(作為一個代碼提示和補全插件)
---------------------------------------------------------------------------------------
九、SublimeLinter (代碼檢查插件)
支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多種開發語言,
要檢查JavaScript代碼需要安裝node.js,檢查PHP代碼需要安裝PHP並配置環境等;
---------------------------------------------------------------------------------------
十、ColorPicker(調色板(需要輸入顏色時,可直接選取顏色))
快捷鍵Windows: ctrl+shift+c
---------------------------------------------------------------------------------------
十一、Autoprefixer插件(CSS3私有前綴自動補全插件)
使用:在輸入CSS3屬性後(冒號前)按Tab鍵;
---------------------------------------------------------------------------------------
十二、CssComb插件(CssComb是為CSS屬性進行排序和格式化插件(需安裝 Node.js 使用))
菜單Tools->Run CSScomb 或 在CSS文件中按快捷鍵 Ctrl+Shift+C
---------------------------------------------------------------------------------------
十三、AutoFileName(自動完成文件名的輸入,如圖片選取,快捷輸入文件名路徑補全)
---------------------------------------------------------------------------------------
十四、html-css-Js prettify 格式化(HTML,CSS,Javascript vue(需要配置)也行)
安裝完快捷鍵 ctrl+shift+h 一鍵格式化代碼
如果需要格式化.vue需要進行如下配置(其實就是多加一個vue文件配置)
"html":
{
"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg" ,"vue"],
"allowed_file_syntaxes": ["html", "xml"],
"disallowed_file_patterns": []
},
---------------------------------------------------------------------------------------
十五、Trimmer(由於錯誤或別的某些原因,會產生一些不必要的空格)
由於錯誤或別的某些原因,會產生一些不必要的空格
---------------------------------------------------------------------------------------
十六、Terminal(直接使用終端打開你的項目文件夾,並支持使用快捷鍵)
---------------------------------------------------------------------------------------
十七、Vue Syntax Highlight(vue語法高亮)
---------------------------------------------------------------------------------------
十八、less sass插件(語法高亮)
---------------------------------------------------------------------------------------
十九、sublimeTmpl(安裝模板插件)
安裝完成後就可以使用html/js/css/php/python/ruby的模版了;
SublimeTmpl默認的快捷鍵
ctrl+alt+h html
ctrl+alt+j javascript
ctrl+alt+c css
ctrl+alt+p php
ctrl+alt+r ruby
ctrl+alt+shift+p python
制作vue模版
C:\Users\LXY\AppData\Roaming\Sublime Text 3\Packages\SublimeTmpl\templates下新建vue.tmpl文件
<template>

</template>

<script>

</script>

<style scoped>

</style>
然後Preferences--->Package Settings--->SublimeTmpl--->Commands-default粘貼
,{
"caption": "Tmpl: Create vue", "command": "sublime_tmpl",
"args": {"type": "vue"}
}
Preferences--->Package Settings--->SublimeTmpl找到Key Bindings-Default設置熱鍵
,{
"keys": ["ctrl+alt+e"], "command": "sublime_tmpl",
"args": {"type": "vue"}, "context": [{"key": "sublime_tmpl.vue"}]
}

在你就可以用 Ctrl+Alt+e 就可以建立新的vue模板了;

sublime text3前端開發插件配置以及使用(個人喜愛)