时间戳

首页 > 解决方案 > 打字稿缺少分号 linting 错误

javascript - 打字稿缺少分号 linting 错误

问题描述

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

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;

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

到目前为止，只有我看到的解决方案建议一起关闭分号 linting 规则。假设我可以对 my 进行简单的调整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
    }
}

标签： javascriptreactjstypescripteslint

解决方案

这应该有效：

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>
    ),
  ],
};

推荐阅读