react-native仕様コードEslent

3077 ワード

概要
ESLintはNichollas C.Zakasによって編纂された拡張可能なものであり、各規則が独立しており、コードスタイルが内蔵されていない、カスタムルールが理念のLintツールである.チームワークにおいて、低レベルなエラーの発生と統一コードのスタイルを避けるために、あらかじめコード規範を制定しておきます.Lintツールとコードスタイル検出ツールを使用すると、コード仕様の実行を支援し、コード品質を効果的に制御することができます.EsLintはJavascriptプログラミング時の文法エラーを確認してくれます.例えば、Javascriptの応用では、あなたが漏れる変数や方法を見つけにくいです.EsLintはJSコードの分析を助けてくれます.バグを見つけて、ある程度のJS文法表記の正確性を確保してくれます.
集積ステップ(開発ツールVCode)
ステップ1:
第一種類:プロジェクトのあるフォルダ(ルートディレクトリ)に入り、次のコマンドラインを実行します.
npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnb 
第二種類:プロジェクトのあるフォルダに入って、下記のコマンドラインを実行します.(赤色エラーが発生します.5条を実行しても構いません.)
npm install eslint --save-dev  
npm install eslint-config-airbnb --save-dev  // (airbnb   )  
npm install eslint-plugin-import --save-dev  
npm install eslint-plugin-jsx-a11y --save-dev  // (airbnb        )  
npm install eslint-plugin-react --save-dev
ステップ2:
そしてプロジェクトのルートディレクトリにbabel-eslintをインストールします.
エス6の新しい文法を使うと、バーベル-eslintをインストールする必要があります.そうでなければ、矢印関数をエラーとして認識します.
npm i --save-dev babel-eslint
ステップ3:
プロジェクトのルートディレクトリの下でファイルを作成します.eslintrc.ymlの内容は以下の通りです.必要に応じて変更できます.
extends: airbnb
parser: babel-eslint
env:
  es6: true
  browser: true
  node: true
  mocha: true
settings:
  import/resolver:
    node:
      moduleDirectory:
        - node_modules
        - ./
rules:
  arrow-body-style: 0
  max-len: 0
  no-console: 0
  vars-on-top: 0
  global-require: 0
  no-restricted-syntax: 0
  no-use-before-define: 0
  no-underscore-dangle: 0
  no-param-reassign: 0
  no-class-assign: 0
  no-extra-boolean-cast: 0
  no-nested-ternary: 0
  eol-last: 0
  radix: 0
  class-methods-use-this:
    - 0
  consistent-return: 0
  react/jsx-filename-extension:
    - error
    - extensions:
      - .jsx
      - .js
  comma-dangle:
    - error
    - functions: ignore
      imports: always-multiline
      exports: always-multiline
      objects: always-multiline
      arrays: always-multiline
  jsx-quotes:
    - 2
    - prefer-single
  react/jsx-sort-props: 0
  react/jsx-space-before-closing: 0
  react/prefer-stateless-function: 0
  react/jsx-no-bind: 0
  react/jsx-first-prop-new-line: 0
  react/react-in-jsx-scope: 0
  react/no-multi-comp: 0
  react/prop-types: 0
  react/self-closing-comp: 0
  react/jsx-boolean-value: 0
  import/no-extraneous-dependencies: 0
  import/prefer-default-export: 0
  import/no-unresolved: 0
  jsx-a11y/no-static-element-interactions: 0
  semi:
    - error
    - never
  react/no-string-refs: 0
  
注意してください.eslintrc.ymlファイルの最後の行は空欄にしてから有効になります.
別添:
警告:propType「xxx」is not required、but hasのcorese ponding default Prop declaration.(react/require-default-props)
class NavigatorDefault extends React.Component {
  static propTypes = {
    leftIcon: PropTypes.number, //    :propType "leftIcon" is not required,but has no corresponding defaultProp declaration.(react/require-default-props)
  }
}
赤色の警告を取り除く方法:
eslintrc.ymlファイルの追加は以下の通りです.
//    rules:   
react/require-default-props: 0