withastro / prettier-plugin-astro

Prettier plugin for Astro
Other
475 stars 33 forks source link

🐛 BUG: adding duplicate import statment #425

Closed xkeshav closed 1 month ago

xkeshav commented 1 month ago

Describe the Bug

done all required settings for Astro project along with eslint and prettier plugin but when , save the file ; the last import statment being added below and the duplicate import statement error comes and when remove and save the file ; it again add the import statement

below are frelevent ile content

project.code-worspace

{
"prettier.documentSelectors": [
      "**/*.astro"
    ],
    "[astro]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.codeActionsOnSave": {
        "source.fixAll": "always",
        "source.organizeImports": "always"
      }
    }
}

package.json

  "devDependencies": {
    "prettier": "3.1.0",
    "prettier-plugin-astro": "^0.14.1"
}

.prettierrc.mjs ( Not Working )

/** @type {import("prettier").Config} */
export default {
  plugins: ['prettier-plugin-astro'],
  overrides: [
    {
      files: '*.astro',
      options: {
        parser: 'astro',
      },
    },
  ],
};

.prettierrc.js


/** @type {import("@types/prettier").Options} */
module.exports = {
  printWidth: 120,
  semi: true,
  singleQuote: false,
  tabWidth: 2,
  useTabs: false,
  bracketSpacing: true,
  arrowParens: "always",
  endOfLine: "lf",
  trailingComma: "none",
  htmlWhitespaceSensitivity: "css",
  plugins: ["prettier-plugin-astro"],
  overrides: [
    {
      files: "*.astro",
      options: {
        parser: "astro"
      }
    }
  ]
};

src/pages/about.astro

---
import Header from "@/components/Header";
import Layout from "@/layouts/Layout";
---

<Layout title="About Us">
  <Header title="About Us">
    <div>popover content</div>
  </Header>
  <main>
    <div>
      <h1>Hello There</h1>
    </div>
  </main>
</Layout>

when we hit save ; one more duplicate import statement getting added as below

---
import Header from "@/components/Header";
import Layout from "@/layouts/Layout";
import Layout from "@/layouts/Layout";
---

NOTE: functionality is working fine ( tsconfig has path alias and we are using that )

Steps to Reproduce

  1. npm init astro using template blog
  2. install eslint and prettier and prettier-plugin-astro
  3. added the .prettierrc.js file ( .mjs not working )
  4. Format on save setting added in workspace ( VS Code )
  5. import Layout file ( .astro ) in one of .astro file
  6. Hit Save ( Ctrl + S ) then import statment get duplicated
Princesseuh commented 1 month ago

Make sure you're using the latest version of the VS Code extension. The Prettier plugin is not at fault here.

xkeshav commented 1 month ago

Issue is connected with this below issue

https://github.com/withastro/language-tools/issues/933