[英]Use ESLint with Airbnb style and tab (React.js)
我正在开发一个 React.js 应用程序,我正在尝试检查我的代码。 我将 ESLint 与 Airbnb 风格结合使用,但出现以下错误:
../src/Test.jsx
4:2 error Unexpected tab character no-tabs
5:2 error Unexpected tab character no-tabs
5:3 error Expected indentation of 2 space characters but found 0 react/jsx-indent
6:2 error Unexpected tab character no-tabs
这是我的代码:
测试.jsx:
import React from 'react';
function Test() {
return (
<h1>Test</h1>
);
}
export default Test;
.eslintrc:
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
"indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
"react/prop-types": 0,
"react/jsx-indent-props": [2, "tab"],
}
}
正如您在上面看到的,我想用制表符缩进。
webpack.config.js:
loaders: [{
test: /\.jsx$|\.js$/,
loaders: ["babel-loader", "eslint-loader"],
exclude: /node_modules/
},
...
]
我还尝试缩进为什么 2 个空格,但没有成功。 我真的不明白为什么我有这些错误。 你有好主意吗?
谢谢!
正如@ mark-willian告诉我的那样,我在.eslintrc中添加了一些行并且它有效:
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
"indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
"no-tabs": 0,
"react/prop-types": 0,
"react/jsx-indent": [2, "tab"],
"react/jsx-indent-props": [2, "tab"],
}
}
谢谢你的所有答案。
airbnb规则要求您使用空格而不是制表符来格式化代码。 优秀的编辑器(sublime是一个!)将允许您使用选项卡,但在保存代码时将它们转换为空格。
你需要改变sublime的配置; 转到首选项 - 设置并自定义以下设置:
"tab_size": 2,
"translate_tabs_to_spaces": true
Sublime将转换您现有的代码 - 单击右下方状态栏中显示标签或空格的文本。
如果(例如)某个airbnb规则与您的编码风格指南不匹配,您可以有选择地关闭eslint规则。
在webpack配置中使用此eslint-loader
选项启用ESLint自动修复功能也是一个好主意。
您可以在出现无制表符错误的页面上添加此评论。
/* eslint-disable */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.