Question

保存JSX或JS文件时出现自动缩进问题。保存文件时，文件缩进不当并导致掉毛错误。

这是原始的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自动缩进不正确

1 个答案: