丰富 Sublime 编辑器

一、常用插件

• 1、安装package control
  调用ctrl+'调出命令行，输入如下代码后重启sublime

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

• 2、boxy theme主题插件
  配置项如下：(Preferences/Package Settings/Boxy Theme/Preferences)

{
    "color_scheme": "Packages/Boxy Theme/schemes/Boxy Monokai.tmTheme",
    "font_size": 16,
    "ignored_packages":
    [
        "Vintage"
    ],
    "theme": "Boxy Monokai.sublime-theme",
    "theme_accent_blue": true,
    "theme_find_panel_atomized": true,
    "theme_find_panel_close_hidden": true,
    "theme_find_panel_font_md": true,
    "theme_find_panel_padding_xl": true,
    "theme_find_panel_size_xxs": true,
    "theme_font_xl": true,
    "theme_icon_button_highlighted": true,
    "theme_icons_atomized": true,
    "theme_sidebar_heading_bold": true,
    "theme_sidebar_indent_top_level_disabled": true,
    "theme_sidebar_indent_xl": true,
    "theme_size_lg": true,
    "theme_tab_arrows_hidden": true,
    "theme_tab_close_always_visible": true,
    "theme_tab_font_md": true,
    "theme_tab_line_size_lg": true,
    "theme_tab_selected_label_bold": true,
    "theme_tab_selected_prelined": true,
    "theme_tab_separator": true,
    "theme_tab_size_xs": true,
    "theme_tab_width_auto": true
}

• 3 A File Icon
  文件图标插件，保持默认配置
• 4 AdvancedNewFile
  快速新建文件，保持默认配置
• 5 AutoFileName
  路径自动补全插件，保持默认配置
• 6 Emmet
  快速写HTML，CSS的插件，保持默认配置
• 7 DocBlockr
  注释插件，保持默认配置
• 8 SideBarEnhancements
  鼠标右键菜单加强插件，保持默认配置
• 9 BufferScroll
  保持代码折叠状态插件
  (sublime可能找不到，到这儿下载)
• 10 Sublime Tmpl
  快速生成模板插件

// 自定义vue模板如下：
1、在Preferences\Browser Packages\User\SublimeTmpl\templates目录下新建vue.tmpl文件，内容如下（需先安装sublitetmpl插件）：
```javascript
/**
 * @Authors ${author} (${email})
 * @Date    ${date}
 * @Github ${link}
 */
<template>
    <div class="tmpl">
        
    </div>
</template>

<script>
    export default{
        name:'',
        props: {
            // some:String,
        },
        data(){
            return{
                
            }
        },
        methods:{
            
        },
        components:{
            
        }
    }
</script>

<style lang='scss'>
    
</style>

2、在SublimeTmpl / Settings - User下添加如下内容:

{
    "vue": {
        "vue": {"syntax": "Packages/Vue Syntax Highlight/vue.tmLanguage", "extension": "vue"},
        "extension": "vue" // default_extension
    },
    "disable_keymap_actions": false, // "all"; "html,css"
    "enable_project_variables": false, // ${project_base_name}, ${project_path} and ${platform}
    "enable_file_variables_on_save": false, // ${saved_filename}, ${saved_filepath} on save file
    "date_format" : "%Y-%m-%d %H:%M",
    "attr": {
        "author": "冯银超",
        "email": "[email protected]",
        "link": "https://github.com/fengyinchao"
    }
}

3、 在SublimeTmpl / Settings/Menu下增加如下内容:

{
       "id": "vue",
       "caption": "Vue",
       "command": "sublime_tmpl",
       "args": {
            "type": "vue"
        }
}

4、在SublimeTmpl / Key Bindings User下增加如下内容

    {   
        "keys": ["alt+v"], "command": "sublime_tmpl",
        "args":{
            "type":"vue"
        }
    }

5、按alt+v就可生成模板了

- 11 Terminal
打开终端插件，需配置以下路径：
```javascript
{
    // window下终端路径
    "terminal": "D:\\Users\\cmder\\Cmder.exe",
    //  window下终端参数
    "parameters": ["/START", "%CWD%"]
}

• 12 vue syntax highlight
  vue语法高亮
• 13 cssrem
  将css由px转为rem
• 14 Sass
  Sass语法高亮
• 15 jQuery
  jQuery代码提示
• 16 MarkdownEditing+ MarkdownHighlight
  .md文件语法高亮
• 17 Git && Git Conflict Resolver
  代码管理 && 解决冲突用
• 18 # jsfmt
  jsx支持，解构不换行

{
    // autoformat on save
    "autoformat": false,

    // array of extensions for autoformat
    "extensions": ["js", "sublime-settings"],

    // options for jsfmt
    "options": {
        "preset": "jquery",
        "indent": {
            "value": "    "
        },
        // plugins included
        "plugins": [
            // "esformatter-quotes",
            // "esformatter-semicolons",
            // "esformatter-braces",
            // "esformatter-dot-notation"
        ]
    },
    "options-JSON": {
        "plugins": [
            "esformatter-quotes"
        ],
        "quotes": {
            "type": "double"
        }
    },
    "alert-errors": true,
    // path to nodejs
    "node-path": "node",
    // if true it will format the whole file even if you have a selection active
    "ignore-selection": false
}

• 19 html-css-js-prettity
  一般只用其html和css格式化，js用另外的，如jsfmt。需设置node路径才能生效

{
    // Simply using `node` without specifying a path sometimes doesn't work :(
    // https://github.com/victorporof/Sublime-HTMLPrettify#oh-noez-command-not-found
    // http://nodejs.org/#download
    "node_path":
    {
        "windows": "C:/Program Files/nodejs/node.exe",
        "linux": "/usr/bin/nodejs",
        "osx": "/usr/local/bin/node"
    },

    // Automatically format when a file is saved.
    "format_on_save": true,

    // Automatically format when a file is opened. (Sublime Text 3 only)
    "format_on_open": false,

    // Automatically format when a file is focused. (Sublime Text 3 only)
    "format_on_focus": false,

    // Automatically format when a file loses focus. (Sublime Text 3 only)
    "format_on_focus_lost": false,

    // Automatically format while a file is being edited. (Experimental / Sublime Text 3 only)
    "format_while_editing": false,

    // Only format the selection if there's one available.
    "format_selection_only": true,

    // Save to a temporary file before prettifying.
    "save_to_temp_file_before_prettifying": true,

    // Settings determining which files are allowed to be prettified.
    // All the keys below need to be included in your user settings for them to work.
    "global_file_rules":
    {
        // Be sure to include the `html` key in your user settings to be able
        // to prettify html files.
        "html":
        {
            "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg"],
            "allowed_file_syntaxes": ["html", "xml"],
            "disallowed_file_patterns": []
        },
        // Be sure to include the `css` key in your user settings to be able
        // to prettify css files.
        "css":
        {
            "allowed_file_extensions": ["css", "scss", "sass", "less"],
            "allowed_file_syntaxes": ["css", "sass", "less"],
            "disallowed_file_patterns": []
        },
        // Be sure to include the `js` key in your user settings to be able
        // to prettify js files.
        "js":
        {
            "allowed_file_extensions": [],
            "allowed_file_syntaxes": [],
            "disallowed_file_patterns": []
        },
        // Be sure to include the `json` key in your user settings to be able
        // to prettify json files.
        "json":
        {
            "allowed_file_extensions": [
                "json",
                "babelrc",
                "eslintrc",
                "jshintrc",
                "jsbeautifyrc",
                "sublime-settings",
                "sublime-keymap",
                "sublime-commands",
                "sublime-menu"
            ],
            "allowed_file_syntaxes": ["json"],
            "disallowed_file_patterns": []
        }
    },

    // Respect `.editorconfig` rules, overriding settings from `.jsbeautifyrc`.
    // Note that `use_editor_syntax` and `use_editor_indentation` have precedence
    // and will always override any other settings from any configuration file
    // like `.jsbeautifyrc` and `.editorconfig`.
    "respect_editorconfig_files": true,

    // Use current syntax to determine file type, instead of the extension.
    "use_editor_syntax": true,

    // Use current identation settings to override the ones from `.jsbeautifyrc`.
    "use_editor_indentation": false,

    // Log the settings passed to the prettifier from `.jsbeautifyrc`.
    "print_diagnostics": true
}

二、快捷键 key-binding

[
{
    "keys": ["alt+u"],
    "command": "prompt_select_workspace"
},
{
    "keys": ["alt+h"],
    "command": "show_overlay",
    "args":
    {
        "overlay": "command_palette"
    }
},
{
    "keys": ["ctrl+q"],
    "command": "toggle_side_bar"
},
{
    "keys": ["ctrl+alt+w"],
    "command": "closeProject"
},
{
    "color_scheme": "Packages/MarkdownEditing/MarkdownEditor-Dark.tmTheme",
    "draw_centered": false, // 改为false，原始值为true
    "word_wrap": true,
    "wrap_width": 120, // 每行字符数上限
    "rulers": [],
},
{
    "keys": ["ctrl+n"],
    "command": "advanced_new_file_new"
},
{
    "keys": ["alt+v"],
    "command": "sublime_tmpl",
    "args":
    {
        "type": "vue"
    }
},
{
    "keys": ["alt+t"],
    "command": "open_terminal_project_folder"

},
{
    "keys": ["ctrl+b"]
}]