Sublime Text 3 JSX 检测答案

【问题标题】：Sublime Text 3 JSX LintingSublime Text 3 JSX 检测
【发布时间】：2016-08-19 18:48:01
【问题描述】：

我的 ESLint 设置在我的 React-Native 应用程序中出现以下错误：

Mixed spaces and tabs: Expected indentation of 4 space characters but found 14.

出于某种原因，它希望它不喜欢的行只缩进 4 个空格，而不是应该缩进 14 个空格。

这是 linter 接受的内容：

显然第 25-27 行不是我想要的。

是否有一些我缺少的设置或可以完成此操作的附加插件？

我正在使用：

ESLint
崇高文本 3
用于 JSX 高亮的 Sublime Babel 插件
以下.eslintrc
以下 eslint 插件/依赖项

.eslintrc

{
    "extends": ["airbnb/base", "plugin:react/recommended"],
    "plugins": [
        "react",
        "react-native"
    ],
    "env": {
        "node": true,
        "jasmine": true,
        "es6": true
    },
    "rules": {
        "indent": ["error", 2],
        "no-console": 0,
        "no-unused-vars": [1, {"vars": "local", "args": "none"}],
        "react/forbid-prop-types": 1,
        "react/jsx-boolean-value": 1,
        "react/jsx-closing-bracket-location": 1,
        "react/jsx-curly-spacing": 1,
        "react/jsx-indent-props": 1,
        "react/jsx-key": 1,
        "react/jsx-max-props-per-line": 1,
        "react/jsx-no-duplicate-props": 1,
        "react/jsx-no-undef": 1,
        "react/jsx-quotes": 0,
        "jsx-quotes": 1,
        "react/sort-prop-types": 1,
        "react/jsx-sort-props": 1,
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1,
        "react/no-danger": 1,
        "react/no-did-mount-set-state": 1,
        "react/no-did-update-set-state": 1,
        "react/no-direct-mutation-state": 1,
        "react/no-multi-comp": 1,
        "react/no-set-state": 1,
        "react/no-unknown-property": 1,
        "react/prefer-es6-class": 1,
        "react/prop-types": 1,
        "react/react-in-jsx-scope": 1,
        "react/require-extension": 1,
        "react/self-closing-comp": 1,
        "react/sort-comp": 1,
        "react/wrap-multilines": 1,
        "id-length": 0,
        "react-native/no-unused-styles": 2,
        "react-native/split-platform-components": 2
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "ecmaFeatures": {
          "jsx": true
        }
    }
}

package.json

{
  "name": "pluralReact",
  "version": "0.0.0",
  "description": "template",
  "author": "= <=> (=)",
  "private": true,
  "main": "main.js",
  "exp": {
    "sdkVersion": "5.0.0"
  },
  "dependencies": {
    "react": "^0.14.5",
    "react-native": "github:exponentjs/react-native#sdk-5.0.0"
  },
  "devDependencies": {
    "eslint": "^2.8.0",
    "eslint-config-airbnb": "^8.0.0",
    "eslint-config-airbnb-base": "^1.0.3",
    "eslint-plugin-import": "^1.6.0",
    "eslint-plugin-jsx-a11y": "^1.0.2",
    "eslint-plugin-react": "^5.0.1",
    "eslint-plugin-react-native": "^1.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "license": "ISC"
}

回答：

通过使用空格而不是表格来更改周围的图像标签解决了这个问题：

【问题讨论】：

您确定使用空格而不是制表符进行缩进吗？您可能希望将此设置添加到您的用户首选项中："translate_tabs_to_spaces": true
我添加了使用偏好，但它没有帮助，因为问题是它只需要 4 个空格而不是更多。查看我的编辑，了解 linter 认为正确的内容。
启用给定设置后，您仍然需要重新缩进。您的屏幕截图很难判断您当前使用的是制表符还是空格，设置 "draw_white_space": "all" 有助于在视觉上区分两者。
好收获。查看我的编辑和对我现在收到的错误消息的编辑
在<Image之前使用相同类型的缩进会改变吗？

标签： reactjs react-native sublimetext3 eslint jsx

【解决方案1】：

使用 eslint-config-airbnb-standard npm 模块：

npm install -g eslint-config-airbnb-standard

它会在全球范围内安装eslint。它使用 Airbnb 样式配置 + StandardJS 配置。易于安装，适用于 Sublime Text 3 和 WebStorm。检查installation instructions here。

【讨论】：

【解决方案2】：

您的代码可能由制表符而不是空格缩进。有一个设置可以让视觉区分更容易。

"draw_white_space": "all"

（默认设置为"selection"，因此您在选择代码时只会看到这些视觉提示）

由于 JSX linter（以及其他）似乎更喜欢空格而不是制表符，因此您应该使用将以下内容添加到您的用户设置中。

"translate_tabs_to_spaces": true
"tab_size": 2

确保之后重新缩进代码。

【讨论】：