如何在VS Code中保持'use client'语句位于代码顶部？

方法1：使用Next.js官方Prettier插件 #

安装官方插件，它会自动识别并保留'use client'/'use server'指令在文件顶部的位置：

npm install --save-dev prettier-plugin-nextjs

然后在Prettier配置文件（比如.prettierrc或prettier.config.js）中添加插件：

{
  "plugins": ["prettier-plugin-nextjs"]
}

方法2：禁用VS Code自带的自动组织导入功能 #

如果是VS Code的source.organizeImports功能导致的移动，而非Prettier，可以关闭自动保存时的组织导入：
打开设置（快捷键Ctrl+,/Cmd+,），搜索editor.codeActionsOnSave，将source.organizeImports设为false。或者直接在settings.json中添加：

{
  "editor.codeActionsOnSave": {
    "source.organizeImports": false
  }
}

方法3：使用块级Prettier忽略指令 #

单个// prettier-ignore无效时，用块级忽略包裹'use client'语句：

// prettier-ignore-start
'use client';
// prettier-ignore-end

import React from 'react';
// 其他导入语句

方法4：自定义Prettier导入排序规则 #

如果不想用官方插件，可以通过@trivago/prettier-plugin-sort-imports插件自定义导入顺序，把'use client'放在最前面：

1. 安装插件：

npm install --save-dev @trivago/prettier-plugin-sort-imports

2. 在Prettier配置中设置导入顺序，将特殊指令单独分组：

{
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": ["^'use client'$", "^@/", "^[./]"],
  "importOrderSeparation": true
}

内容的提问来源于stack exchange，提问作者Chris Hunter-Johnson