推荐给 Web Developer 的 Sublime Text 3 插件

06-27 02:33:44   来源: 佚名    评论: 点击:

Must Have Sublime Text 3 Packages 2014 02 17 vinta Codin

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

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

Find usages

建議改成 Control + F

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)

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

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

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

Find usages

建議改成 Control + F

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

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

在 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 的功能

$ 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

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

ref:

http://ternjs.net/doc/manual.html

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"]}]

Related

相关热词搜索:

上一篇:Phone Companion应用上手体验 下一篇:一种新的 Activity 转换动画实现方式
分享到: 收藏
频道总排行
频道本月排行
站点推荐