Sublime 前端配置

package control的安装

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

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)

在preference工具栏中看是否有package control或者ctrl+shift+p 在弹出的面板中输入 package control 看到有该选项, 存在即说明安装成功
安装插件: ctrl+shift+p: 输入install package, 回车, 输入你想要安装的插件
也可以安装package control组件，然后直接离线安装：

配置与快捷使用

针对文字显示不能随光标移动的问题: 添加插件 IMESupport
preference->package control->install package-->IMESupport
常用插件 convertToUTF8 EncodingHelper
快捷键的使用
- ctrl+p: 命令查找搜索项目中的文件 @查找节点
- ctrl+d: 改变变量所有的都会改变 . ctrl+k跳过当前的变量, 同时多行操作
- ctrl+shift+d: 复制当前行
- Ctrl+Shift+K 删除整行
- alt+f3 整页选中选择的词
- 按住shift+右键产生多行游标
- 命令模式 (ctrl+shift+p -> set syntax:javascript)
匹配模式: ctrl+p: #+body跳转到指定标签
minimap 预览图模式
ctrl+shift+p: View Toggle Minimap 打开或者关闭右侧小地图
使用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

主题安装:
install package: theme-flatland space-gray
插件安装

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

注册码
/////////////////////////////////注册码
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
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 分屏处理
自定制快捷键
```
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,
安装Git包
git:addCurrentFile
git:Commit
git:push
查找字符串
GoToAnything:　ctrl+p
index.html:10 跳到第10行
index.html:@new 跳到函数行
index.html:#str 查找字符串
批处理
配置编译系统快捷打开网页 ctrl+b
{
"cmd": ["C:\Program Files (x86)\Google\Chrome\Application\chrome.exe", "$file"],
"selector":["text.html"],
}
推荐插件
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语法高亮)
个人配置

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  //光标移动的时候 不移除错误提示

Sublime 前端配置

Sublime 前端配置

package control的安装

配置与快捷使用

推荐阅读更多精彩内容

友情链接更多精彩内容