admin管理员组文章数量:1277274
I'm encountering an issue with the Automatic Tailwind Class Sorting plugin for Prettier on macOS and VSCode. According to the documentation, custom classes should be sorted to the front of the class list. However, in my case, these custom classes are being treated as normal classes and are not being sorted correctly.
For example, Prettier should format the following HTML code:
<p class="shadow-card left-4 mt-2 text-[11px] text-gray-text">
But it's actually formatting it like this:
<p class="left-4 mt-2 text-[11px] text-gray-text shadow-card">
Interestingly, my colleagues who are using Windows and Linux report that the plugin works correctly for them. We are all using the same version of Prettier and the Automatic Tailwind Class Sorting plugin. I've pared our configuration files and they seem to be the same.
Steps I've Taken:
- Checked that Prettier and the plugin are up to date.
- Compared configuration files with colleagues and found no differences.
- Tested the plugin on my colleagues' systems, and it worked as expected.
It's causing significant problems when it es to paring code changes in Git. Unnecessary reordering of classes is being detected as changes, leading to confusion and noise in our version control history.
Despite trying these steps, the issue persists. I'm at a loss for what might be causing this behavior.
Logs form debug console:
"INFO" - 12:25:52] Formatting file:///Users/kamilwojtowicz/Desktop/work/offerboard/packages/frontend/src/routes/%28appLayout%29/account/profile/%2Bpage.svelte
["INFO" - 12:25:52] Using config file at '/Users/kamilwojtowicz/Desktop/work/offerboard/packages/frontend/.prettierrc'
["INFO" - 12:25:52] PrettierInstance:
{
"modulePath": "/Users/kamilwojtowicz/Desktop/work/offerboard/node_modules/prettier/index.js",
"version": "2.8.8",
"prettierModule": {
"doc": {
"builders": {
"line": {
"type": "line"
},
"softline": {
"type": "line",
"soft": true
},
"hardline": {
"type": "concat",
"parts": [
{
"type": "line",
"hard": true
},
{
"type": "break-parent"
}
]
},
"literalline": {
"type": "concat",
"parts": [
{
"type": "line",
"hard": true,
"literal": true
},
{
"type": "break-parent"
}
]
},
"lineSuffixBoundary": {
"type": "line-suffix-boundary"
},
"cursor": {
"type": "cursor"
},
"breakParent": {
"type": "break-parent"
},
"trim": {
"type": "trim"
},
"hardlineWithoutBreakParent": {
"type": "line",
"hard": true
},
"literallineWithoutBreakParent": {
"type": "line",
"hard": true,
"literal": true
}
},
"printer": {},
"utils": {},
"debug": {}
},
"version": "2.8.8",
"util": {},
"__internal": {
"errors": {},
"coreOptions": {
"CATEGORY_CONFIG": "Config",
"CATEGORY_EDITOR": "Editor",
"CATEGORY_FORMAT": "Format",
"CATEGORY_OTHER": "Other",
"CATEGORY_OUTPUT": "Output",
"CATEGORY_GLOBAL": "Global",
"CATEGORY_SPECIAL": "Special",
"options": {
"cursorOffset": {
"since": "1.4.0",
"category": "Special",
"type": "int",
"default": -1,
"range": {
"start": -1,
"end": null,
"step": 1
},
"description": "Print (to stderr) where a cursor at the given position would move to after formatting.\nThis option cannot be used with --range-start and --range-end.",
"cliCategory": "Editor"
},
"endOfLine": {
"since": "1.15.0",
"category": "Global",
"type": "choice",
"default": [
{
"since": "1.15.0",
"value": "auto"
},
{
"since": "2.0.0",
"value": "lf"
}
],
"description": "Which end of line characters to apply.",
"choices": [
{
"value": "lf",
"description": "Line Feed only (\\n), mon on Linux and macOS as well as inside git repos"
},
{
"value": "crlf",
"description": "Carriage Return + Line Feed characters (\\r\\n), mon on Windows"
},
{
"value": "cr",
"description": "Carriage Return character only (\\r), used very rarely"
},
{
"value": "auto",
"description": "Maintain existing\n(mixed values within one file are normalised by looking at what's used after the first line)"
}
]
},
"filepath": {
"since": "1.4.0",
"category": "Special",
"type": "path",
"description": "Specify the input filepath. This will be used to do parser inference.",
"cliName": "stdin-filepath",
"cliCategory": "Other",
"cliDescription": "Path to the file to pretend that stdin es from."
},
"insertPragma": {
"since": "1.8.0",
"category": "Special",
"type": "boolean",
"default": false,
"description": "Insert @format pragma into file's first docblock ment.",
"cliCategory": "Other"
},
"parser": {
"since": "0.0.10",
"category": "Global",
"type": "choice",
"default": [
{
"since": "0.0.10",
"value": "babylon"
},
{
"since": "1.13.0"
}
],
"description": "Which parser to use.",
"choices": [
{
"value": "flow",
"description": "Flow"
},
{
"value": "babel",
"since": "1.16.0",
"description": "JavaScript"
},
{
"value": "babel-flow",
"since": "1.16.0",
"description": "Flow"
},
{
"value": "babel-ts",
"since": "2.0.0",
"description": "TypeScript"
},
{
"value": "typescript",
"since": "1.4.0",
"description": "TypeScript"
},
{
"value": "acorn",
"since": "2.6.0",
"description": "JavaScript"
},
{
"value": "espree",
"since": "2.2.0",
"description": "JavaScript"
},
{
"value": "meriyah",
"since": "2.2.0",
"description": "JavaScript"
},
{
"value": "css",
"since": "1.7.1",
"description": "CSS"
},
{
"value": "less",
"since": "1.7.1",
"description": "Less"
},
{
"value": "scss",
"since": "1.7.1",
"description": "SCSS"
},
{
"value": "json",
"since": "1.5.0",
"description": "JSON"
},
{
"value": "json5",
"since": "1.13.0",
"description": "JSON5"
},
{
"value": "json-stringify",
"since": "1.13.0",
"description": "JSON.stringify"
},
{
"value": "graphql",
"since": "1.5.0",
"description": "GraphQL"
},
{
"value": "markdown",
"since": "1.8.0",
"description": "Markdown"
},
{
"value": "mdx",
"since": "1.15.0",
"description": "MDX"
},
{
"value": "vue",
"since": "1.10.0",
"description": "Vue"
},
{
"value": "yaml",
"since": "1.14.0",
"description": "YAML"
},
{
"value": "glimmer",
"since": "2.3.0",
"description": "Ember / Handlebars"
},
{
"value": "html",
"since": "1.15.0",
"description": "HTML"
},
{
"value": "angular",
"since": "1.15.0",
"description": "Angular"
},
{
"value": "lwc",
"since": "1.17.0",
"description": "Lightning Web Components"
}
]
},
"plugins": {
"since": "1.10.0",
"type": "path",
"array": true,
"default": [
{
"value": []
}
],
"category": "Global",
"description": "Add a plugin. Multiple plugins can be passed as separate `--plugin`s.",
"cliName": "plugin",
"cliCategory": "Config"
},
"pluginSearchDirs": {
"since": "1.13.0",
"type": "path",
"array": true,
"default": [
{
"value": []
}
],
"category": "Global",
"description": "Custom directory that contains prettier plugins in node_modules subdirectory.\nOverrides default behavior when plugins are searched relatively to the location of Prettier.\nMultiple values are accepted.",
"cliName": "plugin-search-dir",
"cliCategory": "Config"
},
"printWidth": {
"since": "0.0.0",
"category": "Global",
"type": "int",
"default": 80,
"description": "The line length where Prettier will try wrap.",
"range": {
"start": 0,
"end": null,
"step": 1
}
},
"rangeEnd": {
"since": "1.4.0",
"category": "Special",
"type": "int",
"default": null,
"range": {
"start": 0,
"end": null,
"step": 1
},
"description": "Format code ending at a given character offset (exclusive).\nThe range will extend forwards to the end of the selected statement.\nThis option cannot be used with --cursor-offset.",
"cliCategory": "Editor"
},
"rangeStart": {
"since": "1.4.0",
"category": "Special",
"type": "int",
"default": 0,
"range": {
"start": 0,
"end": null,
"step": 1
},
"description": "Format code starting at a given character offset.\nThe range will extend backwards to the start of the first line containing the selected statement.\nThis option cannot be used with --cursor-offset.",
"cliCategory": "Editor"
},
"requirePragma": {
"since": "1.7.0",
"category": "Special",
"type": "boolean",
"default": false,
"description": "Require either '@prettier' or '@format' to be present in the file's first docblock ment\nin order for it to be formatted.",
"cliCategory": "Other"
},
"tabWidth": {
"type": "int",
"category": "Global",
"default": 2,
"description": "Number of spaces per indentation level.",
"range": {
"start": 0,
"end": null,
"step": 1
}
},
"useTabs": {
"since": "1.0.0",
"category": "Global",
"type": "boolean",
"default": false,
"description": "Indent with tabs instead of spaces."
},
"embeddedLanguageFormatting": {
"since": "2.1.0",
"category": "Global",
"type": "choice",
"default": [
{
"since": "2.1.0",
"value": "auto"
}
],
"description": "Control how Prettier formats quoted code embedded in the file.",
"choices": [
{
"value": "auto",
"description": "Format embedded code if Prettier can automatically identify it."
},
{
"value": "off",
"description": "Never automatically format embedded code."
}
]
}
}
},
"optionsModule": {
"hiddenDefaults": {
"astFormat": "estree",
"printer": {},
"locStart": null,
"locEnd": null
}
},
"optionsNormalizer": {},
"utils": {}
},
"__debug": {}
}
}
["INFO" - 12:25:52] Using ignore file (if present) at /Users/kamilwojtowicz/Desktop/work/offerboard/.prettierignore
["INFO" - 12:25:52] File Info:
{
"ignored": false,
"inferredParser": "svelte"
}
["INFO" - 12:25:52] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 12:25:52] Prettier Options:
{
"filepath": "/Users/kamilwojtowicz/Desktop/work/offerboard/packages/frontend/src/routes/(appLayout)/account/profile/+page.svelte",
"parser": "svelte",
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": [
"/Users/kamilwojtowicz/Desktop/work/offerboard/node_modules/prettier-plugin-svelte/plugin.js",
"/Users/kamilwojtowicz/Desktop/work/offerboard/node_modules/prettier-plugin-tailwindcss/dist/index.js"
],
"pluginSearchDirs": [
"/Users/kamilwojtowicz/Desktop/work/offerboard/packages/frontend"
],
"endOfLine": "auto"
}
I'm encountering an issue with the Automatic Tailwind Class Sorting plugin for Prettier on macOS and VSCode. According to the documentation, custom classes should be sorted to the front of the class list. However, in my case, these custom classes are being treated as normal classes and are not being sorted correctly.
For example, Prettier should format the following HTML code:
<p class="shadow-card left-4 mt-2 text-[11px] text-gray-text">
But it's actually formatting it like this:
<p class="left-4 mt-2 text-[11px] text-gray-text shadow-card">
Interestingly, my colleagues who are using Windows and Linux report that the plugin works correctly for them. We are all using the same version of Prettier and the Automatic Tailwind Class Sorting plugin. I've pared our configuration files and they seem to be the same.
Steps I've Taken:
- Checked that Prettier and the plugin are up to date.
- Compared configuration files with colleagues and found no differences.
- Tested the plugin on my colleagues' systems, and it worked as expected.
It's causing significant problems when it es to paring code changes in Git. Unnecessary reordering of classes is being detected as changes, leading to confusion and noise in our version control history.
Despite trying these steps, the issue persists. I'm at a loss for what might be causing this behavior.
Logs form debug console:
"INFO" - 12:25:52] Formatting file:///Users/kamilwojtowicz/Desktop/work/offerboard/packages/frontend/src/routes/%28appLayout%29/account/profile/%2Bpage.svelte
["INFO" - 12:25:52] Using config file at '/Users/kamilwojtowicz/Desktop/work/offerboard/packages/frontend/.prettierrc'
["INFO" - 12:25:52] PrettierInstance:
{
"modulePath": "/Users/kamilwojtowicz/Desktop/work/offerboard/node_modules/prettier/index.js",
"version": "2.8.8",
"prettierModule": {
"doc": {
"builders": {
"line": {
"type": "line"
},
"softline": {
"type": "line",
"soft": true
},
"hardline": {
"type": "concat",
"parts": [
{
"type": "line",
"hard": true
},
{
"type": "break-parent"
}
]
},
"literalline": {
"type": "concat",
"parts": [
{
"type": "line",
"hard": true,
"literal": true
},
{
"type": "break-parent"
}
]
},
"lineSuffixBoundary": {
"type": "line-suffix-boundary"
},
"cursor": {
"type": "cursor"
},
"breakParent": {
"type": "break-parent"
},
"trim": {
"type": "trim"
},
"hardlineWithoutBreakParent": {
"type": "line",
"hard": true
},
"literallineWithoutBreakParent": {
"type": "line",
"hard": true,
"literal": true
}
},
"printer": {},
"utils": {},
"debug": {}
},
"version": "2.8.8",
"util": {},
"__internal": {
"errors": {},
"coreOptions": {
"CATEGORY_CONFIG": "Config",
"CATEGORY_EDITOR": "Editor",
"CATEGORY_FORMAT": "Format",
"CATEGORY_OTHER": "Other",
"CATEGORY_OUTPUT": "Output",
"CATEGORY_GLOBAL": "Global",
"CATEGORY_SPECIAL": "Special",
"options": {
"cursorOffset": {
"since": "1.4.0",
"category": "Special",
"type": "int",
"default": -1,
"range": {
"start": -1,
"end": null,
"step": 1
},
"description": "Print (to stderr) where a cursor at the given position would move to after formatting.\nThis option cannot be used with --range-start and --range-end.",
"cliCategory": "Editor"
},
"endOfLine": {
"since": "1.15.0",
"category": "Global",
"type": "choice",
"default": [
{
"since": "1.15.0",
"value": "auto"
},
{
"since": "2.0.0",
"value": "lf"
}
],
"description": "Which end of line characters to apply.",
"choices": [
{
"value": "lf",
"description": "Line Feed only (\\n), mon on Linux and macOS as well as inside git repos"
},
{
"value": "crlf",
"description": "Carriage Return + Line Feed characters (\\r\\n), mon on Windows"
},
{
"value": "cr",
"description": "Carriage Return character only (\\r), used very rarely"
},
{
"value": "auto",
"description": "Maintain existing\n(mixed values within one file are normalised by looking at what's used after the first line)"
}
]
},
"filepath": {
"since": "1.4.0",
"category": "Special",
"type": "path",
"description": "Specify the input filepath. This will be used to do parser inference.",
"cliName": "stdin-filepath",
"cliCategory": "Other",
"cliDescription": "Path to the file to pretend that stdin es from."
},
"insertPragma": {
"since": "1.8.0",
"category": "Special",
"type": "boolean",
"default": false,
"description": "Insert @format pragma into file's first docblock ment.",
"cliCategory": "Other"
},
"parser": {
"since": "0.0.10",
"category": "Global",
"type": "choice",
"default": [
{
"since": "0.0.10",
"value": "babylon"
},
{
"since": "1.13.0"
}
],
"description": "Which parser to use.",
"choices": [
{
"value": "flow",
"description": "Flow"
},
{
"value": "babel",
"since": "1.16.0",
"description": "JavaScript"
},
{
"value": "babel-flow",
"since": "1.16.0",
"description": "Flow"
},
{
"value": "babel-ts",
"since": "2.0.0",
"description": "TypeScript"
},
{
"value": "typescript",
"since": "1.4.0",
"description": "TypeScript"
},
{
"value": "acorn",
"since": "2.6.0",
"description": "JavaScript"
},
{
"value": "espree",
"since": "2.2.0",
"description": "JavaScript"
},
{
"value": "meriyah",
"since": "2.2.0",
"description": "JavaScript"
},
{
"value": "css",
"since": "1.7.1",
"description": "CSS"
},
{
"value": "less",
"since": "1.7.1",
"description": "Less"
},
{
"value": "scss",
"since": "1.7.1",
"description": "SCSS"
},
{
"value": "json",
"since": "1.5.0",
"description": "JSON"
},
{
"value": "json5",
"since": "1.13.0",
"description": "JSON5"
},
{
"value": "json-stringify",
"since": "1.13.0",
"description": "JSON.stringify"
},
{
"value": "graphql",
"since": "1.5.0",
"description": "GraphQL"
},
{
"value": "markdown",
"since": "1.8.0",
"description": "Markdown"
},
{
"value": "mdx",
"since": "1.15.0",
"description": "MDX"
},
{
"value": "vue",
"since": "1.10.0",
"description": "Vue"
},
{
"value": "yaml",
"since": "1.14.0",
"description": "YAML"
},
{
"value": "glimmer",
"since": "2.3.0",
"description": "Ember / Handlebars"
},
{
"value": "html",
"since": "1.15.0",
"description": "HTML"
},
{
"value": "angular",
"since": "1.15.0",
"description": "Angular"
},
{
"value": "lwc",
"since": "1.17.0",
"description": "Lightning Web Components"
}
]
},
"plugins": {
"since": "1.10.0",
"type": "path",
"array": true,
"default": [
{
"value": []
}
],
"category": "Global",
"description": "Add a plugin. Multiple plugins can be passed as separate `--plugin`s.",
"cliName": "plugin",
"cliCategory": "Config"
},
"pluginSearchDirs": {
"since": "1.13.0",
"type": "path",
"array": true,
"default": [
{
"value": []
}
],
"category": "Global",
"description": "Custom directory that contains prettier plugins in node_modules subdirectory.\nOverrides default behavior when plugins are searched relatively to the location of Prettier.\nMultiple values are accepted.",
"cliName": "plugin-search-dir",
"cliCategory": "Config"
},
"printWidth": {
"since": "0.0.0",
"category": "Global",
"type": "int",
"default": 80,
"description": "The line length where Prettier will try wrap.",
"range": {
"start": 0,
"end": null,
"step": 1
}
},
"rangeEnd": {
"since": "1.4.0",
"category": "Special",
"type": "int",
"default": null,
"range": {
"start": 0,
"end": null,
"step": 1
},
"description": "Format code ending at a given character offset (exclusive).\nThe range will extend forwards to the end of the selected statement.\nThis option cannot be used with --cursor-offset.",
"cliCategory": "Editor"
},
"rangeStart": {
"since": "1.4.0",
"category": "Special",
"type": "int",
"default": 0,
"range": {
"start": 0,
"end": null,
"step": 1
},
"description": "Format code starting at a given character offset.\nThe range will extend backwards to the start of the first line containing the selected statement.\nThis option cannot be used with --cursor-offset.",
"cliCategory": "Editor"
},
"requirePragma": {
"since": "1.7.0",
"category": "Special",
"type": "boolean",
"default": false,
"description": "Require either '@prettier' or '@format' to be present in the file's first docblock ment\nin order for it to be formatted.",
"cliCategory": "Other"
},
"tabWidth": {
"type": "int",
"category": "Global",
"default": 2,
"description": "Number of spaces per indentation level.",
"range": {
"start": 0,
"end": null,
"step": 1
}
},
"useTabs": {
"since": "1.0.0",
"category": "Global",
"type": "boolean",
"default": false,
"description": "Indent with tabs instead of spaces."
},
"embeddedLanguageFormatting": {
"since": "2.1.0",
"category": "Global",
"type": "choice",
"default": [
{
"since": "2.1.0",
"value": "auto"
}
],
"description": "Control how Prettier formats quoted code embedded in the file.",
"choices": [
{
"value": "auto",
"description": "Format embedded code if Prettier can automatically identify it."
},
{
"value": "off",
"description": "Never automatically format embedded code."
}
]
}
}
},
"optionsModule": {
"hiddenDefaults": {
"astFormat": "estree",
"printer": {},
"locStart": null,
"locEnd": null
}
},
"optionsNormalizer": {},
"utils": {}
},
"__debug": {}
}
}
["INFO" - 12:25:52] Using ignore file (if present) at /Users/kamilwojtowicz/Desktop/work/offerboard/.prettierignore
["INFO" - 12:25:52] File Info:
{
"ignored": false,
"inferredParser": "svelte"
}
["INFO" - 12:25:52] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 12:25:52] Prettier Options:
{
"filepath": "/Users/kamilwojtowicz/Desktop/work/offerboard/packages/frontend/src/routes/(appLayout)/account/profile/+page.svelte",
"parser": "svelte",
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": [
"/Users/kamilwojtowicz/Desktop/work/offerboard/node_modules/prettier-plugin-svelte/plugin.js",
"/Users/kamilwojtowicz/Desktop/work/offerboard/node_modules/prettier-plugin-tailwindcss/dist/index.js"
],
"pluginSearchDirs": [
"/Users/kamilwojtowicz/Desktop/work/offerboard/packages/frontend"
],
"endOfLine": "auto"
}
4 Answers
Reset to default 7Please note! The prettier-plugin-tailwindcss plugin should be on the end of the plugin list in your .prettier config. Example:
{
"plugins": [
"prettier-plugin-organize-attributes",
"prettier-plugin-organize-imports",
"prettier-plugin-tailwindcss"// Move to the end of the list
]
}
I ran into the same issue but got things working again by adding plugins: ["prettier-plugin-tailwindcss"] to my .prettierrc file.
Example .prettierrc.cjs:
// prettier.config.js, .prettierrc.js, prettier.config.cjs, or .prettierrc.cjs
/** @type {import("prettier").Config} */
const config = {
bracketSameLine: true,
plugins: ["prettier-plugin-tailwindcss"],
};
module.exports = config;
Looks like a lot of people have been running into this issue: https://github./tailwindlabs/prettier-plugin-tailwindcss/issues/176#issuement-1657636771
I installed "prettier-plugin-tailwindcss": "0.4.1", instead of "prettier-plugin-tailwindcss": "^0.5.10",. Restarted VS Code and it worked!
The solution provided by @Samer worked for me. Here are the steps I took First I uninstalled prettier-plugin-tailwindcss by running
npm uninstall prettier-plugin-tailwindcss
then I installed the specific version
npm install [email protected] -D
The -D flag will install the plugin as a dev dependency.
本文标签：
版权声明：本文标题：javascript - Automatic Tailwind Class Sorting with Prettier doesn't work as described in documentation - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741223897a2361496.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论