PhpStorm > CSV-Darstellung > CSV in HTML umwandeln

Da ich in letzter Zeit immer mal wieder mit CSV-Dateien herumhantierten musste und es mich immer gestört hat, dass dieses Format so schlecht zu lesen ist, habe ich mir ein kleines PHP-Skript geschrieben das dieses Problem löst:

$read = fopen($argv[1], 'r');
$separator = empty($argv[2])?';':$argv[2];
$tmpPath = sys_get_temp_dir().'/csv2.html';
$write = fopen($tmpPath, 'w');
fwrite($write, '<html><head><title>csv2html result</title></head><body><table><thead><tr>');
$row = fgetcsv($read, 2048, $separator);
foreach($row as $key => $value)
{
	fwrite($write, '<th>'.$value.'</th>');
}
fwrite($write, '</tr></thead><tbody>');
while(($row = fgetcsv($read, 2048, $separator)) !== false)
{
	fwrite($write, '<tr>');
	foreach($row as $key => $value)
	{
		fwrite($write, '<td>'.$value.'</td>');
	}
	fwrite($write, '</tr>');
}
fwrite($write, '</tbody></table></body></html>');
fclose($read);
fclose($write);
 
switch(true)
{
	case stristr(PHP_OS, 'DAR'): exec('/usr/bin/open -a "/Applications/Google Chrome.app" \'file:///'.$tmpPath.'\''); break;
	case stristr(PHP_OS, 'WIN'): exec('start "" "file:///'.$tmpPath.'"'); break;
	case stristr(PHP_OS, 'LINUX'): exec('x-www-browser "file:///'.$tmpPath.'"'); break;
	default: echo 'Cannot open html file: Unknown OS.';
}

Dieses Skript wandelt die angegebene CSV-Datei in HTML um und öffnet das HTML-Dokument anschließend im Chrome.
Jetzt habe ich natürlich keine Lust das Skript jedes mal über die Konsole aufzurufen. Deshalb habe ich den Skript-Aufruf in meine Entwicklungsumgebung PhpStorm integriert (siehe Bild: Preferences -> External Tools):

PhpStorm Einstellungen csv2html

Danach lässt sich das Skript über das Datei-Kontextmenü von PhpStorm aufrufen (siehe Bild). Wenn man dann eine CSV-Datei auswählt, öffnet sich im Chrome eine HTML-Ansicht der CSV-Daten.

external-tools-csv2html

Hinweis: Man kann dem Skript als zweiten Parameter auch den Separator übergeben. Falls jemand also nicht mit dem hier definierten Standard-Separator arbeitet (Semikolon), muss der Skript-Aufruf entsprechend erweitert werden.

Tools für Entwickler – 3 Jahre später

Vor 3 Jahren schrieb ich einen Artikel darüber, mit welchen Werkzeugen ich als Entwickler arbeite. Heute schreibe ich ein zweites Mal darüber und vergleiche dabei die Werkzeuge von vor 3 Jahren mit denen von heute. Was hat sich geändert, was für Werkzeuge sind dazugekommen und welche verwende ich gar nicht mehr?

» Weiterlesen

SASS unter PhpStorm kompilieren

SASS (Syntactically Awesome Stylesheets) bzw. SCSS ist eine Art Scriptsprache für normales CSS. Es ermöglich es CSS sauberer, übersichtlicher und einfacher zu gestalten. Und so funktioniert’s: Zuerst benötigt ihr Ruby und den eigentlichen Compiler für SASS. Der Compiler ist in Ruby geschrieben und damit plattformunabhängig. Dann könnt ihr loslegen und euren CSS-Code mit den neuen Features umsetzten, speichert die Datei aber mit der Endung .scss ab. Anschließend wird der Compiler aufgerufen, der aus dem SASS-Code in normales und ggf. auch komprimiertes CSS umwandelt. Der Aufruf des Compilers passiert über den folgenden Konsolenbefehl:

sass --watch "/Pfad/zur/SASS/Datei.scss":"/Zielpfad/zur/CSS/Datei.css" --style compressed

Mit der Option –watch wird die CSS-Datei jedesmal aktualisiert, sobald die SCSS-Datei geändert wurde. Ein weiterer Aufruf ist also nicht notwendig. Trotzdem wäre es nett, wenn der Aufruf über durch einen Klick abgelöst werden könnte. Mit PhpStorm lässt sich das nach ein wenig Konfigurationsarbeit ganz einfach erledigen.

Als erstes müssen die Einstellungen (Settings bzw. Preferences unter Mac) von PhpStorm geöffnet werden. Anschließend auf den Bereich External Tools und ein neues Tool über den Add-Button anlegen.

Die Felder können wie folgt ausgefüllt werden.

Name: Compile SASS
Group: Language processors
Program (Linux/Mac): sass
Program (Windows): C:\path_to_ruby\bin\sass.bat
Parameters: –watch „$FilePath$“:“$FileDir$/../$FileNameWithoutExtension$.css“ –style compressed
Working directory: $ProjectFileDir$

Die Checkboxen für Open console und Synchronize files after execution könnt ihr nach eigenem Ermessen deaktivieren.

Jetzt bauen wir uns eine Verzeichnisstruktur, die so ähnlich aussieht:
/css/src/style.scss
/css/style.css
In den Ordner src kommen somit die SCSS-Dateien rein und in den übergeordneten Ordner werden die CSS-Dateien automatisch reingeschrieben.
Mit einem Rechtsklick auf die Datei und dann unter Language processors > Compile SASS wird dann der oben genannte Befehl ausgeführt.