Reactプロジェクトノートのcreat-react-apカスタムESLintプロファイル

元のブログアドレス:https://yezihaohao.github.io
前言
eslintの基礎的な使い方を知っています.それをもっと知りたいなら、公式サイトと関連資料(中国語ネット)を見てください.

          264591039    。

初期化項目
creat-react-apを使用してプロジェクトを作成し、npm run ejectを実行してwebpackなどのプロファイルを暴露させる.
カスタムeslint
上記の手順はreact足場パッケージのeslint操作を暴露していません.プロジェクトを統一的に規範化するために、jsx-eslintを追加するのは非常に良い選択です.

プロジェクトのルートディレクトリに追加します.eslintrcファイル

ルートディレクトリでconfigフォルダを見つけ、フォルダ下のwebpack.co.nfig.dev.jsファイル

を見つけました.

webpack.co.fig.dev.jsファイルには以下のコードが追加されています.

enforce: 'pre',
use: [{
  // @remove-on-eject-begin
  // Point ESLint to our predefined config.
  options: {
    //configFile: path.join(__dirname, '../.eslintrc'),
    useEslintrc: true
  },
  // @remove-on-eject-end
  loader: 'eslint-loader'
}],

はnpm startを実行します.この時、あなたが作成したjsxファイルは全部通過します.eslintrcの構成制限

.eslintrcファイルの基本仕様構成ps:で構成されたvalueの対応する値:0:off 1:warning 2:errorは以下の仕様設定を満たしていません.コードをコンパイルする時、黄色のヒントがあります.具体的な構成ルールはGithubを参照してください.

{
  "extends": "react-app",
  "rules": {
    "no-multi-spaces": 1,
    "react/jsx-space-before-closing": 1,        //                 ，           
    "jsx-quotes": 1,
    "react/jsx-closing-bracket-location": 1,    //   JSX    /  
    "react/jsx-boolean-value": 1,               //        true,       
    "react/no-string-refs": 1,      //    Refs       
    "react/self-closing-comp": 1,    //                     
    "react/jsx-no-bind": 1,          //    render()           ，          this     
    "react/sort-comp": 1,            //        React.createClass            
    "react/jsx-pascal-case": 1        // React          ，         
  }
}