🌐 Sprache
prettier-plugin-classnames
Ein Prettier-Plugin, das ausführliche Klassennamen basierend auf der printWidth-Option umbricht.
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',
};Markdown/MDX-Überschreibung
Dieses Plugin unterstützt Markdown und MDX nicht, aber wenn dieses Plugin eine Sprache innerhalb von Codeblöcken unterstützt (z. B. Vue), kann es zu unbeabsichtigter Formatierung innerhalb der Codeblöcke kommen.
Um unbeabsichtigte Formatierungen zu verhindern, können Sie Konfigurationsüberschreibungen für Markdown und MDX verwenden.
JSON-Beispiel:
{
"plugins": ["prettier-plugin-classnames"],
"customFunctions": ["clsx"],
"overrides": [
{
"files": [".md", ".mdx"],
"options": {
"plugins": []
}
}
]
}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=60
export function Callout({ children }) {
return (
{children}
);
}
``- Beispiel für
:
`
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
`
Standard | CLI-Überschreibung | API-Überschreibung
--- | --- | ---
| --ending-position | endingPosition: ""Syntaxumwandlung
Erstmals verfügbar in v0.7.7.
Wenn ein Zeilenumbruch in einem Klassennamen auftritt, der in nicht-ausdrucksbasiertem Syntax geschrieben wurde, wird er in ausdrucksbasierten Syntax umgewandelt. Diese Umwandlung unterstützt kein reversibles Formatieren.
Standard | CLI-Überschreibung | API-Überschreibung
--- | --- | ---
| --syntax-transformation | syntaxTransformation: Print-Breite der Klassennamen
Erstmals verfügbar in v0.10.0.
Geben Sie die Print-Breite des Klassennamens an. Wenn kein Wert angegeben wird, wird der Wert von
als Standard verwendet.
Standard | CLI-Überschreibung | API-Überschreibung
--- | --- | ---
undefined | --classnames-print-width | classnamesPrintWidth: Versionskorrelation mit verwandten Plugins
Ab Version
plane ich bei einer Minor-Version auf einer Seite, diese Änderung, wenn möglich, auch auf der anderen Seite zu übernehmen.
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 Plugins nacheinander anwenden, indem Sie prettier-plugin-merge hinzufügen und entsprechend konfigurieren.
JSON-Beispiel:
Stargazers over time
--- Tranlated By Open Ai Tx | Last indexed: 2026-06-03 ---