react-native仕様コードEslent
3077 ワード
概要
ESLintはNichollas C.Zakasによって編纂された拡張可能なものであり、各規則が独立しており、コードスタイルが内蔵されていない、カスタムルールが理念のLintツールである.チームワークにおいて、低レベルなエラーの発生と統一コードのスタイルを避けるために、あらかじめコード規範を制定しておきます.Lintツールとコードスタイル検出ツールを使用すると、コード仕様の実行を支援し、コード品質を効果的に制御することができます.EsLintはJavascriptプログラミング時の文法エラーを確認してくれます.例えば、Javascriptの応用では、あなたが漏れる変数や方法を見つけにくいです.EsLintはJSコードの分析を助けてくれます.バグを見つけて、ある程度のJS文法表記の正確性を確保してくれます.
集積ステップ(開発ツールVCode)
ステップ1:
第一種類:プロジェクトのあるフォルダ(ルートディレクトリ)に入り、次のコマンドラインを実行します.
そしてプロジェクトのルートディレクトリにbabel-eslintをインストールします.
エス6の新しい文法を使うと、バーベル-eslintをインストールする必要があります.そうでなければ、矢印関数をエラーとして認識します.
プロジェクトのルートディレクトリの下でファイルを作成します.eslintrc.ymlの内容は以下の通りです.必要に応じて変更できます.
別添:
警告:propType「xxx」is not required、but hasのcorese ponding default Prop declaration.(react/require-default-props)
eslintrc.ymlファイルの追加は以下の通りです.
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