TypeScript + EsLint 缩进：预期缩进 4 个空格，但发现 6

Question

您好，我有以下缩进错误：

预期缩进 4 个空格，但发现 6.eslint(@typescript-eslint/indent)

我已经尝试了所有方法，但我找不到任何解决方案，eslint 指示执行以下操作：

“缩进”：“关闭”，

“@typescript-eslint/indent”：[“错误”]，

但不工作

.eslintrc ：

// .eslintrc
{
  "plugins": ["prettier", "@typescript-eslint"],
  "extends": ["airbnb-typescript", "react-app", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      }
    }
  },
  "rules": {
    "indent": "off",
    "@typescript-eslint/indent": ["error"],
    "quotes": [2, "single", { "avoidEscape": true }],
    "object-curly-spacing": ["warn", "always"],
    "no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "args": "none"
      }
    ],
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "args": "none"
      }
    ],
    "@typescript-eslint/no-explicit-any": [
      "error",
      {
        "ignoreRestArgs": true
      }
    ],
    "max-len": [
      "warn",
      {
        "code": 80,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreComments": true
      }
    ],
    "no-plusplus": [
      "error",
      {
        "allowForLoopAfterthoughts": true
      }
    ],
    "react/jsx-key": "error",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "**/*.test.js",
          "**/*.test.jsx",
          "**/*.test.ts",
          "**/*.test.tsx",
          "src/tests/**/*"
        ]
      }
    ],
    "react/jsx-props-no-spreading": "off",
    "import/prefer-default-export": "off",
    "react/jsx-boolean-value": "off",
    "react/prop-types": "off",
    "react/no-unescaped-entities": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-wrap-multilines": "off",
    "react/destructuring-assignment": "off"
  }
}

.prettierrc ：

{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "bracketSpacing": true
}

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "types": ["node", "@emotion/core"],
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": "src",
    "noImplicitAny": false,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

设置.json

{
    "workbench.colorTheme": "Dracula",
    "editor.formatOnSave": true,
    "explorer.confirmDragAndDrop": false,
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.fontSize": 18,
    "editor.lineHeight": 24,
    "window.zoomLevel": 0,
    "explorer.confirmDelete": false,
    "editor.rulers": [
        80,
        120
    ],
    "editor.tabSize": 2,
    "editor.renderLineHighlight": "gutter",
    "terminal.integrated.fontSize": 14,
    "emmet.syntaxProfiles": {
        "javascript": "jsx"
    },
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "javascript.updateImportsOnFileMove.enabled": "never",
    "breadcrumbs.enabled": true,
    "editor.codeActionsOnSave": {
        // For ESLint
        "source.fixAll.eslint": true,
    },
    "typescript.updateImportsOnFileMove.enabled": "always",
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

有错误的代码：

  &:hover {
    border-left: ${(props: ListItem) => (props.open ? '' : '3px orange solid')};
    background: ${(props: ListItem) =>
      props.open ? `${shade(0.4, '#3c8dbc')}` : `${shade(0.4, '#3c8dbc')}`};
    ${ListWrap} {
      :after {
        content: '';
        position: absolute;
        display: ${(props: IListItem) =>
          props.isDropDown && props.open === false ? 'block' : 'none'};
        right: 0px;
        width: 0;
        overflow: hidden;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid ${shade(0.2, '#3c8dbc')};
        clear: both;
        z-index: 11;
      }
    }
  }
`;

错误：

Answer 1

你试过这个吗？ 这应该通过在多行语句周围加上括号来解决。

 display: ${(props: IListItem) => (
   props.isDropDown && props.open === false ? 'block' : 'none'
 )}