sublime text3前端开发插件配置以及使用（个人喜爱）

Posted 2020-11-02 鱼樱、、

第一步下载软件
接着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模板了；