前端开发神器Sublime Text2/3之安装使用（windows7/Mac）

时间：2023-12-20 11:37:02

一，到官方网站下载神器

地址：http://www.sublimetext.com/3

Sublime Text 3 配置解释(默认)
{
// 设置主题文件
“color_scheme”: “Packages/Color Scheme – Default/Monokai.tmTheme”,
// 设置字体和大小
“font_face”: “Consolas”,
“font_size”: 12,
// 字体选项：no_bold不显示粗体字，no_italic不显示斜体字，no_antialias和no_antialias关闭反锯齿
// subpixel_antialias和no_round是OS X系统独有的
“font_options”: [],
// 在文字上双击会全选当前的内容，如果里面出现以下字符，就会被截断
“word_separators”: “./\\()\”‘-:,.;<>~!@#$%^&*|+=[]{}`~?”,
// 是否显示行号
“line_numbers”: true,
// 是否显示行号边栏
“gutter”: true,
// 行号边栏和文字的间距
“margin”: 4,
// 是否显示代码折叠按钮
“fold_buttons”: true,
// 不管鼠标在不在行号边栏，代码折叠按钮一直显示
“fade_fold_buttons”: true,
//列显示垂直标尺，在中括号里填入数字，宽度按字符计算
“rulers”: [],
// 是否打开拼写检查
“spell_check”: false,
// Tab键制表符宽度
“tab_size”: 4,
// 设为true时，缩进和遇到Tab键时使用空格替代
“translate_tabs_to_spaces”: false,
// 否则作用于单个空格
“use_tab_stops”: true,
“detect_indentation”: true,
// 按回车时，自动与制表位对齐
“auto_indent”: true,
//针对C语言的
“smart_indent”: false,
// 需要启用auto_indent，第一次打开括号缩进时插入空格？（没测试出来效果…）
“indent_to_bracket”: true,
// 显示对齐的白线是否根据回车、tab等操作自动填补
“trim_automatic_white_space”: true,
// 是否自动换行，如果选auto，需要加双引号
“word_wrap”: false,
// 设置窗口内文字区域的宽度
“wrap_width”: 0,
// 防止被缩进到同一级的字换行
“indent_subsequent_lines”: true,
// 如果没有定义过，则文件居中显示（比如新建的文件）
“draw_centered”: false,
// 自动匹配引号，括号等
“auto_match_enabled”: true,
// 拼写检查的单词列表路径
“dictionary”: “Packages/Language – English/en_US.dic”,
// 代码地图的可视区域部分是否加上边框，边框的颜色可在配色方案上加入minimapBorder键
“draw_minimap_border”: false,
// 突出显示当前光标所在的行
“highlight_line”: false,
// 设置光标闪动方式
“caret_style”: “smooth”,
// 是否特殊显示当前光标所在的括号、代码头尾闭合标记
“match_brackets”: true,
// 设为false时，只有光标在括号或头尾闭合标记的两端时，match_brackets才生效
“match_brackets_content”: true,
// 是否突出显示圆括号，match_brackets为true生效
“match_brackets_square”: false,
// 是否突出显示大括号，match_brackets为true生效
“match_brackets_braces”: false,
// 是否突出显示尖括号，match_brackets为true生效
“match_brackets_angle”: false,
// html和xml下突出显示光标所在标签的两端，影响HTML、XML、CSS等
“match_tags”: true,
// 全文突出显示和当前选中字符相同的字符
“match_selection”: true,
// 设置每一行到顶部，以像素为单位的间距，效果相当于行距
“line_padding_top”: 1,
// 设置每一行到底部，以像素为单位的间距，效果相当于行距
“line_padding_bottom”: 1,
// 设置为false时，滚动到文本的最下方时，没有缓冲区
“scroll_past_end”: true,
// 控制向上或向下到第一行或最后一行时发生什么
“move_to_limit_on_up_down”: false,
// 按space或tab时，实际会产生白色的点（一个空格一个点）或白色的横线（tab_size设置的制表符的宽度），选中状态下才能看到
// 设置为none时，什么情况下都不显示这些点和线
// 设置为selection时，只显示选中状态下的点和线
// 设置为all时，则一直显示
“draw_white_space”: “selection”,
// 制表位的对齐白线是否显示，颜色可在主题文件里设置（guide，activeGuide，stackGuide）
“draw_indent_guides”: true,
// 制表位的对齐白线，draw_normal为一直显示，draw_active为只显示当前光标所在的代码控制域
“indent_guide_options”: ["draw_normal"],
// 为true时，保存文件时会删除每行结束后多余的空格
“trim_trailing_white_space_on_save”: false,
// 为true时，保存文件时光标会在文件的最后向下换一行
“ensure_newline_at_eof_on_save”: false,
// 切换到其它文件标签或点击其它非本软件区域，文件自动保存
“save_on_focus_lost”: false,
// 编码时不能自动检测编码时，将自动检测ASCII, UTF-8 和 UTF-16
“fallback_encoding”: “Western (Windows 1252)”,
// 默认编码格式
“default_encoding”: “UTF-8″,
// 包含空字节的文件被打开默认为十六进制
“enable_hexadecimal_encoding”: true,
// 每一行结束的时候用什么字符做终止符
“default_line_ending”: “system”,
// 设置为enabled时，在一个字符串间按Tab将插入一个制表符
// 设置为true时，按Tab会根据前后环境进行代码自动匹配填补
“tab_completion”: true,
// 代码提示
“auto_complete”: true,
// 代码提示的大小限制
“auto_complete_size_limit”: 4194304,
// 代码提示延迟显示
“auto_complete_delay”: 50,
// 代码提示的控制范围
“auto_complete_selector”: “source – comment”,
// 触发代码提示的其他情况
“auto_complete_triggers”: [ {"selector": "text.html", "characters": "<"} ],
// 设为false时，选择提示的代码按回车或点击可以输出出来，但选择true时不会输出而是直接换行
“auto_complete_commit_on_tab”: false,
// 设置为false，使用Shift + tab总是插入制表符
“shift_tab_unindent”: true,
// 选中的文本按Ctrl + f时，自动复制到查找面板的文本框里
“find_selected_text”: true,
// Data\Packages\Theme – Default\Default.sublime-theme控制软件的主题
“theme”: “Default.sublime-theme”,
// 滚动的速度
“scroll_speed”: 1.0,
// 左边边栏文件夹动画
“tree_animation_enabled”: true,
// 标签页的关闭按钮
“show_tab_close_buttons”: true,
// 针对OS X
“use_simple_full_screen”: false,
// 水平垂直滚动条：system和disabled为默认显示方式，enabled为自动隐藏显示
“overlay_scroll_bars”: “system”,
// 热推出功能！退出时不会提示是否保存文件，而是直接退出
// 下次打开软件时，文件保持退出前的状态，没来得及保存的内容都在，但并没有真实的写在原文件里
“hot_exit”: true,
// 软件使用最后的设定打开文件，hot_exit为true时没有效果
“remember_open_files”: true,
// 针对OS X
“open_files_in_new_window”: true,
// 针对OS X
“close_windows_when_empty”: true,
// 哪些文件会被显示到边栏上
“folder_exclude_patterns”: [".svn", ".git", ".hg", "CVS"],
“file_exclude_patterns”: ["*.pyc", "*.pyo", "*.exe", "*.dll", "*.obj","*.o", "*.a", "*.lib", "*.so", "*.dylib", "*.ncb", "*.sdf", "*.suo", "*.pdb", "*.idb", ".DS_Store", "*.class", "*.psd", "*.db"],
// Goto Anything or Find in Files
“binary_file_patterns”: ["*.jpg", "*.jpeg", "*.png", "*.gif", "*.ttf", "*.tga", "*.dds", "*.ico", "*.eot", "*.pdf", "*.swf", "*.jar", "*.zip"],
// 删除你想要忽略的插件，需要重启, 去掉Vinage开启vim模式
“ignored_packages”: ["Vintage"]

}

二，Package control 插件管理（安装各种包的基础）

A,WIN7

到https://github.com/wbond/sublime_package_control下载zip文件，解压后更改文件名为Package Control，然后复制到C:\Users\你的用户名\AppData\Roaming\Sublime Text 3\Packages下（与User同级目录），重启。

这时按ctrl+shift+p后再输入install就可以安装各种功能了

 B,Mac

安装 Package Control 的方法：

  • 打开 Sublime Text 2，按下 Control + ` 调出 Console

  • 将以下代码粘贴进命令行中并回车：

    import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

  • Sublime Text 3 请使用以下代码：

    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())

三，有用的插件

1，TrailingSpaces

有时候在代码结尾打多了几个空格或Tab，一般不会察觉，TrailingSpacer这款插件能高亮显示多余的空格和Tab，并可以一键删除它们，有代码洁癖的朋友应该会喜欢这个插件。

前端开发神器Sublime Text2/3之安装使用（windows7/Mac）

插件下载：https://github.com/SublimeText/TrailingSpaces

注意，在github上下载的插件缺少了一个设置快捷键的文件，可以新建一个名字和后缀为Default (Windows).sublime-keymap的文件，添加以下代码，即可设置“删除多余空格”和“是否开启TrailingSpaces ”的快捷键了。

 [

     { "keys": ["ctrl+alt+d"], "command": "delete_trailing_spaces" },

3     { "keys": ["ctrl+alt+o"], "command": "toggle_trailing_spaces" }

4 ]

2,SideBarEnhancements 侧边栏增强

直接搜索安装就好

3，JsFormat

记住快捷键ctrl+alt+f

4,SublimeTmpl 快速生成文件模板

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
5，Emmet快速编辑（Zen Coding）
Emmet安装后按快捷键ctrl+alt+enter会提示要下载PyV8库文件，重启后自动下载，按快捷键ctrl+~会看到下载信息，如下图
前端开发神器Sublime Text2/3之安装使用（windows7/Mac）

6，SFTP/FTP 安装

安装后在插件文件夹下找到SFTP.default-config,替换内容为下面代码（根据自己情况相应修改）

 {

     // The tab key will cycle through the settings when first created

     // Visit http://wbond.net/sublime_packages/sftp/settings for help

     // sftp, ftp or ftps

     "type": "sftp",

     "sync_down_on_open": true,

     "host": "liubei.me",

     "user": "liubei",

     "password": "123456",

     //"port": "22",

     "remote_path": "/usr/local/test/",

     //"file_permissions": "664",

     //"dir_permissions": "775",

     //"extra_list_connections": 0,

     "connect_timeout": 30,

     //"keepalive": 120,

     //"ftp_passive_mode": true,

     //"ssh_key_file": "~/.ssh/id_rsa",

     //"sftp_flags": ["-F", "/path/to/ssh_config"],

     //"preserve_modification_times": false,

     //"remote_time_offset_in_hours": 0,

     //"remote_encoding": "utf-8",

     //"remote_locale": "C",

 }

修改完成后，在左侧目录访工程项目点击右键选择上传会自动在该项目下生成一个sftp-config.json的配置文件，到时就ok了~

四，快捷键汇总

Ctrl+Shift+P：打开命令面板
Ctrl+P：搜索项目中的文件
Ctrl+G：跳转到第几行
Ctrl+W：关闭当前打开文件
Ctrl+Shift+W：关闭所有打开文件
Ctrl+Shift+V：粘贴并格式化
Ctrl+D：选择单词，重复可增加选择下一个相同的单词
Ctrl+L：选择行，重复可依次增加选择下一行
Ctrl+Shift+L：选择多行
Ctrl+Shift+Enter：在当前行前插入新行
Ctrl+X：删除当前行
Ctrl+M：跳转到对应括号
Ctrl+U：软撤销，撤销光标位置
Ctrl+J：选择标签内容
Ctrl+F：查找内容
Ctrl+Shift+F：查找并替换
Ctrl+H：替换
Ctrl+R：前往 method
Ctrl+N：新建窗口
Ctrl+K+B：开关侧栏
Ctrl+Shift+M：选中当前括号内容，重复可选着括号本身
Ctrl+F2：设置/删除标记
Ctrl+/：注释当前行
Ctrl+Shift+/：当前位置插入注释
Ctrl+Alt+/：块注释，并Focus到首行，写注释说明用的
Ctrl+Shift+A：选择当前标签前后，修改标签用的
F11：全屏
Shift+F11：全屏免打扰模式，只编辑当前文件
Alt+F3：选择所有相同的词
Alt+.：闭合标签
Alt+Shift+数字：分屏显示
Alt+数字：切换打开第N个文件
Shift+右键拖动：光标多不，用来更改或插入列内容
鼠标的前进后退键可切换Tab文件
按Ctrl，依次点击或选取，可需要编辑的多个位置
按Ctrl+Shift+上下键，可替换行

追加技巧

五、缩进设置

具体操作：

Preferences -> Settings -> More -> Syntax Specific -> User

添加

{"tab_size":2,"translate_tabs_to_spaces":true}

概述

缩进设置决定了tab符缩进的大小，控制tab键是插入tab符号还是空格。除了自动检测之外，它们可以自定义为全局，某种文件类型，或者某个文件。

设置

tab_size 数字。插入的空格数
translate_tabs_to_spaces Boolean, 如果为true，按tab键将会输入空格替代，而不是tab字符。
detect_indentation Boolean, 默认为true, tab_size和translate_tabs_to_spaces将会在文件载入是自动计算。
use_tab_stops Boolean, 如果translate_tabs_to_spaces为true, use_tab_stops将会使tab和backspace在下一个tab停止时insert/delete

配置文件

配置文件将会按下面这个顺序应用：

  1. Packages/Default/Preferences.sublime-settings
  2. Packages/Default/Preferences (<platform>).sublime-settings
  3. Packages/User/Preferences.sublime-settings
  4. Packages/<syntax>/<syntax>.sublime-settings
  5. Packages/User/<syntax>.sublime-settings

通常情况下，你应该把你的配置放在Packages/User/Preferences.sublime-settings里。如果你要给特定的文件类型指定配置，比如，Python, 应该放在Packages/User/Python.sublime-settings文件中。

配置文件示例

试着把这些保存为Packages/User/Preferences.sublime-settings

{

    "tab_size": 4,

    "translate_tabs_to_spaces": false

}

单独语法配置

可以在基础配置之上指定单独的语法配置。在Preferences/Settings - More/Syntax Specific - User菜单下。

缩进的检测

当一个文件载入时，它的内容会被检查，tab_size和translate_tabs_to_spaces设置将会应用到该文件。状态栏将会报告发了什么。尽管编辑器会处理的很好，如果想要把它禁用的话，可以通过detect_indentation来设置。

缩进检测可以手动执行，通过View/Indentation/Guess Settings From Buffer菜单执行detect_indentation命令。

Tab和空格之间转换

View/Indentation菜单里有命令可以将当前文件中的空白在tab符和空格符之间转换。这几个菜单项执行的是expand_tabs和unexpand_tabs命令。

自动缩进

自动缩进猜测会在换行时给每一行添加一定数量空白符。由下面这个配置控制：

auto_indent Boolean, 默认是开启。
smart_indent Boolean, 默认是开启。具有一点小聪明的自动缩进，比如，在一个if语法片段的下一行进行缩进。
trim_automatic_white_space Boolean, 默认开启。当断行时由auto_indent去除行头尾的空白。
indent_to_bracket Boolean, 默认禁用。缩进时根据第一个前括号来空白数。像下面这样： 
use_indent_to_bracket(to_indent,

                      like_this);

六、自动换行以及字体设置

Preferences -> Setting - User（设置 - 用户）

"word_wrap": true,
"wrap_width": 80,

"font_face": "Courier New",
"font_size": 10

七、格式化html

安装tag

八、jsLint

ctrl + L

九、开发环境配置

Sublime Node.js开发环境配置

下载并安装Node.js安装包后再开始配置

　　1.先安装好Sublime Text 2

　　2.运行Sublime,菜单上找到Tools ---> Build System ---> new Build System

　　3.在文件中复制入

{

    "cmd": ["node", "$file"],

    "file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",

    "selector": "source.javascript"

}
前端开发神器Sublime Text2/3之安装使用（windows7/Mac）
//  php

{

        "cmd": ["php", "$file"],

        "file_regex": "php$",

        "selector": "source.php"

    }
前端开发神器Sublime Text2/3之安装使用（windows7/Mac）

相关文章