推荐给Web开发者的 Sublime Text 3 插件

(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

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

切換變數命名風格

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

[      {"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

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

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)

在 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

$ 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

各語言的 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

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

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