[SOLVED] How to keep 'use client' at the top of the code in Vs code

How to keep 'use client' at the top of the code in Vs code

I am looking to use the NextJs app directory. For client-side components, it requires the statement 'use client' at the top of the file. Vs Code moves this statement from the top of the file to after the import statements.

The command // prettier-ignore does not stop it from moving.

How do I stop Vs Code / prettier from doing this?

Solution

By adding "use client" to the top of the importOrder preferences in a prettier config you can keep it at the top. Here is an example of my prettier.config.cjs file:

/** @type {import('prettier').Config} */
module.exports = {
  endOfLine: "lf",
  semi: false,
  singleQuote: false,
  tabWidth: 2,
  trailingComma: "es5",
  importOrder: [
    "use client",
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^types$",
    "^@/types/(.*)$",
    "^@/config/(.*)$",
    "^@/lib/(.*)$",
    "^@/hooks/(.*)$",
    "^@/components/ui/(.*)$",
    "^@/components/(.*)$",
    "^@/styles/(.*)$",
    "^@/app/(.*)$",
    "",
    "^[./]",
  ],
  importOrderSeparation: false,
  importOrderSortSpecifiers: true,
  importOrderBuiltinModulesToTop: true,
  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
  importOrderMergeDuplicateImports: true,
  importOrderCombineTypeAndValueImports: true,
  plugins: [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss",
  ],
}