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)
  1. 在preference工具栏中看是否有package control或者ctrl+shift+p 在弹出的面板中输入 package control 看到有该选项, 存在即说明安装成功

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

  3. 也可以安装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

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

  2. 插件安装

  • 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
  1. 注册码
    /////////////////////////////////注册码
    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

  2. 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 分屏处理

  3. 自定制快捷键

    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,

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

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

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

  7. 推荐插件
    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语法高亮)

  8. 个人配置

  • emmet user setting
    {
    // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
    "snippets": {
      "html": {
          "snippets": {
              "myfavicon": "<!-- favicon,可更改图片类型 -->\n<link rel=\"shortcut icon\" type=\"image/ico\" href=\"/favicon.ico\" />\n",
              "mycompat": "<!-- 优先使用 IE 最新版本和 Chrome -->\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\n",
              "360compat": "\n<!-- 360 使用Google Chrome Frame -->\n<meta name=\"renderer\" content=\"webkit\">\n",
              "mykeywords": "<!-- SEO页面关键词 -->\n<meta name=\"keywords\" content=\"your keywords\">\n",
              "mydesc": "<!-- SEO页面描述 -->\n<meta name=\"description\" content=\"your description\">\n",
              "myviewport": "<!-- 开启响应式 -->\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
              "mycache1":"<!-- 关闭缓存 -->\n<meta http-equiv=\"pragma\" content=\"no-cache\">",
              "mycache2":"<meta http-equiv=\"cache-control\" content=\"no-cache\">",
              "mycache3":"<meta http-equiv=\"expires\" content=\"0\">\n"
    
          },
          "abbreviations": {
              "!!": "{<!DOCTYPE html>}+html[lang='en']>(head>meta[charset='utf-8']+title{${1:文档标题}}+mycompat+myviewport+mycache1+mycache2+mycache3+mykeywords+mydesc+bs3css)+body>jq2+bs3js",
              "bs3js":"<script src=\"https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js\"></script>",
              "bs3css":"<link href=\"https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css\" rel=\"stylesheet\">",
              "jq3": "<script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js'>",
              "jq2": "<script src='https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js'>",
              "jq1": "<script src='https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js'>",
    
              "bs3css":"<link rel='stylesheet' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css' />",
              "bs3js":"<script src='https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js' >"
          }
      }
    }
    

}
```

  • Preferences->Settings
"line_padding_bottom": 3,
"line_padding_top": 3,
"show_encoding": true,
"translate_tabs_to_spaces": true,
 "folder_exclude_patterns":
     [
        ".svn",
        ".git",
        ".hg",
        "CVS",
        "node_modules",
        "bower_components"
     ],
     "font_face": "Comic Sans MS",
  • Preferences->Keybings
    [
    {"keys":["ctrl+shift+r"],"command":"reindent","args":{"single_line": false}},
    { "keys": ["alt+space"], "command": "auto_complete" },
    ]
  • 配置pylinter (Python语法校验器)
    pip install pylint 在本地python安装目录Scripts\pip.exe目录下面安装
    配置用户项
  {
        "ignore":["C", "R"]
  }
  • 默认配置添加相
   "use_icons": true,
    "run_on_save": true,
    "message_stay": true  //光标移动的时候 不移除错误提示
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • 近期在学习前端的相关知识中无意间了解到Sublime Text3,简单的学习之后,我发现确实很好用,强大的快...
    小y哥哥阅读 1,055评论 0 3
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    xiaotao123阅读 9,476评论 0 27
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    追風逸少丶阅读 11,315评论 1 34
  • sublime是一款具有漂亮的用户界面和强大的功能且小巧高速的代码编辑器。它最大的特点就是可以根据自己的需求下载需...
    爱扎马尾的小狮子阅读 495评论 2 1
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    晚晴幽草阅读 710,865评论 149 1,114