Wstęp
Sublime Text 3 to świetny edytor tekstowy. Jest bardzo szybki, posiada świetne wsparcie dla Syntax oraz wiele świetnych funkcji w standardzie. Jednak każdy nowoczesny developer z całą pewnością będzie chciał rozszerzyć możliwości tego edytora dzięki dodatkowym rozszerzeniom. Poniżej przedstawię Wam jak zainstalować Packages Control, dzięki któremu zainstalujemy z łatwością dodatkowe wtyczki i skórki w bardzo prosty sposób. Pokażę Ci tez rozszerzenia, z których korzystam niemal każdego dnia w swojej pracy i być może niektóre z nich przydadzą się i Tobie.
Instalacja Packages Control
Z menu wybieramy View > Show Console i w konsolę wpisujemy poniższe polecenie i potwierdzamy ENTEREM.
import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
Od teraz cieszymy się Packages Control w naszym edytorze. Wystarczy że wciśniemy klawisze ⌘+SHIFT+P na macOS lub CTRL+SHIFT+P na Windows i wpiszemy polecenie:
Package Control: Install Package
i będziemy mogli odnaleźć i zainstalować motywy i wtyczki.
Ustawienia
{
"always_show_minimap_viewport": false,
"bold_folder_labels": true,
"color_inactive_tabs": true,
"color_scheme": "Packages/User/SublimeLinter/Afterglow-monokai (SL).tmTheme",
"detect_slow_plugins": false,
"file_exclude_patterns":
[
"*.pyc",
"*.pyo",
"*.exe",
"*.dll",
"*.obj",
"*.o",
"*.a",
"*.lib",
"*.so",
"*.dylib",
"*.ncb",
"*.sdf",
"*.suo",
"*.pdb",
"*.idb",
".DS_Store",
"*.class",
"*.psd",
"*.db",
"*.sublime-workspace"
],
"find_selected_text": true,
"folder_exclude_patterns":
[
"node_modules",
".svn",
".git",
".hg",
"CVS"
],
"font_face": "Monaco",
"font_options":
[
"gray_antialias",
"subpixel_antialias"
],
"font_size": 11,
"highlight_line": true,
"highlight_modified_tabs": true,
"ignored_packages":
[
"Vintage"
],
"indent_guide_options":
[
"draw_normal",
"draw_active"
],
"margin": 2,
"match_brackets": true,
"match_brackets_angle": true,
"match_brackets_braces": true,
"match_brackets_content": true,
"match_brackets_square": true,
"open_files_in_new_window": false,
"overlay_scroll_bars": "enabled",
"scroll_past_end": true,
"show_full_path": true,
"spacegray_fileicons": true,
"spacegray_sidebar_font_large": true,
"spacegray_sidebar_tree_large": true,
"spacegray_tabs_auto_width": false,
"spacegray_tabs_font_large": true,
"spacegray_tabs_xlarge": true,
"status_bar_brighter": true,
"tab_size": 2,
"tabs_medium": true,
"theme": "Afterglow-blue.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"use_simple_full_screen": false,
"use_tab_stops": true,
"wide_caret": true,
"word_wrap": true
}
Uwaga !! Ustawienie fontów na "gray_antialias" jest wskazane tylko dla wyświetlaczy retina. Nie zaleca się używać ich na wyświetlaczach z normalnym/standardowym DPi.
BracketHighlighter
Bracket Highlighter pomaga nam zaznaczyć otwierający i zamykający znacznik jak np: [], (), {}, "", '', <tag></tag>, a nawet własne tagi. Plugin bardzo przydatny i posiada sporo ustawień.
https://packagecontrol.io/packages/BracketHighlighter
Moje ustawienia:
{
"bracket_styles": {
// This particular style is used to highlight
// unmatched bracket pairs. It is a special
// style.
"unmatched": {
"icon": "question",
"color": "brackethighlighter.unmatched",
"style": "highlight"
},
// User defined region styles
"curly": {
"icon": "curly_bracket",
"color": "brackethighlighter.curly",
"style": "highlight"
},
"round": {
"icon": "round_bracket",
"color": "brackethighlighter.round",
"style": "thin_underline"
},
"square": {
"icon": "square_bracket",
"color": "brackethighlighter.square",
"style": "thin_underline"
},
"angle": {
"icon": "angle_bracket",
"color": "brackethighlighter.angle",
"style": "thin_underline"
},
"tag": {
"icon": "tag",
"color": "brackethighlighter.tag",
"style": "thin_underline"
},
"single_quote": {
"icon": "single_quote",
"color": "brackethighlighter.quote",
"style": "thin_underline"
},
"double_quote": {
"icon": "double_quote",
"color": "brackethighlighter.quote",
"style": "thin_underline"
},
"regex": {
"icon": "regex",
"color": "brackethighlighter.quote",
"style": "thin_underline"
}
}
}
Minify
Minify dla Sublime Text potrafi zminifikować pliki typu CSS, HTML, JavaScript, JSON lub nawet SVG. Jest możliwość minifikowania plików podczas zapisywania pliku źródłowego w którym wprowadzamy zmiany.
https://packagecontrol.io/packages/Minify
{
"cssminifier": "cleancss",
"cleancss_command": "/usr/local/bin/cleancss",
"cleancss_options": "-s --s0 --skip-rebase --inline none",
"open_file": false,
"auto_minify_on_save": true,
"allowed_file_types": [
"css",
"js"
]
}
ColorHelper
ColorHelper to wtyczka wyświetlająca nam miniaturki podglądu koloru jakiego używamy w plikach CSS. Plugin niezwykle przydatny i pozwala nam tworzyć np palety kolorów dla projektu i korzystać z systemowej palety kolorów.
https://packagecontrol.io/packages/ColorHelper
Moje ustawienia pluginu:
{
"auto_popup": false,
"click_color_box_to_pick": "color_picker",
"enable_global_user_palettes": false,
"enable_favorite_palette": false,
"enable_current_file_palette": false,
"enable_project_user_palettes": false,
"use_color_picker_package": true
}
Emmet dla Sublime Text
Emmet jest genialnym rozszerzeniem które pozwala tworzyć super szybko strukturę HTML lub CSS przy pomocy prostych skrótów i na końcu wciskając klawisz Tab.
https://packagecontrol.io/packages/Emmet
FTPSync
Prosty i darmowy klient FTP który może nam synchronizować pliki po ich zapisie.
Wystarczy stworzyć w katalogu projektu plik konfiguracyjny ftpsync.settings i dodać ustawienia:
{
'primary': {
host: 'ftp.mywebsite.com',
username: 'johnsmith',
password: 'secretpassword',
path: '/www/',
upload_on_save: true,
tls: true
}
}
https://packagecontrol.io/packages/FTPSync
Autoprefixer
Autoprefixer jest wtyczką, która dodaje nam wszystkie prefiksy dla twojego kodu CSS lub SCSS. Bardzo przydatne narzędzie jeżeli chcemy zadbać, by nasza strona była kompatybilna wstecznie.
https://packagecontrol.io/packages/Autoprefixer
HTML-CSS-JS Prettify
Ta prosta wtyczka pozwala nam za pomocą skrótu klawiszowego ⌘+SHIFT+H na macOS lub SHIFT+CTRL+H na Windows formatowac nasz dokument HTML lub CSS lub JS. Dzięki temu struktura Twojego dokumentu będzie wyglądała idealnie.
https://packagecontrol.io/packages/HTML-CSS-JS Prettify
A File Icon
Wtyczka dodająca ikony plików i katalogów na pasku bocznym w Sublime Text 3. Bardzo przydatne i ułatwiające pracę z projektami.
https://packagecontrol.io/packages/A File Icon
Afterglow Theme
Motyw graficzny którego używam na codzień to Afterglow który można pobrać z Github:
https://github.com/YabataDesign/afterglow-theme
Osobiście korzystam z niebieskiej wersji kolorystycznej i kilku modyfikacji.
{
"theme": "Afterglow-blue.sublime-theme",
"color_scheme": "Packages/Theme - Afterglow/Afterglow.tmTheme"
}
Ustawienia skórki:
"spacegray_fileicons": true,
"spacegray_sidebar_font_large": true,
"spacegray_sidebar_tree_large": true,
"spacegray_tabs_auto_width": false,
"spacegray_tabs_font_large": true,
"spacegray_tabs_xlarge": true,
"status_bar_brighter": true,
"tab_size": 2,
"tabs_medium": true,
"theme": "Afterglow-blue.sublime-theme",
"translate_tabs_to_spaces": true
Material Theme
Drugim świetnym motywem dla Sublime Text jest Material Theme. Bardzo ładny i świetnie dopracowany theme.
Theme posiada 4 wersje kolorystyczne i sporo ustawień.
Autor motywu zadbał o każdy szczegół. Konsola programu czy instalator są w pełni dostosowane do material.
Moje ustawienia skórki:
"theme": "Material-Theme-Darker.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
"material_theme_accent_graphite": true,
"material_theme_accent_scrollbars": true,
"material_theme_appbar_charcoal": true,
"material_theme_big_fileicons": true,
"material_theme_bullet_tree_indicator": true,
"material_theme_compact_panel": true,
"material_theme_contrast_mode": true,
"material_theme_panel_separator": true,
"material_theme_small_statusbar": true,
"material_theme_tree_headings": true,
Dodatkowo polecam zainstalowanie Material AppBar, który utworzy nam świetnie wyglądający pasek z kartami. Dodatkowo możemy ustawić kilka predefiniowanych kolorów.
Pozostałe pluginy
Oprócz powyżej opisanych pluginów podaję jeszcze listę kilku innych których używam lecz nie są one tak kluczowe jak te powyżej:
- All Autocomplete Sublime Text
- ColorPicker
- CSScomb for Sublime Text
- CSSLint
- Libraries from CDN
- Sass
- Scss
- Sidebar Enhancements
Ikona programu
Jako że ikona programu Sublime Text 3 jest troszkę mało nowoczesna i przestarzała fajnie jest podmienić ją na coś ładniejszego. Ja osobiście korzystam z takiej ikony:
Podsumowanie
Mam nadzieję, że ta nieduża kolekcja najlepszych moim zdaniem wtyczek do Sublime Text 3 pozwoli wam rozszerzyć duże możliwości tego edytora i ułatwi wam godziny pracy spędzonych z tym edytorem. A Wy z jakich korzystacie pluginów i motywów ? Podzielcie się z nami waszą listą w komentarzach pod artykułem.
