Consider adding instructions on how to have VS Code use these same configs to format files.

[andrecasal]

Search Terms Used

vs code, prettier, configuration, formatOnSave, format on save

Config Docs

None

Suggested Change

Add instructions on how to have VS Code use these same configs to format files

Code format before the change

N.A.

Code format after the change

N.A.

Issues without the change

N.A.

Severity of inaction

N.A.

Additional Context

No response

[kentcdodds]

If you configure tools as suggested by the Readme currently, VSCode should just pick those configurations up automatically. I'm not sure what instructions I would include.

[andrecasal]

Maybe something's amiss. I just can't get these Prettier configs to take with formatOnSave.

[andrecasal]

I enabled Prettier's debug logs.

It seems to take up a local Prettier config, but it doesn't tell me which one. It doesn't seem to have taken to the @epic-web/config/prettier config (otherwise the files would format correctly).

There's no .prettierrc or .editorconfig files in my repo.

[kentcdodds]

If you set it up the way we describe in the readme then it'll be in your package.json and that's what it should pick up. Based on that output it's getting the right config. Sorry, I'm not sure why it's not working for you.

[andrecasal]

I did.

This has got me stumped.

Even the logs say "semi": false, but its not removing semi-colons or applying any other formatting on the config.

["INFO" - 7:35:08 PM] Using config file at /Users/andrecasal/Developer/Apps/launchfast.pro/package.json
["INFO" - 7:35:08 PM] PrettierInstance:
{
  "modulePath": "/Users/andrecasal/Developer/Apps/launchfast.pro/node_modules/prettier/index.cjs",
  "messageResolvers": {},
  "version": "3.3.3"
}
["INFO" - 7:35:08 PM] Using ignore file (if present) at /Users/andrecasal/Developer/Apps/launchfast.pro/.prettierignore
["INFO" - 7:35:08 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 7:35:08 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 7:35:08 PM] Prettier Options:
{
  "filepath": "/Users/andrecasal/Developer/Apps/launchfast.pro/playwright.config.ts",
  "parser": "typescript",
  "__esModule": true,
  "config": {
    "arrowParens": "always",
    "bracketSameLine": false,
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "endOfLine": "lf",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxSingleQuote": false,
    "printWidth": 80,
    "proseWrap": "always",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": false,
    "singleAttributePerLine": false,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "all",
    "useTabs": true,
    "overrides": [
      {
        "files": [
          "**/package.json"
        ],
        "options": {
          "useTabs": false
        }
      },
      {
        "files": [
          "**/*.mdx"
        ],
        "options": {
          "proseWrap": "preserve",
          "htmlWhitespaceSensitivity": "ignore"
        }
      }
    ],
    "plugins": [
      "prettier-plugin-tailwindcss"
    ],
    "tailwindAttributes": [
      "class",
      "className",
      "ngClass",
      ".*[cC]lassName"
    ],
    "tailwindFunctions": [
      "clsx",
      "cn",
      "cva"
    ]
  },
  "default": {
    "arrowParens": "always",
    "bracketSameLine": false,
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "endOfLine": "lf",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxSingleQuote": false,
    "printWidth": 80,
    "proseWrap": "always",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": false,
    "singleAttributePerLine": false,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "all",
    "useTabs": true,
    "overrides": [
      {
        "files": [
          "**/package.json"
        ],
        "options": {
          "useTabs": false
        }
      },
      {
        "files": [
          "**/*.mdx"
        ],
        "options": {
          "proseWrap": "preserve",
          "htmlWhitespaceSensitivity": "ignore"
        }
      }
    ],
    "plugins": [
      "prettier-plugin-tailwindcss"
    ],
    "tailwindAttributes": [
      "class",
      "className",
      "ngClass",
      ".*[cC]lassName"
    ],
    "tailwindFunctions": [
      "clsx",
      "cn",
      "cva"
    ]
  }
}
["INFO" - 7:35:08 PM] Formatting completed in 14ms.

[andrecasal]

I've added an issue on Prettier's VS Code extension repo if anyone trips into the same issue.