CODEWITHSUNDEEP
reactjsreact-nativesublimetext3eslintjsx
frankgreco
frankgreco

Reputation: 1506

Sublime Text 3 JSX Linting

My ESLint setup is giving me the following error in my React-Native app:

enter image description here

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

For some reason it wants the lines that it doesn't like to only be indented 4 spaces instead of 14 which it should be.

Here is what the linter accepts:

enter image description here

Obviously lines 25-27 is not what I want.

Is there some setting I am missing or an additional plugin that will accomplish this?

I am using:

.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"
}

ANSWER:

Changing the surrounding Image tag by using spaces instead of table solved the issue:

enter image description here

Upvotes: 0

Views: 2052

Answers (2)

Do Async
Do Async

Reputation: 4284

Use eslint-config-airbnb-standard npm module: 

npm install -g eslint-config-airbnb-standard

It installs eslint globally. It uses Airbnb style config + StandardJS config. Easy to install, works with Sublime Text 3 and WebStorm. Check installation instructions here.

enter image description here

Upvotes: 0

idleberg
idleberg

Reputation: 12882

Your code is likely indented by tabs not spaces. There's a setting that makes the visual distinction easier.

"draw_white_space": "all"

(By default it's set to "selection", so you will only see those visual cues when selecting your code)

Since the JSX linter (among others) seems to prefer spaces over tabs, you should use add the following to your user settings.

"translate_tabs_to_spaces": true
"tab_size": 2

Make sure to re-indent your code afterwards.

Upvotes: 1

Related Questions