typescript 缺少分号 linting 错误

Question

所以我有一个故事书项目，其中的故事文件如下：

import { Meta } from '@storybook/react';

// Replacing the <Story/> element with a Story function is also a good way of writing decorators.
// Useful to prevent the full remount of the component's story.
export default {
  component: YourComponent,
  decorators: [
    (Story) => (
      <div style={{ margin: '3em' }}>
        {Story()}
      </div>
    ),
  ],
} as Meta;

工作正常，但我在这里 } as Meta; 收到一个 eslint 错误，关于在 } 之后缺少分号，这显然是行不通的。

到目前为止，我看到的唯一解决方案建议只一起关闭分号 linting 规则。假设我可以对我的 eslintrc.json 进行简单的调整，但还没有遇到它。

eslintrc.json

{
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        }
    },
    "env": {
        "browser": true,
        "jquery": true,
        "es6": true,
        "jest": true
    },
  "extends": [ "eslint:recommended", "plugin:react/recommended" ],
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
    "block-spacing": "error",
    "brace-style": "error",
    "comma-spacing": "error",
    "complexity": ["error", 21],
    "curly": "error",
    "dot-location": [
      "error",
      "property"
    ],
    "guard-for-in": "error",
    "indent": [
      "error",
      2,
      { "SwitchCase": 1 }
    ],
    "key-spacing": "error",
    "keyword-spacing": "error",
    "lines-between-class-members": "error",
    "max-depth": "error",
    "new-cap": "error",
    "no-eval": "error",
    "no-whitespace-before-property": "error",
    "react/jsx-tag-spacing": "error",
    "react/prop-types": 0,
    "semi": [
      "error",
      "always"
    ],
    "space-before-blocks": "error",
    "space-infix-ops": "error"
  },
    "globals": {
        "process": true,
        "maestroStrings": true,
        "GLOBAL_BrowserTimeZone": true,
        "profiseeConfig": true,
        "Mdm": true,
        "apiRequestVerificationToken": true,
        "LoadReportPart": true,
        "FilterSortDialog": true,
        "module": true,
        "global": true,
        "_profHandling401": true
    }
}

Answer 1

这应该有效：

const Meta = {
  component: YourComponent,
  decorators: [
    (Story) => (
      <div style={{ margin: '3em' }}>
        {Story()}
      </div>
    ),
  ],
};

export { Meta as default };

如果你想要一个命名导出，你也可以这样做：

export const Meta = {
  component: YourComponent,
  decorators: [
    (Story) => (
      <div style={{ margin: '3em' }}>
        {Story()}
      </div>
    ),
  ],
};

Answer 2

逃过一劫，但无法弄清楚 story prop

的类型导入

const Story = {
  component: ContextButton,
  title: "ContextButton",
  argTypes: { onClick: { action: "Button clicked" },  },
  decorators: [
    // should be narrowed down from `any` to `StoryFnReactReturnType` but can't find the type import for it 
    (story: () => any) => (
      <div style={{height: "90vh", width: "90vw", display: "flex", "alignItems": "center", "justifyContent": "center"}}>
        {story()}
      </div>
    ),
  ],
}; 
export { Story as default };

typescript 缺少分号 linting 错误

Missing semicolon linting error with typescript

javascript

typescript

reactjs

eslint