SolidJS自定义指令被格式化拆分且提示未定义的问题求助

我使用SolidJS搭配Vite开发，想要为div添加自定义指令，目前遇到两个问题：

问题1：自动格式化拆分use:指令 #

保存时自动格式化会将.tsx文件中的use:__指令的冒号与后面内容拆分，原本的代码：

<div use:model={...}/>

会被修改为：

<div use: model={...}/>

进而引发报错。

问题2：自定义指令提示未定义 #

我的代码结构如下：

declare module 'solid-js' {
  namespace JSX {
    interface Directives {
      model: [() => any, (v: any) => any];
    }
  }
}

export default () => {
  return <div use: model={[() => {}, () => {}]}/>
}

补充说明：ESLint配置 #

{
    "env": {
        "browser": true,
        "commonjs": true
    },
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "solid"
    ],
    "extends": [
        "airbnb-base",
        "airbnb-typescript/base",
        "plugin:solid/typescript"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": "latest",
        "project": "./tsconfig.json"
    },
    "rules": {
        "class-methods-use-this": "off",
        "no-param-reassign": "off",
        "global-require": "off",
        "consistent-return": "off",
        "max-len": "off",
        "no-console": "off",
        "import/no-dynamic-require": "off",
        "linebreak-style": "off",
        "no-new": "off",
        "no-inner-declarations": "off",
        "solid/reactivity": "off",
        "import/no-extraneous-dependencies": [
            "error",
            {
                "devDependencies": true,
                "optionalDependencies": false,
                "peerDependencies": false
            }
        ],
        "@typescript-eslint/naming-convention": [
            "error",
            {
                "selector": "variableLike",
                "leadingUnderscore": "allow",
                "trailingUnderscore": "allow",
                "format": [
                    "camelCase",
                    "PascalCase",
                    "UPPER_CASE"
                ]
            }
        ],
        "import/extensions": [
            "error",
            "ignorePackages",
            {
                "": "never",
                "js": "never",
                "jsx": "never",
                "ts": "never",
                "tsx": "never"
            }
        ]
    }
}

解决方案 #

修复自动格式化拆分use:的问题 #

这个问题是格式化工具（通常是Prettier）不识别SolidJS自定义指令语法导致的，解决步骤：

1. 安装SolidJS的Prettier插件：

   npm install -D prettier-plugin-solid
   

2. 在项目根目录创建.prettierrc文件，配置插件：

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

3. 确保编辑器（如VS Code）的默认格式化工具设置为Prettier，且开启"Format on Save"。

解决自定义指令未定义的提示 #

1. 先修正代码中的语法错误：把use: model改为use:model（去掉冒号后的空格），这是直接报错的原因。
2. 将SolidJS的类型声明放在单独的.d.ts文件中（比如src/types/solid.d.ts），确保tsconfig.json的include字段包含该文件：

   {
     "include": ["src/**/*"]
   }
   

3. 重启TypeScript语言服务（VS Code可通过Ctrl+Shift+P选择"TypeScript: Restart TS Server"），让类型声明生效。

修正后的组件代码：

export default () => {
  return <div use:model={[() => {}, () => {}]}/>
}

内容的提问来源于stack exchange，提问作者Ilja KO