Does the plugin have Astro compatibility? #96

RodrigoTomeES · 2023-05-21T17:10:00Z

Hi,

Does the plugin have Astro compatibility?

Thanks!

IanVS · 2023-05-21T19:11:05Z

Yes, I use it in my own Astro project.

RodrigoTomeES · 2023-05-21T20:54:55Z

@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 · 2023-05-21T21:08:02Z

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

RodrigoTomeES · 2023-05-21T21:08:54Z

@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 · 2023-05-21T21:20:00Z

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 · 2023-05-21T21:23:59Z

@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 · 2023-05-22T00:57:05Z

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.

Restores compatibility with the latest version of `prettier-plugin-astro`. Fixes #96. To confirm, I made this change in the `node_modules` of the project in the above issue, and confirmed that sorting began working correctly again.

IanVS · 2023-05-22T02:13:17Z

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

Thanks for the report!

RodrigoTomeES · 2023-05-22T06:01:41Z

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

bobalazek · 2024-06-29T06:38:03Z

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: trivago/prettier-plugin-sort-imports#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 · 2024-06-29T13:00:44Z

@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 · 2024-06-29T13:25:08Z

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

And yes, happens on both CLI and VSCode

IanVS · 2024-07-01T12:58:12Z

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

Addresses #96 (comment) In Astro, it's possible to [return a Response](https://docs.astro.build/en/guides/server-side-rendering/#return-a-response-object) from inside of a component script, without wrapping it in a function. This doesn't look like valid JavaScript, so the babel parser choked on it. This change checks to see if the file was parsed with the astro plugin, and if so, enables the `allowReturnOutsideFunction` parser option. This is admittedly a bit of a band-aid. I think the more correct approach is to parse the code into AST using the configured parser, rather than always using our version of babel. This is what some other prettier plugins do. Some, like tailwindcss, goes so far as to load a list of compatible other prettier plugins to enable cross-compatibility. But, that's a much bigger change that will potentially require a breaking change version bump, so I didn't tackle it here. The other thing I did do here, is update the README a bit. I added `Astro` to our supported frameworks as experimental (there may be other parser options we need to set), and also included support for Svelte, which we've always supported, as far as I know, but don't really test for (it would be good to make some tests sometime).

RodrigoTomeES assigned IanVS May 21, 2023

RodrigoTomeES changed the title ~~Does the plugin has Astro Compatibility?~~ Does the plugin have Astro compatibility? May 21, 2023

IanVS closed this as completed May 21, 2023

IanVS reopened this May 22, 2023

IanVS mentioned this issue May 22, 2023

Support babel-ts parser #97

Merged

IanVS closed this as completed in #97 May 22, 2023

IanVS mentioned this issue Jul 1, 2024

Add support for return in Astro component script #176

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Does the plugin have Astro compatibility? #96

Does the plugin have Astro compatibility? #96

RodrigoTomeES commented May 21, 2023 •

edited

Loading

IanVS commented May 21, 2023

RodrigoTomeES commented May 21, 2023

IanVS commented May 21, 2023

RodrigoTomeES commented May 21, 2023

IanVS commented May 21, 2023

RodrigoTomeES commented May 21, 2023

IanVS commented May 22, 2023 •

edited

Loading

IanVS commented May 22, 2023 •

edited

Loading

RodrigoTomeES commented May 22, 2023

bobalazek commented Jun 29, 2024 •

edited

Loading

IanVS commented Jun 29, 2024

bobalazek commented Jun 29, 2024

IanVS commented Jul 1, 2024

Does the plugin have Astro compatibility? #96

Does the plugin have Astro compatibility? #96

Comments

RodrigoTomeES commented May 21, 2023 • edited Loading

IanVS commented May 21, 2023

RodrigoTomeES commented May 21, 2023

IanVS commented May 21, 2023

RodrigoTomeES commented May 21, 2023

IanVS commented May 21, 2023

RodrigoTomeES commented May 21, 2023

IanVS commented May 22, 2023 • edited Loading

IanVS commented May 22, 2023 • edited Loading

RodrigoTomeES commented May 22, 2023

bobalazek commented Jun 29, 2024 • edited Loading

IanVS commented Jun 29, 2024

bobalazek commented Jun 29, 2024

IanVS commented Jul 1, 2024

RodrigoTomeES commented May 21, 2023 •

edited

Loading

IanVS commented May 22, 2023 •

edited

Loading

IanVS commented May 22, 2023 •

edited

Loading

bobalazek commented Jun 29, 2024 •

edited

Loading