Does the plugin have Astro compatibility?

[RodrigoTomeES]

Hi,

Does the plugin have Astro compatibility?

Thanks!

[IanVS]

Yes, I use it in my own Astro project.

[RodrigoTomeES]

@IanVS I mentioned it because I recently returned to a project using the latest version of Astro, and it stopped working. The imports are no longer being sorted, and since it's not listed in the compatibility table, I thought that might be the issue.

[IanVS]

@RodrigoTomeES can you share your .prettierrc or even better a reproduction?

[RodrigoTomeES]

@IanVS sure, here you have. thanks!

{
  "semi": true,
  "singleQuote": true,
  "endOfLine": "lf",
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80,
  "overrides": [
    {
      "files": ["**/*.css"],
      "options": {
        "singleQuote": false
      }
    }
  ],
  "plugins": [
    "prettier-stylelint",
    "prettier-plugin-astro",
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss"
  ],
  "importOrder": [
    "<THIRD_PARTY_MODULES>",
    "",
    "^@/atoms/(.*)$",
    "^@/molecules/(.*)$",
    "^@/organisms/(.*)$",
    "^@/templates/(.*)$",
    "^@/pages/(.*)$",
    "^@/layouts/(.*)$",
    "",
    "^@/(.*)$",
    "^[./]",
    "",
    "<TYPES>",
    "<TYPES>^[./]"
  ],
  "importOrderMergeDuplicateImports": true,
  "pluginSearchDirs": false
}

[IanVS]

It could be because you're using prettier-plugin-tailwindcss. Recent versions do include this plugin in its compatibility list, so make sure you're on the latest there.

I upgraded my project to Astro 2.5.1, and was still able to sort correctly. I can look into it a bit more if you're willing to put together a small reproduction and share it.

[RodrigoTomeES]

@IanVS mmm I have all my dependencies updated, look:

$ yarn outdated
➤ YN0000: ┌ Checking for outdated dependencies
➤ YN0000: └ Completed in 2s 917ms

➤ YN0000: ✨ All your dependencies are up to date!
➤ YN0000: Done in 2s 918ms

This is the project: https://github.com/RodrigoTomeES/awa-db

[IanVS]

It looks like the latest version of prettier-plugin-astro broke compatibility with this plugin. Using 0.8.0 works fine. It looks like it might be due to them changing from the typescript parser to the babel-ts parser. I should be able to restore compatibility on this end. In the meantime, I'd suggest sticking to 0.8.0 of the astro plugin for now.

[IanVS]

Support has been restored in 4.0.0-beta.0. I've opened a PR on your repo to update it. https://github.com/RodrigoTomeES/awa-db/pull/1.

Thanks for the report!

[RodrigoTomeES]

@IanVS wow, thanks! I will test it this afternoon and aprove it 🚀

[bobalazek]

Is there an issue currently with Astro and the plugin?

I am experiencing a SyntaxError: 'return' outside of function. (23:2) issue (basically same as here: https://github.com/trivago/prettier-plugin-sort-imports/issues/210):

["ERROR" - 08:30:16] Error formatting document.
SyntaxError: 'return' outside of function. (23:2)
    at constructor (/Users/borut/Development/github/bobalazek/project/node_modules/@babel/parser/lib/index.js:351:19)
    at TypeScriptParserMixin.raise (/Users/borut/Development/github/bobalazek/project/node_modules/@babel/parser/lib/index.js:3233:19)
    at TypeScriptParserMixin.parseReturnStatement (/Users/borut/Development/github/bobalazek/project/node_modules/@babel/parser/lib/index.js:12597:12)
    at TypeScriptParserMixin.parseStatementContent (/Users/borut/Development/github/bobalazek/project/node_modules/@babel/parser/lib/index.js:12254:21)
    at TypeScriptParserMixin.parseStatementContent (/Users/borut/Development/github/bobalazek/project/node_modules/@babel/parser/lib/index.js:9104:18)
    at TypeScriptParserMixin.parseStatementLike (/Users/borut/Development/github/bobalazek/project/node_modules/@babel/parser/lib/index.js:12223:17)
    at TypeScriptParserMixin.parseStatementListItem (/Users/borut/Development/github/bobalazek/project/node_modules/@babel/parser/lib/index.js:12203:17)
    at TypeScriptParserMixin.parseBlockOrModuleBlockBody (/Users/borut/Development/github/bobalazek/project/node_modules/@babel/parser/lib/index.js:12780:61)
    at TypeScriptParserMixin.parseBlockBody (/Users/borut/Development/github/bobalazek/project/node_modules/@babel/parser/lib/index.js:12773:10)
    at TypeScriptParserMixin.parseBlock (/Users/borut/Development/github/bobalazek/project/node_modules/@babel/parser/lib/index.js:12761:10)

package.json

{
  "dependencies": {
      "astro": "^4.10.2",
  },
  "devDependencies": {
      "@ianvs/prettier-plugin-sort-imports": "^4.3.0",
      "@typescript-eslint/parser": "7.14.1",
      "eslint": "^9.6.0",
      "eslint-plugin-astro": "1.2.2",
      "prettier": "^3.3.2",
      "prettier-plugin-astro": "^0.14.0",
      "prettier-plugin-packagejson": "^2.5.0",
      "prettier-plugin-tailwindcss": "^0.6.5"
    },
  }

prettier.config.js

/** @type {import("prettier").Config} */
export default {
  printWidth: 100,
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  useTabs: false,
  trailingComma: 'es5',
  plugins: [
    'prettier-plugin-astro',
    'prettier-plugin-packagejson',
    '@ianvs/prettier-plugin-sort-imports',
    'prettier-plugin-tailwindcss',
  ],
  importOrder: [
    '<TYPES>',
    '',
    '<TYPES>^[.]',
    '',
    '<BUILT_IN_MODULES>',
    '',
    '<THIRD_PARTY_MODULES>',
    '',
    '^@app/(.*)$',
    '',
    '^[./]',
  ],
  overrides: [
    {
      files: ['.*', '*.md', '*.toml', '*.yml', '*.yaml'],
      options: {
        useTabs: false,
      },
    },
    {
      files: ['**/*.astro'],
      options: {
        parser: 'astro',
      },
    },
  ],
};

If I remove @ianvs/prettier-plugin-sort-imports from the plugins, it seems to be working as expected.

[IanVS]

@bobalazek would you be willing to put together a minimal reproduction that I can look into?

Does it fail on the command line, in vscode, or both?

[bobalazek]

Hey @IanVS - sure, here it is: https://github.com/bobalazek/prettier-imports-repro

And yes, happens on both CLI and VSCode

[IanVS]

Thanks for the reproduction, @bobalazek, that was very helpful. I've got a PR up to address your issue.