推薦給Web開發者的 Sublime Text 3 插件

jopen 9年前發布 | 73K 次閱讀 Sublime Text

推薦給 Web Developer 的 Sublime Text 3 插件

Must Have Sublime Text 3 Packages

/ vinta /Coding / Leave a Reply

(X) 表示棄用

All Autocomplete

link: https://github.com/alienhard/SublimeAllAutocomplete

Extend Sublime autocompletion to find matches in all open files of the current window

Anaconda (X)

link: https://github.com/DamnWidget/anaconda

Turning your Sublime Text 3 into a full featured Python IDE

Control + Option + G (or CONTROL + 左鍵)

Go to definition

建議改成 Control + G

</div>

Control + Option + F (or OPTION + 左鍵)

Find usages

建議改成 Control + F

</div>

Preferences > Key Bindings - User

[
    {"command": "anaconda_doc", "keys": ["ctrl+h"]},
    {"command": "anaconda_goto", "keys": ["ctrl+g"]},
    {"command": "anaconda_find_usages", "keys": ["ctrl+f"]},
    ...
]
[
    {"modifiers": ["ctrl"], "button": "button1", "command": "anaconda_goto", "press_command": "drag_select"},
    {"modifiers": ["alt"], "button": "button1", "command": "anaconda_find_usages", "press_command": "drag_select"}
]

in YOUR_PROJECT.sublime-project

{
    "folders":
    [
        {
            "follow_symlinks": true,
            "path": "/Users/vinta/Projects/streetvoice"
        }
    ],
    "settings":
    {
        "extra_paths":
        [
            "/Users/vinta/Dropbox/Developments/virtualenv_streetvoice"
        ]
    }
}

AngularJS

link: https://github.com/angular-ui/AngularJS-sublime-package

AngularJS code completion, snippets, go to definition, quick panel search

Preferences > Package Settings > SublimeLinter > Settings - User

{
    "auto_complete_triggers":
    [
        {
            "characters": "<",
            "selector": "text.html"
        },
        {
            "characters": "ng-controller=\"*",
            "selector": "punctuation.definition.string"
        }
    ]
}

Ansible

link: https://github.com/clifford-github/sublime-ansible

Syntax highlighting for Ansible

ApplySyntax

link: https://github.com/facelessuser/ApplySyntax

Applying syntax by custom rules

Preferences > Package Settings > ApplySyntax > Settings - User

{
    "reraise_exceptions": false,
    "new_file_syntax": false,
    "syntaxes": [
        {
            "name": "Djaneiro/Syntaxes/HTML (Django)",
            "match": "all",
            "rules": [
                {"file_name": ".*\\.(html|htm)$"},
                {"first_line": "{%"}
            ]
        },
        {
            "name": "Djaneiro/Syntaxes/Python Django",
            "match": "all",
            "rules": [
                {"file_name": ".*\\.py$"},
                {"contains": "from django"}
            ]
        },
        {
            "name": "Djaneiro/Syntaxes/Python Django",
            "rules": [
                {"file_name": ".*(\\\\|/)local_settings.py$"},
                {"file_name": ".*(\\\\|/)settings.py$"}
            ]
        },
        {
            "name": "Python/Python",
            "rules": [
                {"file_name": ".*\\.py$"}
            ]
        }
    ]
}

AutoFileName (X)

link: https://github.com/BoundInCode/AutoFileName

改用 FuzzyFilePath

AutoPEP8

link: https://github.com/wistful/SublimeAutoPEP8

Automatically formats Python code to conform to the PEP 8

Better Completion (X)

link: https://github.com/Pleasurazy/Sublime-Better-Completion

其實是 snippets 而不是 autocomplete

Better JavaScript (X)

link: http://int3h.github.io/sublime-better-javascript/

Improving JS symbol navigation

改用 JavaScript Next

BigComment

link: https://github.com/manse/BigComment

Generate ascii-art comment to display text on Minimap

$ cd "/Users/vinta/Library/Application Support/Sublime Text 3/Packages"
$ git clone [email protected]

:manse/BigComment.git

Command + Option + C當然你要開啟 Minimap 才會有效果

BracketHighlighter

link: https://github.com/facelessuser/BracketHighlighter/

自動高亮成對的括號和引號

Preferences > Package Settings > Bracket Highlighter > Bracket Settings - User

// Angle
{
    "name": "angle",
    "open": "(<)(?!\\?)",
    "close": "(?<!\\?)(>)",
    "style": "angle",
    "scope_exclude": ["string", "comment", "keyword.operator", "source.ruby.rails.embedded.html", "source.ruby.embedded.html"],
    "language_filter": "whitelist",
    "language_list": ["HTML", "HTML 5", "XML", "PHP", "HTML (Django)", "HTML (Rails)", "HTML (Jinja Templates)", "HTML (Twig)", "HTML+CFML", "ColdFusion", "ColdFusionCFC", "laravel-blade", "Handlebars", "AngularJS"],
    "plugin_library": "bh_modules.tags",
    "enabled": true
},
// Determine which style of tag-matching to use in which syntax
"tag_mode": {
    "xhtml": ["XML"],
    "html": ["HTML", "HTML 5", "PHP", "HTML (Django)", "HTML (Jinja Templates)", "HTML (Rails)", "HTML (Twig)", "laravel-blade", "Handlebars", "AngularJS"],
    "cfml": ["HTML+CFML", "ColdFusion", "ColdFusionCFC"]
}

BufferScroll (X)

link: https://github.com/SublimeText/BufferScroll

Remember, restore and sync scroll, bookmarks, marks, folds and cursors

Case Conversion (X)

link: https://github.com/jdc0589/CaseConversion

切換變數命名風格

Control + Option + C > Control + Option + S 全小寫下劃線分隔 (ex: read_file)

Control + Option + C > Control + Option + P 首字母大寫 (ex: HighHeels)

Control + Option + C > Control + Option + C 駝峰式命名,首字母小寫 (ex: doSomethingCool)

</div>

ColorPicker (X)

link: https://github.com/weslly/ColorPicker

Command + Shift + C

Color Highlighter (X)

link: https://github.com/Monnoroch/ColorHighlighter

把游標移進去之後,會自動把 #FFFFFF 之類的字串變成對應的顏色

Color Scheme - Behave

link: https://github.com/fnky/behave-theme

CSS Completions (X)

link: https://github.com/daneden/sublime-css-completions

適用 .css / .scss裝了 Sass 其實就不需要這個了

DashDoc

link: https://github.com/Kapeli/DashDoc

Control + D用游標所在字詞搜尋 Dash

in Dash: Preferences > General > Global search shorcut -- Shift + Din System Preferences: Keyboard > Shortcuts > Services > Searching > Look Up in Dash -- Control + D

Preferences > Key Bindings - User

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

Djaneiro

link: https://github.com/squ1b3r/Djaneiro

請愛用 Control + 空白鍵

Dotfiles Syntax Highlighting

link: https://github.com/mattbanks/dotfiles-syntax-highlighting-st2

Bring ShellScript (Bash) syntax highlighting to dotfiles

EncodingHelper (X)

link: https://github.com/SublimeText/EncodingHelper

Guess encoding of files, show in status bar, convert to UTF-8 from a variete of encodings

Expand Region

link: https://github.com/aronwoost/sublime-expand-region

加強版的 Expand Selection to Scope

Find++ (X)

link: https://github.com/twolfson/FindPlusPlus

Find in current folder, Find in open files...

FuzzyFilePath (X)

link: https://github.com/sagold/FuzzyFilePath

似乎只會搜尋 .sublime-project 內的第一個 project 目錄底下的檔案

Preferences > Package Settings > FuzzyFilePath > Settings - User

{
    "extensionsToSuggest": ["html", "js", "css", "gif", "jpg", "png", "eot", "svg", "ttf", "woff", "otf", "json"],
    "exclude_folders": [
        "docker",
        "locale",
        "media",
        "node_modules",
        "salt",
        "tmp"
    ],
    "auto_trigger": true,
    "scopes": [
        {
            // python
            "scope": "source\\.python.*string",
            "auto": false,
            "extensions": ["html"],
            "insertExtension": true,
            "relative": false,
            "replace_on_insert": [
                ["^/\\w+/templates/", ""],
                ["^/svapps/\\w+/templates/", ""],
                ["^/templates/", ""],
            ]
        },
        {
            // html
            "scope": "text\\.html.*string",
            "auto": false,
            "extensions": ["js", "css", "png", "jpg"],
            "insertExtension": true,
            "relative": false,
            "replace_on_insert": [
                ["/static/(.*)", "{% static '\\1' %}"]
            ]
        },
        {
            // JS AMD
            "scope": "require.*string",
            "auto": true,
            "extensions": ["js"],
            "insertExtension": false,
            "relative": true,
            "replace_on_insert": [
                // in case bower_components are resolved absolute
                ["^[\\.\\./]*/bower_components/", ""],
                // nodejs will load index.js by default, remove
                ["/index$", ""]
            ]
        },
        {
            // js
            "scope": "\\.js\\s",
            "auto": false,
            "extensions": ["js", "json"],
            "insertExtension": true
        },
        {
            // json
            "scope": "source\\.json.*string",
            "auto": false,
            "extensions": ["*"],
            "insertExtension": true,
            "relative": true
        },
        {
            // css
            "scope": "source\\.css.*meta\\.property",
            "auto": false,
            "extensions": ["png", "jpg", "gif", "eot", "svg", "ttf", "woff", "otf"],
            "insertExtension": true,
            "relative": true
        },
        {
            // default, for all scopes
            "scope": ".",
            "auto": false,
            "extensions": ["*"],
            "insertExtension": true
        }
    ]
}

Preferences > Key Bindings - User

[
    {"command": "insert_path", "keys": ["ctrl+t"], "args": {"type": "absolute"}},
    ...
]

Generic Config

link: https://github.com/skozlovf/Sublime-GenericConfig

Generic highlighting of the configuration files

Git

link: https://github.com/kemayo/sublime-text-git

Preferences > Package Settings > Git > Settings - User

{
    "diff_panel": true,
    "statusbar_branch": true,
    "statusbar_status": false
}

GitGutter-Edge (X)

link: https://github.com/jisaacks/GitGutter

Preferences > Package Settings > GitGutter > Settings - User

{
  "live_mode": true,
  "focus_change_mode": false,
  "non_blocking": false,
  "debounce_delay": 1000,
  "show_status": "none"
}

改用 Modific

GitHubinator

link: https://github.com/ehamiter/ST2-GitHubinator

可以在右鍵選單直接開啟檔案在 GitHub 上的 Code / History / Blame 頁面

GitSavvy

link: https://github.com/divmain/GitSavvy/

Full git and GitHub integration

Godef

link: https://github.com/buaazp/Godef

比 GoSublime 的 goto definition 還準確

$ go get -u github.com/rogpeppe/godef

Google Search

link: https://github.com/nwjlyons/google-search

Search Google for the currently selected text

Google Spell Check (X)

link: https://github.com/noahcoad/google-spell-check

Control + Option + P(or 右鍵選單)

Spell check

建議改成 Control + S

</div>

[
    {"command": "google_spell_check", "keys": ["ctrl+s"]},
    ...
]

改用 KeybardSpellCheck

GoSublime

link: https://github.com/DisposaBoy/GoSublime

$ go get -u github.com/nsf/gocode

HTML5

link: https://github.com/mrmartineau/HTML5

HTMLAttributes (X)

link: https://github.com/agibsonsw/HTMLAttributes

you may need to press Control + Space to display the completions within an opening HTML-tag

HTML Extended (X)

link: https://github.com/orizens/html-extended

HTML-CSS-JS Prettify

link: https://github.com/victorporof/Sublime-HTMLPrettify

Command + Shift + H(or 右鍵選單)

INI (X)

link: https://github.com/clintberry/sublime-text-2-ini

Syntax highlighting for .ini file

Java Script Completions

link: https://sublime.wbond.net/packages/JavaScript%20Completions

JavaScript Next

link: https://github.com/Benvie/JavaScriptNext.tmLanguage

Better JavaScript language definition

Jedi

link: https://github.com/srusskih/SublimeJEDI

Awesome Python autocompletion with SublimeText 3

Control + Option + G (or CONTROL + 左鍵)

Go to definition

建議改成 Control + G

</div>

Control + Option + F (or OPTION + 左鍵)

Find usages

建議改成 Control + F

</div>

Preferences > Key Bindings - User

[
    {"command": "sublime_jedi_find_usages", "keys": ["ctrl+f"], "context": [{"key": "selector", "operator": "equal", "operand": "source.python - string - comment"}]},
    {"command": "sublime_jedi_goto", "keys": ["ctrl+g"], "context": [{"key": "selector", "operator": "equal", "operand": "source.python - string - comment"}]}
]
[
    {"command": "sublime_jedi_goto", "modifiers": ["ctrl"], "button": "button1", "press_command": "drag_select"},
    {"command": "sublime_jedi_find_usages", "modifiers": ["alt"], "button": "button1", "press_command": "drag_select"}
]

in YOUR_PROJECT.sublime-project

{
    "folders":
    [
        {
            "path": "/Users/vinta/Projects/codebaku-web"
        },
        {
            "path": "/Users/vinta/Projects/codebaku-hubot"
        }
    ],
    "settings":
    {
        "python_interpreter": "/Users/vinta/.pyenv/versions/3.4.3/bin/python3.4",
        "python_package_paths":
        [
            "/Users/vinta/Dropbox/Developments/virtualenv_codebaku/dist-packages"
        ]
    }
}

jQuery

link: https://github.com/SublimeText/jQuery

Snippets for jQuery

KeybardSpellCheck

link: https://github.com/jlknuth/KeyboardSpellCheck

Control + Alt + K拼字檢查

Keymaps

link: https://github.com/MiroHibler/sublime-keymaps

Control + Option + ?開啟快速鍵列表

LineJumper

link: https://github.com/hypebeast/LineJumper

Move your cursor and select 10 lines at a time.

Fn + 方向鍵游標移動 1 頁

Option + 方向鍵游標移動 n 行

Preferences > Key Bindings - User

[
    {"command": "line_jumper", "keys": ["alt+up"], "args": {"number_of_lines": 5, "cmd": "up"}},
    {"command": "line_jumper", "keys": ["alt+down"], "args": {"number_of_lines": 5, "cmd": "down"}},
    ...
]

Markdown Extended

link: https://github.com/jonschlinkert/sublime-markdown-extended

Supporting GitHub Flavored Markdown

Modific

link: https://github.com/gornostal/Modific

Highlight lines changed since the last commit

Open URL (X)

link: https://github.com/noahcoad/open-url

Control + U(or 在 URL 上按右鍵)在瀏覽器開啟游標所在的 URL

Pretty JSON

link: https://github.com/dzhibas/SublimePrettyJson

Formating JSON

$ brew install jq

Preferences > Package Settings > Pretty JSON > Settings - User

{
    "indent": 4
}

PyCover

link: https://github.com/vinta/PyCover

Showing coverage infomation in Sublime Text

Pylinter

link: https://github.com/biermeester/Pylinter

a list of error codes

http://docs.pylint.org/features.html </div>

Python Improved

link: https://github.com/MattDMo/PythonImproved

A better Python .tmLanguage definition

requirementstxt

link: https://github.com/wuub/requirementstxt

Syntax highlighting for requirements.txt

SaltStack-related syntax highlighting and snippets

link: https://github.com/saltstack/sublime-text

Syntax highlighting and snippets for SaltStack

Sass (X)

link: https://github.com/nathos/sass-textmate-bundle

Sass support.

Schemr & Themr (X)

link:

https://github.com/benweier/Schemr

https://github.com/benweier/Themr </div>

在 Command Palette 快速切換 color scheme 和 theme

Select Quoted

link: https://github.com/int3h/SublimeSelectQuoted

Command + "選擇 "" 或 '' 內的文字

Command + (選擇 () 的文字

Preferences > Key Bindings - User

[
    {"command": "expand_selection", "args": {"to": "brackets"}, "keys": ["super+9"]},
    ...
]

SideBarEnhancements

link: https://github.com/titoBouzout/SideBarEnhancements

Sublimall

link: https://github.com/vinta/sublimall-server

Synchronize your Sublime Text preferences and packages configurations

原作者已經停止開發了

不過我 fork 了一個版本

加上 deploy 到 Heroku 的功能

</div>

$ brew install p7zip

Preferences > Package Settings > Sublimall > Settings - User

{
    "email": "[email protected]

", "api_key": "YOUR_API_KEY", "7za_path": "/usr/local/bin/7za" }

sublime-github (X)

link: https://github.com/bgreenlee/sublime-github

SublimeLinter

link:

https://github.com/SublimeLinter/SublimeLinter3

https://github.com/SublimeLinter/SublimeLinter-annotations

https://github.com/attenzione/SublimeLinter-scss-lint

https://github.com/SublimeLinter/SublimeLinter-csslint

https://github.com/SublimeLinter/SublimeLinter-flake8

https://github.com/SublimeLinter/SublimeLinter-jshint

https://github.com/SublimeLinter/SublimeLinter-json

https://github.com/SublimeLinter/SublimeLinter-pep8

https://github.com/SublimeLinter/SublimeLinter-pylint

https://github.com/SublimeLinter/SublimeLinter-xmllint </div>

各語言的 coding style 和 syntax 檢查SublimeLinter 3 並不包含 linter,要自己用 Package Control 安裝

$ brew install libxml2
$ gem install scss-lint
$ npm install jshint -g
$ npm install csslint -g
$ pip install flake8 pep8-naming pylint

Preferences > Package Settings > SublimeLinter > Settings - User

{
    "user": {
        "debug": false,
        "delay": 0.25,
        "error_color": "D02000",
        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
        "gutter_theme_excludes": [],
        "lint_mode": "background",
        "linters": {
            "annotations": {
                "@disable": false,
                "args": [],
                "errors": [
                    "FIXME",
                    "TEST"
                ],
                "excludes": [],
                "warnings": [
                    "TODO",
                    "README"
                ]
            },
            "flake8": {
                "@disable": false,
                "args": [],
                "builtins": "",
                "excludes": [],
                "ignore": "E501",
                "jobs": "1",
                "max-complexity": -1,
                "max-line-length": 79,
                "select": ""
            },
            "jshint": {
                "@disable": false,
                "args": [],
                "excludes": []
            },
            "json": {
                "@disable": false,
                "args": [],
                "excludes": [],
                "strict": true
            },
            "pep8": {
                "@disable": true,
                "args": [],
                "excludes": [],
                "ignore": "E501",
                "max-line-length": null,
                "select": "E226,E241,E242"
            },
            "pylint": {
                "@disable": true,
                "args": [],
                "disable": "C0111,C1001,C0301,E1002,E1101,F0401,R0201,R0903,R0904,R0914,W0611,W0232,W0613",
                "enable": "",
                "excludes": [],
                "paths": [],
                "rcfile": "",
                "show-codes": false
            }
        },
        "mark_style": "fill",
        "no_column_highlights_line": true,
        "paths": {
            "linux": [],
            "osx": [
                "/Users/vinta/.pyenv/versions/2.7.9/bin"
            ],
            "windows": []
        },
        "python_paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "rc_search_limit": 3,
        "shell_timeout": 10,
        "show_errors_on_save": false,
        "show_marks_in_minimap": false,
        "syntax_map": {
            "html (django)": "html",
            "html (rails)": "html",
            "html 5": "html",
            "php": "html",
            "python django": "python",
            "pythonimproved": "python"
        },
        "warning_color": "DDB700",
        "wrap_find": true
    }
}

tern_for_sublime

link: https://github.com/marijnh/tern_for_sublime

Handling autocompletion for JavaScript by tern.js

$ cd "/Users/vinta/Library/Application Support/Sublime Text 3/Packages/"
$ git clone git://github.com/marijnh/tern_for_sublime.git

$ cd tern_for_sublime $ npm install</pre>

Preferences > Settings - User

{
    "auto_complete": true,
    "auto_complete_triggers":
    [
        {
            "selector": "source.js",
            "characters": "."
        }
    ],
    ...
    "tern_argument_hints": true,
    "tern_arguments": [
         "--no-port-file"
    ],
    "tern_command":
    [
         "/Users/vinta/.nvm/v0.10.32/bin/node",
         "/Users/vinta/.nvm/v0.10.32/bin/tern"
    ],
    ...
}

in PROJECT_ROOT/.tern-project

{
    "libs": [
        "angular",
        "browser",
        "jquery"
    ]
}

OPTION + .Go to definition

ref:

http://ternjs.net/doc/manual.html </div>

Theme - Afterglow

link: https://github.com/YabataDesign/afterglow-theme

Theme - itg.flat

link: https://github.com/itsthatguy/theme-itg-flat

ToggleQuotes

link: https://github.com/spadgos/sublime-ToggleQuotes

建議改成 Control + '

WakaTime

link: https://wakatime.com/help/plugins/sublime

--

Preferences > Key Bindings - User

[
    // {"command": "anaconda_doc", "keys": ["ctrl+h"], "context": [{"key": "selector", "operator": "equal", "operand": "source.python"}]},
    // {"command": "anaconda_goto", "keys": ["ctrl+g"], "context": [{"key": "selector", "operator": "equal", "operand": "source.python"}]},
    // {"command": "anaconda_find_usages", "keys": ["ctrl+f"], "context": [{"key": "selector", "operator": "equal", "operand": "source.python"}]},
    {"command": "dash_doc", "keys": ["ctrl+d"]},
    {"command": "expand_selection", "keys": ["alt+0"], "args": {"to": "brackets"}},
    {"command": "expand_selection", "keys": ["alt+."], "args": {"to": "tag"}},
    {"command": "find_under_expand", "keys": ["super+d"]},
    {"command": "godef", "keys": ["ctrl+g"], "context": [{"key": "selector", "operator": "equal", "operand": "source.go"}]},
    {"command": "google_search", "keys": ["ctrl+q"]},
    {"command": "gs_doc", "keys": ["ctrl+h"], "args": {"mode": "hint"}, "context": [{"key": "selector", "operator": "equal", "operand": "source.go"}]},
    {"command": "gs_browse_declarations", "keys": ["ctrl+f"], "args": {"dir": "."}, "context": [{"key": "selector", "operator": "equal", "operand": "source.go"}]},
    {"command": "gs_inline_diff", "keys": ["ctrl+c"]},
    {"command": "gs_show_status", "keys": ["ctrl+s"]},
    {"command": "jump_back", "keys": ["alt+s"]},
    {"command": "jump_forward", "keys": ["alt+w"]},
    {"command": "line_jumper", "keys": ["alt+up"], "args": {"number_of_lines": 5, "cmd": "up"}},
    {"command": "line_jumper", "keys": ["alt+down"], "args": {"number_of_lines": 5, "cmd": "down"}},
    {"command": "line_jumper", "keys": ["alt+shift+up"], "args": {"number_of_lines": 5, "cmd": "up_select"}},
    {"command": "line_jumper", "keys": ["alt+shift+down"], "args": {"number_of_lines": 5, "cmd": "down_select"}},
    {"command": "open_dir", "keys": ["alt+f"], "args": {"dir": "$file_path", "file": "$file_name"}},
    {"command": "open_file", "keys": ["super+alt+k"], "args":{"file": "${packages}/User/Default (OSX).sublime-keymap", "platform": "OSX"}},
    {"command": "reveal_in_side_bar", "keys": ["alt+r"]},
    {"command": "select_quoted", "keys": ["alt+'"]},
    {"command": "show_overlay", "keys": ["super+e"], "args": {"overlay": "goto", "text": ":"}},
    {"command": "show_overlay", "keys": ["super+t"], "args": {"overlay": "goto", "text": "#"}},
    {"command": "show_python_coverage", "keys": ["ctrl+x"]},
    {"command": "side_bar_project_open_file", "keys": ["super+alt+p"]},
    {"command": "sublime_jedi_find_usages", "keys": ["ctrl+f"], "context": [{"key": "selector", "operator": "equal", "operand": "source.python - string - comment"}]},
    {"command": "sublime_jedi_goto", "keys": ["ctrl+g"], "context": [{"key": "selector", "operator": "equal", "operand": "source.python - string - comment"}]},
    {"command": "spell_check", "keys": ["ctrl+t"]}
]
</div> </div> 原文 http://vinta.ws/code/must-have-sublime-text-packages.html

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!