zoukankan      html  css  js  c++  java
  • sublime text3前端开发插件配置以及使用(个人喜爱)

    第一步下载软件
    接着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:UsersLXYAppDataRoamingSublime Text 3PackagesSublimeTmpl emplates下新建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模板了;

     

  • 相关阅读:
    个人作业——软件评测
    2020软件工程实践 作业3
    2020软件工程实践 寒假作业2
    2020软件工程实践 寒假作业1
    计网大概
    大写金额转换实现
    软件工程实践总结&个人技术博客
    个人技术博客
    软件评测
    疫情统计实现
  • 原文地址:https://www.cnblogs.com/lhl66/p/8994344.html
Copyright © 2011-2022 走看看