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

Posted 2023-02-21

【中文标题】TypeScript + EsLint 缩进：预期缩进 4 个空格，但发现 6

【英文标题】：TypeScript + EsLint Indent : Expected indentation of 4 spaces but found 6

【发布时间】：2020-08-17 11:46:43

【问题描述】：

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

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

各种方法都试过了，没找到解决办法，eslint提示做如下：

“缩进”：“关闭”，

"@typescript-eslint/indent": ["error"],

但不工作

.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"]

settings.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;
      
    
  
`;

错误：

【问题讨论】：

您能否将您使用的代码发布为作为文本，以便我们看到完整的上下文？屏幕截图中的弹出窗口涵盖了之前的内容

您可以将代码块发布为给出错误的文本吗？很难看到问题所在的行周围的代码。

您要解决错误还是关闭此规则？如果您想将其关闭 - 为什么要通过 error 而不是 off 为 @typescript-eslint/indent？

我现在编辑问题，基本上任何超过 4 行间距的代码都会出现此错误

@JBallin 如果有任何解决方案可以修复它，我已经看过但没有找到:(

【参考方案1】：

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

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

【讨论】：

如果 prettier 或/和 eslint 自动删除无用的括号会怎样？