美文网首页
丰富 Sublime 编辑器

丰富 Sublime 编辑器

作者: 风之化身呀 | 来源:发表于2017-07-22 16:43 被阅读7次

    一、常用插件

    • 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": "yinchaofeng@sohu-inc.com",
            "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"]
    }]
    

    相关文章

      网友评论

          本文标题:丰富 Sublime 编辑器

          本文链接:https://www.haomeiwen.com/subject/toyukxtx.html