🌐 Sprache
prettier-plugin-classnames
Ein Prettier-Plugin, das ausführliche Klassennamen basierend auf der Option printWidth umbrechen kann.
Installation[^1]
npm install -D prettier prettier-plugin-classnames[^1]: Wenn Ihre Version von prettier-plugin-classnames kleiner als 0.4.0 ist, müssen Sie zusätzlich @prettier/sync installieren.
Konfiguration
JSON-Beispiel:
{
"plugins": ["prettier-plugin-classnames"]
}JS-Beispiel (CommonJS-Modul):
module.exports = {
plugins: ['prettier-plugin-classnames'],
customAttributes: ['myClassProp'],
customFunctions: ['clsx'],
};JS-Beispiel (ES-Modul):
export default {
plugins: ['prettier-plugin-classnames'],
endingPosition: 'absolute',
};Optionen
Benutzerdefinierte Attribute
Liste von Attributen, die umschließende Klassennamen enthalten.
Die Attribute class und className werden immer unterstützt, auch wenn keine Optionen angegeben sind.
Standard | CLI-Überschreibung | API-Überschreibung
--- | --- | ---
[] | --custom-attributes | customAttributes: ["
Benutzerdefinierte Funktionen
Liste von Funktionen, die umschließende Klassennamen enthalten.
Die Funktion classNames wird immer unterstützt, auch wenn keine Optionen angegeben sind.
Standard | CLI-Überschreibung | API-Überschreibung
--- | --- | ---
[] | --custom-functions | customFunctions: ["
Endposition
Erstmals verfügbar in v0.5.0.
absolute-with-indent wurde in v0.6.0 hinzugefügt.
absolute-with-indent wurde in v0.8.0 entfernt, aber Sie können die gleiche Ausgabe mit absolute erhalten.
Der Standardwert wurde in v0.8.0 von relative auf absolute geändert.
Dies ist das Kriterium für das Beenden des Klassennamens in jeder Zeile, wenn der ursprüngliche Klassenname durch einen mehrzeiligen Klassennamen ersetzt wird.
- Beispiel für
absolute:
--------------------------------------------------| printWidth=50
export function Callout({ children }) {
return (
{children}
);
}
``- Beispiel für
:
`
--------------------------------------------------| printWidth=50
export function Callout({ children }) {
return (
{children}
);
}
`
Standardwert | CLI Überschreibung | API Überschreibung
--- | --- | ---
| --ending-position | endingPosition: ""Syntaxtransformation
Erstmals verfügbar in v0.7.7.
Wenn ein Zeilenumbruch in einem Klassennamen auftritt, der in einer Nicht-Ausdruckssyntax geschrieben ist, wird er in Ausdruckssyntax umgewandelt. Diese Transformation unterstützt kein reversibles Formatieren.
Standardwert | CLI Überschreibung | API Überschreibung
--- | --- | ---
| --syntax-transformation | syntaxTransformation: Versionskorrelation mit Schwester-Plugins
Ab Version
plane ich, bei einem Minor-Release auf einer Seite die Änderung, sofern möglich, auch auf der anderen Seite zu reflektieren.
Kompatibilität mit anderen Prettier-Plugins
Wenn mehr als ein Prettier-Plugin den zu formatierenden Text verarbeiten kann, verwendet Prettier nur das zuletzt geladene dieser Plugins.
In diesem Fall können Sie die Konfiguration wie folgt vornehmen, indem Sie prettier-plugin-merge hinzufügen, um diese Plugins nacheinander anzuwenden.
JSON-Beispiel:
--- Tranlated By Open Ai Tx | Last indexed: 2025-09-09 ---