Porovnání editorů vhodných pro psaní CSS

Při hledání editoru vhodného pro psaní kaskádových stylů (CSS) je důležité, ale velmi obtížné stanovit si své požadavky a seřadit je dle důležitosti.

Porovnání vybraných vlastností CSS editorů
	WebStorm (PhpStorm)	Brackets	Netbeans	Visual Studio Code	atom.io	Geany	Komodo Edit	Eclipse + plugin Aptana Studio	Notepad	Espresso	Sublime Text	Bluefish	Coda	BBEdit	Fraise
platforma
použitá technologie	Java Virtual Machine	JavaScript	Java Virtual Machine	JavaScript / TypeScript	Electron (CoffeeScript, Javascript)
cena	1490 Kč (2490 Kč)	free	free	free	free	free	free	free	free	1684 Kč	free	free	99 $	40 $	free
IDE
české prostředí
Volba konce řádků (CRLF<->LF)		NewLine (2016)
Vzhled (denní/noční režim)					(Dark Mode – automaticky)
Rychlá editace (barvy / CSS v HTML atd.)	(Alt+Enter) / (Ctrl+Shift+I)	/(Ctrl+E)		/ CSS Peek (Alt+F12)	color-picker / ~~quck-editor~~
Hromadná editace	(Alt \| MiddleMouse)	(Alt)		(Alt)	(Ctrl)
Live Preview (file://) (živý náhled / interakce / bez ukládání / DevTools)	LiveEdit	/// - pouze Chrome - ruční aktualizace DevTools (console)		Live HTML Previewer \| vscode-refresh-html	browser-plus \| livereload \| preview
Live server (http://, https://) (živý server / interakce / bez ukládání / DevTools)	/?/?/ (Debug)			/// Live Server	/// atom-live-server + preview-plus (bez ukládání?)
Synchronizace změn JavaScript kódu vs Terminál (inline / external) – Debug	/?			/
Automatická cesta k souborům					autocomplete project paths \| ~~autocomplete paths~~
Emmet (Emmet / interaktivní nápověda)	/	/		/	/
Doplňování JavaScript syntaxe v HTML
Náhled souboru (bez nutnosti jeho otevření pro editaci)
Větší projekty (nad 30.000 souborů, obsahující např. adresáře node_modules atd.)		Brackets Exclude Indexing FileTree
Vestavěný terminál		Brackets Shell \| Open project in terminal \| Console Plus			platformio-ide-terminal
Vagrantfile/Dockerfile (zvýraznění syntaxe)		/		Vagrant/	/
Náhled .md souboru		Brackets Markdown Preview		Markdown Preview...	(Ctrl+Shift+M)
Editace .md souboru		Markdown Toolbar			tool-bar-markdown-writer
navigátor + víceúrovňová struktura dokumentu	BluePrint Beta	včetně luxusní filtrace										¹⁾
výběr selektoru, vlastnosti, hodnoty								(Ctrl+ mezera)		(ESC)
zkrácený zápis (mb8 ~ margin-bottom: 8px mb2e ~ margin-bottom: 2em)		Emmet
vizuální zobrazení barev
doplňování :/;	/	/Emmet	/	/Emmet	/		/	/	/	/	/	/
HTML5 <main>
inteligentní nový řádek (<body>Enter<main>Enter)									(Cmd + Enter)
(shift) Tab odsazování													Tabster ²⁾
komentáře zkratka/tlačítko
pseudoatributy
snippets (clips)
filtr použitých CSS vlastností
porovnání souborů								³⁾		diff.sugar
uvozovky u atributů
FTP, SFTP, FTP+SSL		FTP-Sync Plus		ftp-sync				Target Management (RSE)		a Amazon S3			+ WebDAV
podpora Drupal	(splupráce s Drupal komunitou)
EJS				.ejs
zvýrazňovač syntaxe YAML/TWIG	/ ⁴⁾	/	/	/Twig	/		/	/	/		/	/
podpora SCSS
podpora objektového PHP
podpora GIT		Brackets Git						EGit		HTMLBundle.sugar			GitX, Gity
terminál (SSH přístup)
Zalomení/80 znaků info		/ Guidelines		/
ToDo		ToDo		vscode-todo (+ TODO Highlight)
		White Space Sanitizer
Validace (HTML/CSS/JS)		Interactive Linter		HTMLHint//
Minify (HTML/CSS/JS)		Brackets File Format \| Minifier (neumí HTML)
		SVG Preview
poznámky	komplexní a "svižné" vývojové prostředí (PHPStorm obsahuje veškerou funkčnost WebStorm a navíc podporu PHP a databází)	více informací viz Brackets	pomalý	VSCodium (VSCode bez telemetrie) Can I Use, Beautify, js-beautify, Drawio Markdown				"líné" prostředí, náročné na HW			doporučováno vývojáří pro jeho rozšiřitelnost		plugins, tips

¹⁾ – použítím vykřičníku na začátku názvu komentáře se z komentáře stává záložka v navigátoru např. /* !header */u CSS, u (X)HTML, // !headeru PHP atd.

²⁾ – v Předvolbách systému, Univerzální přístup, Zrak je třeba Zapnout přístup pro asistenční zařízení

³⁾ – označit požadované soubory a v kontextové nabídce zvolit Compare With

⁴⁾ – Inteligentní zvýrazňování syntaxe zvládající i vnoření různých typů včetně nápovědy (např. při psaní PHP obsahující HTML řetězec obsahující CSS nabídne editor tooltip nápovědu k CSS parametrům)

Editory dle mého názoru nevhodné pro psaní CSS: TextWrangler, TextMate, Arachnophilia, JEdit, skEdit, Smultron, SubEthaEdit, Taco, Style master, ICEcoder, Geany, Kompozer, Amaya, Emacs, Nodepad++.

phpStorm:

jetbrains.com/phpstorm/help/configuring-menus-and-toolbars.html
drupal.org/node/1962108 - Setting up PhpStorm for Drupal's Coding Standards
- confluence.jetbrains.com/display/PhpStorm/Drupal+Development+using+PhpStorm#DrupalDevelopmentusingPhpStorm-CoderandPHPCodeSnifferIntegration
- lullabot.com/blog/article/configuring-xdebug-osx-mountain-lion
confluence.jetbrains.com/display/PhpStorm/Drupal+Development+using+PhpStorm
jetbrains.com/phpstorm/help/preparing-for-drupal-development-in-phpstorm.html
sitepoint.com/phpstorm-top-productivity-hacks-shortcuts/

Příloha	Velikost
Espresso - klávesové zkratky	1.17 MB

Pro psaní komentářů se přihlašte
2485x přečteno

Tomáš Daněk

Porovnání editorů vhodných pro psaní CSS

Příbuzný obsah