崇高なテキスト3 JSXリンティング

Question

マイESLintのセットアップは私のリアクト - ネイティブアプリで私に次のエラーを与えている：

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

はいくつかの理由、それは好きではないラインにしたいです14の代わりに4つのスペースをインデントする必要があります。ここで

はリンターが受け入れるものです：

明らかライン25-27私が欲しいものではありません。

設定がありませんか、これを実現する追加のプラグインがありますか？

私が使用しています：

• ESLint
• 崇高なテキスト3
JSXは
• 次eslintプラグイン/依存関係

.eslintrc次

を強調するための

崇高バベルプラグイン

.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：

が

Answer 1

あなたのコードは次のとおりです。代わりに、テーブルのスペースを使用することにより、周囲の画像タグを変更

は、問題を解決しましたスペースではなくタブでインデントされる可能性があります。視覚的な区別を容易にする設定があります。

"draw_white_space": "all" 

（デフォルトでは"selection"に設定されていますので、あなたのコードを選択したときにのみ、それらの視覚的な手がかりが表示されます）

（とりわけ）JSXリンタは、タブ上のスペースを好むように見えるので、あなたが使用する必要がありますあなたのユーザー設定に以下を追加してください。

"translate_tabs_to_spaces": true 
"tab_size": 2 

その後にコードを再インデントしてください。

Answer 2

使用eslint-CONFIG-airbnb標準 NPMモジュール：

npm install -g eslint-config-airbnb-standard 

それがグローバルeslintをインストールします。 Airbnbスタイルのconfig + StandardJS設定を使用します。簡単にインストールでき、Sublime Text 3とWebStormで動作します。 installation instructions hereを確認してください。