🌐 Język
prettier-plugin-classnames
Wtyczka Prettier, która zawija zbyt długie nazwy klas na podstawie opcji printWidth.
Instalacja[^1]
npm install -D prettier prettier-plugin-classnames[^1]: Jeśli Twoja wersja prettier-plugin-classnames jest niższa niż 0.4.0, będziesz musiał również zainstalować @prettier/sync.
Konfiguracja
Przykład JSON:
{
"plugins": ["prettier-plugin-classnames"]
}Przykład JS (moduł CommonJS):
module.exports = {
plugins: ['prettier-plugin-classnames'],
customAttributes: ['myClassProp'],
customFunctions: ['clsx'],
};Przykład JS (moduł ES):
export default {
plugins: ['prettier-plugin-classnames'],
endingPosition: 'absolute',
};Nadpisanie Markdown/MDX
Ta wtyczka nie obsługuje Markdown ani MDX, ale jeśli obsługuje język wewnątrz bloków kodu (np. Vue), może wystąpić niezamierzone formatowanie wewnątrz tych bloków.
Aby zapobiec niezamierzonemu formatowaniu, możesz użyć nadpisania konfiguracji dla Markdown i MDX.
Przykład JSON:
{
"plugins": ["prettier-plugin-classnames"],
"customFunctions": ["clsx"],
"overrides": [
{
"files": [".md", ".mdx"],
"options": {
"plugins": []
}
}
]
}Opcje
Atrybuty niestandardowe
Lista atrybutów, które zamykają nazwy klas.
Atrybuty class i className są zawsze obsługiwane, nawet jeśli nie określono żadnych opcji.
Domyślne | Nadpisanie CLI | Nadpisanie API
--- | --- | ---
[] | --custom-attributes | customAttributes: ["
Funkcje niestandardowe
Lista funkcji, które zamykają nazwy klas.
Funkcja classNames jest zawsze obsługiwana, nawet jeśli nie określono żadnych opcji.
Domyślne | Nadpisanie CLI | Nadpisanie API
--- | --- | ---
[] | --custom-functions | customFunctions: ["
Pozycja końcowa
Po raz pierwszy dostępne w wersji v0.5.0.
absolute-with-indent zostało dodane w wersji v0.6.0.
absolute-with-indent zostało usunięte w wersji v0.8.0, ale ten sam wynik można uzyskać za pomocą absolute.
Wartość domyślna została zmieniona z relative na absolute w wersji v0.8.0.
To jest kryterium kończenia nazwy klasy w każdej linii podczas zamiany oryginalnej nazwy klasy na wieloliniową nazwę klasy.
- przykład
absolute:
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
``- Przykład
:
`
------------------------------------------------------------| printWidth=60
export function Callout({ children }) {
return (
{children}
);
}
`
Domyślne | Nadpisanie CLI | Nadpisanie API
--- | --- | ---
| --ending-position | endingPosition: ""Transformacja składni
Po raz pierwszy dostępne w wersji v0.7.7.
Jeśli występuje zawijanie linii w nazwie klasy zapisanej w składni nie-wyrażeniowej, zostaje ona przekształcona w składnię wyrażeniową. Ta transformacja nie obsługuje odwracalnego formatowania.
Domyślne | Nadpisanie CLI | Nadpisanie API
--- | --- | ---
| --syntax-transformation | syntaxTransformation: Szerokość druku nazw klas
Po raz pierwszy dostępne w wersji v0.10.0.
Określ szerokość druku dla nazwy klasy. Jeśli nie zostanie podana wartość, jako domyślna zostanie użyta wartość
.
Domyślne | Nadpisanie CLI | Nadpisanie API
--- | --- | ---
undefined | --classnames-print-width | classnamesPrintWidth: Korelacja wersji z pokrewnymi pluginami
Od wersji
, gdy pojawia się wydanie typu minor po jednej stronie, planuję odzwierciedlić tę zmianę po drugiej stronie również, jeśli to możliwe.
Kompatybilność z innymi pluginami Prettier
Jeśli więcej niż jeden plugin Prettier może obsłużyć tekst, który chcesz sformatować, Prettier użyje tylko ostatniego z tych pluginów.
W takim przypadku możesz skonfigurować to w następujący sposób, dodając prettier-plugin-merge, aby zastosować te pluginy kolejno.
Przykład JSON:
Stargazers over time
--- Tranlated By Open Ai Tx | Last indexed: 2026-06-03 ---