如何正确使用 JS 编写的高亮自定义使用 Hook？答案

【问题标题】：How make correct highlight custom useHook writen in JS?如何正确使用 JS 编写的高亮自定义使用 Hook？
【发布时间】：2021-12-27 13:32:05
【问题描述】：

我使用 VS Code 在 React 中编写自定义项目。

当我写 useState 值和回调正确突出显示时，导致存在 *.d.ts

但是如果我在 JS 中编写自定义钩子useOfferObserver，我可以在我的函数中添加任何规范以正确突出显示吗？

我希望setFieldData 与setFormError 具有相同的颜色

export const useOfferObserver = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const subscriberID = uuidv4()
    offerDL.subscribe(subscriberID, () => setCount(count + 1))
    return () => offerDL.unSubscribe(subscriberID)
  }, [])

  return [offerDL, (data) => {
    console.log('Data should be updated', data)
  }]
}

【问题讨论】：

什么颜色有误，useState 和useOfferObserver 使用工具提示的类型是什么，正确和不正确颜色的东西的 TextMate 范围是什么
@rioV8 我添加到问题：我希望 setFieldData 与 setFormError 具有相同的颜色我没有使用 TextMate
根据tooltipssetFieldData和setFormError的类型是什么，如果不是语法高亮就是语义高亮，找出语义范围的区别
@rioV8 我解释的不同之处：useState 有 index.d.ts，其中这个函数是固定类型的。我添加屏幕截图。 useOfferObserver 是用 JS 编写的，而不是 TypeScript 这就是颜色不同的原因。我的问题可能是我可以在函数头中添加任何正确的注释，并且 VS 可以理解参数类型。
是的，看看函数的工具提示，它应该显示它的类型，你的函数返回一个数组，第二个索引是一个void函数，useState返回一个Dispatch<...>（为什么发布文本文件中的图像）作为第二个结果，您可以将 JSDOC 添加到您的 JavaScript 函数中以引导智能感知

标签： javascript visual-studio-code react-hooks syntax-highlighting

【解决方案1】：

@rioV8 cmets 之后我找到了分辨率。

它是为我的自定义钩子添加 JSDoc。

/**
* This callback is displayed as part of the Requester class.
* @callback SetterCallback
* @param {object} data
*/
/**
* @returns {[offerData: Object, setter: SetterCallback]}
*/
export const useOfferObserver = () => {
  const [, setTime] = useState(performance.now())

  return [offerDL, (data, skipBackendRequest = false) => {
    return offerDL.update(data, skipBackendRequest)
      .then(() => setTime(performance.now()))
  }]
}

之后我的钩子有正确的突出显示。

【讨论】：