Sublime 前端配置

package control的安装

1. 按Ctrl+`调出console（注：安装有QQ输入法的这个快捷键会有冲突的，输入法属性设置-输入法管理-取消热键切换至QQ拼音）

2. 在输入框中输入下面命令

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

3. 在preference工具栏中看是否有package control或者ctrl+shift+p 在弹出的面板中输入 package control 看到有该选项, 存在即说明安装成功

4. 安装插件: ctrl+shift+p: 输入install package, 回车, 输入你想要安装的插件

5. 也可以安装package control组件，然后直接离线安装：

---

配置与快捷使用

1. 针对文字显示不能随光标移动的问题: 添加插件 IMESupport
   preference->package control->install package-->IMESupport
   常用插件 convertToUTF8 EncodingHelper

2. 快捷键的使用

   • ctrl+p: 命令查找搜索项目中的文件 @查找节点
   • ctrl+d: 改变变量 所有的都会改变 . ctrl+k跳过当前的变量, 同时多行操作
   • ctrl+shift+d: 复制当前行
   • Ctrl+Shift+K 删除整行
   • alt+f3 整页选中选择的词
   • 按住shift+右键 产生多行游标
   • 命令模式 (ctrl+shift+p -> set syntax:javascript)

3. 匹配模式: ctrl+p: #+body跳转到指定标签

4. minimap 预览图模式
   ctrl+shift+p: View Toggle Minimap 打开或者关闭右侧小地图

5. 使用EMMET插件

• 输入! 然后ctrl+e 生成html5模板代码 (或者输入 doc 然后 ctrl+e)

• ctrl+enter: 当前页加上一行

• ul>li.class#id$*10+ ctrl+e{content}[properties=value]

• div+p+bq 创建三个并列标签

• ctrl+{ }分别左右缩进

  • 游标alt+f3-->选中所有的相同 h2{this is the title}(大括号代表的是输出)
    复制粘贴的时候: ctrl+shift+v 代码有格式粘贴
    emmet api API地址

• css

  • p20 tab == padding:20px;
  • m0-auto == margin:0 auto;

• wrap with abbreviation

6. 主题安装:
   install package: theme-flatland space-gray

7. 插件安装

• JQuery jquery语法提示
• JavaScript+Node.js js语法提示
• Insert callback(快捷键 alt+c) 快速插入
• Advanced new File ctrl+alt+N 输入文件名或者路径名
• sideBarEnhancements: 侧边栏目加强
• DocBlockr: 注解器模块 ctrl+/ 快速注释
• sublimeLinter 语法和风格校验
• sublimeLinter-JShint
  • 然后(安装npm包) 但是首要的是安装nodejs
  • (进入nodejs的安装目录目录下面在cmd目录下输入) 最好选择默认安装
  • npm install -g jshint //安装jshint
    自定义校验风格: 配置文件必须以.jshintrc命名 配置文件是以json文件的格式
    "eqeqeq":true, 'curly":true;
• HTML+JS+CSS Pretty: 快捷 ctrl+shift+h
• Trailing Spaces插件: 高亮显示多余的空格和Tab
• Tag插件 标签缩进补全排版和校验 Edit->Tag->Auto Format Tags On Document
• Terminal插件 快捷弹出cmd ----> Ctrl+Shift+T 参考网址 http://www.wiibil.com/website/sublimelinter-jshint-csslint.html

8. 注册码
   /////////////////////////////////注册码
   Michael Barnes
   Single User License
   EA7E-821385
   8A353C41 872A0D5C DF9B2950 AFF6F667
   C458EA6D 8EA3C286 98D1D650 131A97AB
   AA919AEC EF20E143 B361B1E7 4C8B7F04
   B085E65E 2F5F5360 8489D422 FB8FC1AA
   93F6323C FD7F7544 3F39C318 D95E6480
   FCCC7561 8A4A1741 68FA4223 ADCEDE07
   200C25BE DBBC4855 C4CFB774 C5EC138C
   0FEC1CEF D9DCECEC D3A5DAD1 01316C36

9. Sublime使用手册
   ctrl+k+b 隐藏/显示菜单栏
   ctrl+j 合并一行
   ctrl+d 选中多个单词
   shift+右键 块选择
   alt + <- 每次移动一个单位
   ctrl+k+l转小写 (lower)
   ctrl+k+u转大写 (upper)
   缩进控制: Reindent Lines (ctrl+shift+r)
   ctrl+` 打开控制台 sublime.log_commands(True)
   esc退出控制台
   shift+F11 全屏免打扰
   alt+shift+number 分屏处理

10. 自定制快捷键

    key-binding-user
      [
          {"keys":["ctrl+shift+r"],"command":"reindent","args":{"single_line": false};
      ]
    

    设置reindent自动调节代码格式ctrl+shift+r
    setting-user中设置行高
    "line_padding_top": 7,
    "line_padding_bottom": 7,

11. 安装Git包
    git:addCurrentFile
    git:Commit
    git:push

12. 查找字符串
    GoToAnything:　ctrl+p
    index.html:10 跳到第10行
    index.html:@new 跳到函数行
    index.html:#str 查找字符串

13. 批处理
    配置编译系统 快捷打开网页 ctrl+b
    {
    "cmd": ["C:\Program Files (x86)\Google\Chrome\Application\chrome.exe", "$file"],
    "selector":["text.html"],
    }

14. 推荐插件
    AdvancedNewFile (快速生成文件 ctrl+shift+n 或者alt+shift+n
    AngularJs
    Bootstrap 3 Autocomplete (bootstrap提示)
    ConvertToUtf8
    DockBockr (快速生成注释 ctrl+/)
    Emmet (强烈推荐)
    EncodingHelper (显示当前文件的编码)
    HTML-CSS-JS Prettify (快捷键 ctrl+shift+h)
    Http Requester
    IMESupport (解决光标不能随输入法移动问题)
    Insert Callback
    Jade
    Nettuts+fetch
    Package Control
    Pylinter
    PyV8
    SidebarEnhancements (左侧栏加强)
    SublimeLinter
    SublimeLinter-jshint (JS语法检验)
    SublimeServer
    Terminal (当前文件或者文件夹下启动terminal终端) ctrl+shift+t
    Trailing Spaces (高亮显示多余的空格)
    Vue Sytax Highlight (Vue语法高亮)
    bracketsHighted (括号匹配插件)
    Less2Css (配合 npm install less-plugin-clean-css -g)
    Less (sublime text3语法高亮)

15. 个人配置

• emmet user setting

  {
  // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
  "snippets": {
    "html": {
        "snippets": {
            "myfavicon": "\n\n",
            "mycompat": "\n\n",
            "360compat": "\n\n\n",
            "mykeywords": "\n\n",
            "mydesc": "\n\n",
            "myviewport": "\n\n",
            "mycache1":"\n",
            "mycache2":"",
            "mycache3":"\n"
  
        },
        "abbreviations": {
            "!!": "{}+html[lang='en']>(head>meta[charset='utf-8']+title{${1:文档标题}}+mycompat+myviewport+mycache1+mycache2+mycache3+mykeywords+mydesc+bs3css)+body>jq2+bs3js",
            "bs3js":"",
            "bs3css":"",
            "jq3": "