blog.nayma.pl


Dla miłośników WordPress, WooCommerce, HTML5, CSS3 oraz JS.

Dariusz Nayma.pl
Autor Wpisu

Podziel się


Tagi


Sublime Text najlepsze wtyczki i ustawienia

Dariusz Nayma.plDariusz Nayma.pl

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.

Strona Material 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.

Pobierz Material Theme

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.

Pobierz Material AppBar

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:

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:

Pobierz Ikonę

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.

Komentarze