Suche
Adieu, Handarbeit!

Prettier 1.0: Keine Zeit mehr beim Formatieren von Code verlieren

Gabriela Motroc

© Shutterstock.com / PeterSnow

 

Prettier mag ja anfangs nur als Experiment gedacht gewesen sein, aber die Vorteile des automatischen Formatierens haben einige schließlich doch überzeugt, dem Tool eine Chance zu geben. Mit der gerade veröffentlichten Version 1.0 ist der JavaScript-Formatter produktionsfertig.

Die erste Version von Prettier wurde bereits im Jahr 2017 veröffentlicht, nun ist Version 1.0 des von refmt inspirierten JavaScript-Formatters erschienen. Laut dem Blog-Post der Entwickler liegen die Vorteile von Prettier in der besseren Unterstützung von ES2017, JSX und Flow. Kurz zusammengefasst eliminiert der Formatter das Urstyling und garantiert Konsistenz, indem der JavaScript-Code in einen Abstrakten Syntaxbaum (AST) geparst und anschließend einer Quelltextformatierung unterzogen wird.

James Long von Shift Reset LLC gibt hierfür ein Beispiel bei dem man sehen kann, dass Nutzer praktisch alles in den Editor eingeben können, dieser formatiert dies dann automatisch. Die maximale Zeichenanzahl pro Codezeile beträgt hierbei 60, oben ist die Rohfassung und unten das formatierte Endergebnis.

//                                           60 chars -->   |
function makeComponent() : int {
  return {
    longCall() {
      complicatedFunction(importantArgument(), secondaryArgument())
      weirdStyle({ prop: 1 },
        1, 2, 3);
    },
    render() {
      const user = {
        name: "James"
      };
	  return 
<div>
        hello ${name}! JSX is <strong>supported</strong>
      </div>

;
    }
  };
}

 

//                                           60 chars -->   |
function makeComponent(): int {
  return {
    longCall() {
      complicatedFunction(
        importantArgument(),
        secondaryArgument()
      );
      weirdStyle({ prop: 1 }, 1, 2, 3);
    },
    render() {
      const user = { name: "James" };
      return (
        
<div>
           hello ${name}! JSX is <strong>supported</strong>
        </div>

      );
    }
  };
}

Prettier 1.0: Das hat der JavaScript-Formatter im Gepäck

Wie oben bereits erwähnt ist Prettier seit Version 1.0 produktionsfertig. Der Code-Formatter für JavaScript sollte dogmatisch sein und eigentlich keine Vorkonfiguration wie gofmt oder refmt haben. Allerdings hat das Team schnell gemerkt, dass dies die Verbreitung von Prettier möglicherweise beeinträchtigen könnte: Diejenigen, die davon profitieren würden, würden Prettier nicht nutzen wollen, da es den Code nicht so formatierte, wie sie es gerne hätten.

Statt nun also gänzlich auf eine Vorkonfiguration zu verzichten, haben sie die eigene Interpretation des Wortes dogmatisch geändert und stellen nun verschiedene auswählbare grundlegende Aspekte der Syntax zur Verfügung, die nach der Art „wenn es nicht X tut, egal wie gut es ist, werde ich es nicht benutzen“ ausgelegt sind.

Allerdings werden auch zukünftig nicht für sämtliche Syntaxtypen Auswahlmöglichkeiten angeboten. Es wurden dennoch zwei wählbare Optionen ausgelobt, die in die oben genannte Kategorie fallen: Tabs vs. Spaces und Semi vs. No-Semi, daher wurden sie in Prettier integriert.

use-tabs:

// Before
if (1) {
··console.log(); // Two spaces
}

// After
if (1) {
» console.log(); // One Tab!
}

no-semi

// Before
console.log();
[1, 2, 3].map(x => x + 1);

// After
console.log()
;[1, 2, 3].map(x => x + 1)

Dinge ändern sich…

In seinem Blog-Post zum Release stellt James Long klar, dass es Fluch und Segen zugleich ist, den endgültigen Code nach der Quelltextformatierung auszugeben, da sämtliche Klammern innerhalb der Anwendung erneut ausgegeben werden müssen. Der Standpunkt der Entwickler war es immer, nur ein Minimum an Klammern auszugeben, die benötigt werden, damit das Programm am Ende auf die gleiche Art und Weise funktioniert und valide ist. Nun aber werden auch die Klammern ausgegeben, die vielleicht nicht unbedingt nötig sind, aber dabei helfen, den Code der Anwendung nachvollziehen zu können.

Es gibt offenbar ein paar wenige Fälle, in denen Prettier Code ausgibt, der Zeilen mit mehr als 80 Zeichen enthält, obwohl es die Möglichkeit gibt, das zu umgehen. Um dies zu fixen wird empfohlen, eine Stelle zu finden, an der sich ein Absatz einfügen lässt, ohne das es negativen Einfluss auf den Code hat.

Geschrieben von
Gabriela Motroc
Gabriela Motroc
Gabriela Motroc ist Online-Redakteurin für JAXenter.com. Vor S&S Media studierte Sie International Communication Management an der The Hague University of Applied Sciences.
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.