The first step is to download the software
and then Ctrl + ~ (Enter) to add the following installation package management to 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 install plugin:
Press Ctrl+Shift+P to bring up the command panel,
enter install to bring up the Install Package option and press Enter, then select the plugin to be installed in the list.
Easy-to-use development plug-ins for front-end development;
1. Emmet is a quick way to write html/css. How to use it: (tab shortcut)
1. child:> (nested operation is used to generate sibling nodes or child nodes in the DOM tree of the element)
div>p
<div>
<p></p>
</div>
2. Sibling: + (use + to generate element sibling nodes)
div+p
<div>
<p></p>
</div>
3. Multiplication: * (use * to generate multiple identical elements)
ul>li*2
<ul>
<li></li>
<li></li>
</ul>
4. Multi-class class name (adding ID and CLASS to elements is similar to CSS syntax)
div#footer.class1.class2.class3
<div id="footer" class="class1 class2 class3"></div>
5. Text operator (Emmet uses Text:{} to add text content to the element)
a{the content written in the tag}
<a href="">What is written in the tag</a>
---------------------------------- -------------------------------------------------- ---
Second, html5 (plug-in package that supports hmtl5 specification)
usage: (new html document > input html5 > hit Tab > auto-complete html5 specification document)
------------- -------------------------------------------------- ------------------------
Three, BracketHighlighter (can match the range within brackets, quotation marks and other symbols)
------------- -------------------------------------------------- --------------------------
Fourth, Alignment (code alignment)
shortcut Ctrl+Alt+A
---------- -------------------------------------------------- ---------------------------
Five, DocBlockr (annotation plug-in, generates beautiful annotations. Standard annotations, including function names, parameters , return value, etc., and display it in multiple lines, eliminating the need for manual writing)
/** + tab automatically generates comment
input /*, /** and then press Enter
. For details, see (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模板了；