У меня проблема с автоматическим отступом при сохранении файлов 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 file
{
"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"] }]
}
}