GeoPr's questions

const Component = () => {
    const fn = () => {};
    const fromHook = useSomething(fn);
}

钩：

const useSomething = callback => {
    const hookFn = useCallback(() => callback(), [callback])
    return hookFn;
};

我是否需要将它包装fn在组件中的 useCallback 以避免不必要的渲染，或者它不会有帮助，只会让情况变得更糟？

有一个代码：

export const Test = () => {
  return (
    <div className="div" id="div" onClick={() => {}} onKeyDown={() => {}} onBlur={() => {}}>
      <span></span>
    </div>
  );
};

使用 prettier 格式化后，如下所示：

<div
  className="div"
  id="div"
  onClick={() => {}}
  onKeyDown={() => {}}
  onBlur={() => {}}>
  <span></span>
</div>

它需要是这样的：

<div
  className="div"
  id="div"
  onClick={() => {}}
  onKeyDown={() => {}}
  onBlur={() => {}}
>
  <span></span>
</div>

是否有相同的更漂亮或其他插件的任何设置？

例如，有一个函数：

const fn = par => par;

通过 Prettier 格式化后，它在参数中添加了可选的括号，如何解决？

const fn = (par) => par;

有一个片段，当它被调用时，它将 var 定义为好像这是光标的位置，如何确保不会发生这种情况，我试图在 var 之前添加另一个 $ - 它不起作用。

{
    "": {
        "scope": "scss",
        "prefix": "mdcn",
        "body": [
            "@media (max-width: $var) {",
            "\t$0",
            "}"
        ],
        "description": ""
    }
}

Gulp 有一个 gulp-webp 插件，可以将图像转换为 .webp 格式

是否有 webpack 的类似物以及如何使用它？