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

时间:2023-08-22 18:44:20

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