JS/JSX 保存文件时自动缩进错误

Question

我在保存 JSX 或 JS 文件时遇到自动缩进问题。当我保存文件时，它缩进不正确并导致 linting 错误。

这里是js原文件

Question_4.js

import React from 'react';

import './Question_4.scss';

class Question_4 extends React.Component {
  constructor(props) {
    super(props);

  }

  handleClick = () => {
    console.log('this is question 4 clicked:', this);

  }

  render() {
    return (
        <button className="button-redirect" onClick={this.handleClick}>
          <div className="home-cta-image home-cta-image--neighborhood"></div>
        </button>
    );
  }
}

export default Question_4;

然后当我保存时 (ctrl+s)。下面显示了渲染函数中不正确的缩进。

import React from 'react';

import './Question_4.scss';

class Question_4 extends React.Component {
    constructor(props) {
        super(props);

    }

    handleClick = () => {
        console.log('this is question 4 clicked:', this);

    }

    render() {
        return ( <
            button className = "button-redirect"
            onClick = { this.handleClick } >
            <
            div className = "home-cta-image home-cta-image--neighborhood" > < /div> <
            /button>
        );
    }
}

export default Question_4;

我不确定是我的 eslint 文件还是其他地方导致了问题。

.eslintrc.json 文件

{
    "extends": [
        "airbnb"
    ],
    "parser": "babel-eslint",
    "env": {
        "browser": true
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "react/prefer-stateless-function": 0,
        "react/jsx-indent": ["error", 4],
        "react/jsx-indent-props": ["error", 4],
        "react/jsx-no-undef": ["2", { "allowGlobals": true }],
        "indent": ["error", 4],
        "comma-dangle": 0,
        "no-tabs": 0,
        "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
        "function-paren-newline": 0,
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
    }
}

Answer 1

在 VS Code 的扩展选项卡中禁用 Beautify 扩展。

我通过与我的比较检查了你的工作区设置，我在列表中看到了这个扩展的名称。然后我安装并验证了我的假设，这个扩展导致格式不正确。

JS/JSX 保存文件时自动缩进错误

JS/JSX auto indent incorrectly when saving file

javascript

jsx

reactjs

eslint

eslintrc