实用工具我也码sublime

Sublime Text 3 开发环境配置

2018-09-21  本文已影响162人  BiaoWong

0x00 安装Package Control

自动安装

使用快捷方式 ctrl+` 或者在菜单栏中选择 View > Show Console 并在弹出的控制台中输入如下内容:

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; 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 点击 Preferences > Browse Packages 菜单
2 进入打开的目录的上层目录,然后再进入 Installed Packages/ 目录
3 下载 Package Control.sublime-package 并复制到 Installed Packages/ 目录
4 重启 Sublime Text

使用

1 点击 Preferences > Package Control 或者按下 ctrl + shift + p
2 在弹出的输入框中输入 install 选择 Package Control: Install Package 回车,显示插件列表
3 输入插件名搜索插件
4 使用方向键选中想要安装的插件并回车,或鼠标点击想要安装的软件进行安装

0x01 插件配置

Alignment 一个非常简单和易于使用的 自动对齐 插件,使你的代码组织和美观。当您重温代码时候非常有用。
使用方法:选中要调整的行,然后按 Ctrl + Alt + A (快捷键可自定义)

Alignment效果展示

BracketHighlighter 该插件提供行数列高亮的各种配对的语法符号。(就是将配对的括号等显示在行数列上)

BracketHighlighter效果图 BracketHighlighter效果图

Emmet 绝对的节省时间,您可以轻松快速地编写HTML。
使用方法: ctrl + alt + enter,并且开始输入Emmet风格的HTML

Emmet风格的HTML

DocBlockr 一个真正简单的方式来轻松地创建许多语言包括JavaScriptPHPCoffeeScript 的文档块。只要在函数的上面输入 /** ,按 Tab 就可以了。DocBlockr会观察函数需要的变量名和类型,并创建文档块。

DocBlockr注释 DocBlockr代码块注释

AllAutocomplete 最新Sublime Text 3 已包含该功能
Sublime Text 默认的 Autocomplete 功能只考虑当前的文件,而 AllAutocomplete 插件会搜索所有打开的文件来寻找匹配的提示词。

AllAutocomplete代码提示效果

SublimeREPL 这可能是对程序员最有用的插件。SublimeREPL 允许你在 Sublime Texxt 中运行各种语言(NodeJS , Python,Ruby, Scala 和 Haskell 等等)。

SublimeREPL运行效果

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

Trailing Spaces效果 Trailing Spaces快捷键

jQuery jQuery代码提示补全功能

jquery效果

0x02 主题配色

Material Theme 为例

Material Theme主题效果

安装方式:
1 点击 Preferences > Package Control 或者按下 ctrl + shift + p
2 在弹出的输入框中输入 install 选择 Package Control: Install Package 回车,显示插件列表
3 输入 Material Theme 回车,观察Sublime Text底部状态栏,如下

Sublime Text 底部状态栏
4 显示如下画面表示安装成功,点击下图红框 Install 安装 A File Icon 插件
Material Theme主题安装成功

0x03 配置文件

点击 Preferences > Settings,覆盖粘贴内容如下:

{
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
    "ensure_newline_at_eof_on_save": true,
    "font_size": 16,
    "font_face": "Menlo",
    "ignored_packages":
    [
        "Vintage"
    ],
    "rulers":
    [
        80,
        100
    ],
    "tab_size": 4,
    "tabs_small": true,
    "theme": "Material-Theme.sublime-theme",
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true,

    // Accent
    // "material_theme_accent_acid-lime"         : true, // Set acid-lime accent color
    // "material_theme_accent_blue"              : true, // Set blue accent color
    // "material_theme_accent_brba"              : true, // Set Breaking Bad green accent color
    // "material_theme_accent_bright-teal"       : true, // Set bright-teal accent color
    // "material_theme_accent_cyan"              : true, // Set cyan accent color
    // "material_theme_accent_graphite"          : true, // Set graphite accent color
    // "material_theme_accent_indigo"            : true, // Set indigo accent color
    // "material_theme_accent_lime"              : true, // Set lime green accent color
    // "material_theme_accent_orange"            : true, // Set orange accent color
    // "material_theme_accent_pink"              : true, // Set pink accent color
    // "material_theme_accent_purple"            : true, // Set purple accent color
    // "material_theme_accent_red"               : true, // Set pale red accent color
    // "material_theme_accent_sky"               : true, // Set bright-cyan accent color
    // "material_theme_accent_tomato"            : true, // Set tomato red accent color
    // "material_theme_accent_yellow"            : true, // Set yellow accent color

    // Panels
    "material_theme_accent_scrollbars"        : true, // Enable accent color for scrollbars
    "material_theme_accent_titlebar"          : true, // Enable accent color for titlebar
    "material_theme_bright_scrollbars"        : true, // Bright scrollbars puck color
    "material_theme_compact_panel"            : true, // Set minimal padding for the search panel
    "material_theme_contrast_mode"            : true, // Enable sidebar and panels contrast mode
    "material_theme_panel_separator"          : true, // Show bottom panel separator
    "material_theme_small_statusbar"          : true, // Set small status bar
    "material_theme_titlebar"                 : true, // Enable title bar (OS X 10.10+)

    // Sidebar
    "material_theme_arrow_folders"            : true, // Replace folder icons with arrows
    "material_theme_big_fileicons"            : true, // Show bigger file type icons
    "material_theme_bullet_tree_indicator"    : true, // Set a bullet as active tree indicator
    "material_theme_compact_sidebar"          : true, // Set compact sidebar
    "material_theme_disable_fileicons"        : true, // Hide sidebar file type icons
    "material_theme_disable_folder_animation" : true, // Disable folder animation
    "material_theme_disable_tree_indicator"   : true, // Disable sidebar file indicator

    // Tabs
    "material_theme_bold_tab"                 : true, // Make the tab labels bolder
    "material_theme_small_tab"                : true, // Set small tabs
    "material_theme_tabs_autowidth"           : true, // Enable autowidth for tabs
    "material_theme_tabs_separator"           : true, // Show tabs separator, this disables tab hover animation

    // If you use Material Theme - Appbar addon, you can use this setting:
    "material_theme_tree_headings"            : true, // Show sidebar headings

    "always_show_minimap_viewport" : true,
    "bold_folder_labels"           : true,
    "font_options"                 : ["gray_antialias", "subpixel_antialias"], // On retina Mac & Windows
    "indent_guide_options"         : ["draw_normal", "draw_active"], // Highlight active indent
    "line_padding_bottom"          : 2,
    "line_padding_top"             : 2,
    "overlay_scroll_bars"          : "enabled",
}

0x04 总结

操作到这里,一个便捷、优美的开发环境已经大功告成了!由于篇幅问题,有很多优秀的插件本文中没有提到。希望有兴趣的小伙伴自己去探索。对于有特殊要求的Coder也可以根据自己的要需求自行配置。希望本文能起到一个抛砖引玉的效果。如有不足,请多包涵,谢谢大家!

上一篇下一篇

猜你喜欢

热点阅读