webpack複数ページ応用アーキテクチャシリーズ(9):いつも意地悪な人が余を害したいです.ESLintはあなたのためにごみコードをブロックします.

この文章は最初に
Aray_Huangの技術ブログ―― 、著作者の同意なしに転載しないでください.
原文の住所:https://segmentfault.com/a/1190000007030775このシリーズの文章に興味があるなら、ここに注目してください.https://segmentfault.com/blog/array_huang前言
意地悪な人、まだ退きませんか?あ、人が来たら、助けてください.
あなたのチームには「ネズミの糞」がありますか?飛んでいるように見えますが、実は分かりにくいコードを書くということですか?または字下げて改行しますか?
コードを書くのはとても不注意ですか?いつもいくつか文法の誤りを落として、debugは起きて死にたいですか?
以上の問題があれば、ESLINEが助けてくれます.[手動滑稽]
ESLintの用途は?
上の二つのアプリケーションの場面から、ESLintは何をするものか大体分かりました.

コードがコード仕様と統一されたコードスタイルに合致しているかどうかを審査する.

コードに文法エラーがあるかどうかを審査する.

文法の間違いはいいです.コード規範とコードスタイルはどう審査しますか?ESLintは設定可能項目として多くの規則を定義しました.同時に、いくつかの大手企業は彼らが使っている配置(例えばairbnb)を元にして、ある既成の配置に基づいて修正して、あなた達のチームに合うコード仕様とコードスタイルに修正してもいいです.
この文章は主に何を言いますか?
この記事では、どうやってwebpackにESLINEを統合するかに焦点を当て、ESLINE自体を紹介しないので、ESLINEを使ったことのない仲間については、まず自分で入門してみてください.
webpackはどうやってESLINEを統合しますか?
今回はeslint-loaderまで使用して、まず配置コードを放出します.

/*   webpack       ，       */
{
  module: {
    preLoaders: [{
      test: /\.js$/, //    js  
      loader: 'eslint', //     eslint-loader
      include: dirVars.srcRootDir, //                   
      exclude: [/bootstrap/], //         eslint     
    }],
  },
  eslint: {
    configFile: path.resolve(dirVars.staticRootDir, './.eslintrc'), //   eslint        
    failOnWarning: true, // eslint warning    webpack  
    failOnError: true, // eslint error    webpack  
    cache: true, //   eslint cache，cache  node_modules/.cache   
  }
}

次に、このeslint-loaderの構成を説明します.
そのために、preLoadersではなく、eslint-loaderをloadersに置くのですか?
理論的にはloadersに入れても大丈夫ですが、pre Loadersに入れると以下のような利点があります.

pre Loaderに置くとloaderより先になりますので、ESLintが問題を審査してwarning/errorを報告した時は止まってしまいます.少し時間を節約できます.

babelを使用した場合、または同様のloaderを使用した場合、webpackコンパイルを通じて前後のコードの差が大きくなります.これは2つの問題を引き起こします.

babelはあなたのコードをどのようにあなた自身がコントロールできないに変えて、これはよくESListの審査を通すことができないことを招きます.

私達は実際にはコンパイル後に発生するコードには関心がないです.私達は自分で手書きしたコードを管理するだけでいいです.誰もコンパイルしたコードを読むことができないでしょう.

どうやってeslint-loaderに伝えますか?
eslint-loader公式文書から、eslint-loaderの構成はやはり多くて複雑であり、独立した構成項目eslintを採用していることが分かります.
締め括りをつける
自分のチームでESLINEを成功させることができれば、少なくとも、それらの奇異なコードを見なくても大丈夫です.だって、それらは全部コンパイルして通過しません.ハハハ.
後の話
webpackを通じてESLintを統合して、コンパイルによって生成されたコードは文法的なエラーがなく、コード仕様に合うことを保証できます.しかし、開発の過程で、コンパイルをしてから問題が遅すぎるかもしれません.
そこで私はESLINEをエディタやIDEに統合して、私自身がmoduleを使っているように、Sublime Text 3というプラグインを使ってもいいです.問題のあるコードを書いたらすぐに識別します.
サンプルコード
皆さんはこのシリーズの文章を見て、私のGithub上の足場プロジェクトに合わせて食べたほうがいいですよ(笑):アラ-Huing/webpack-seed(SublimeLinter).
シリーズの記事カタログを添付します(同期更新)

webpack複数ページアプリケーションアーキテクチャシリーズ(一):一歩ずつアーキテクチャの痛みを解決する:https://github.com/Array-Huang/webpack-seed

webpack複数ページアプリケーションアーキテクチャシリーズ(二):webpack構成の常用部分は何ですか?https://segmentfault.com/a/1190000006843916

webpack複数ページアプリケーションアーキテクチャシリーズ(三):共通コードをどうやって梱包すれば重複を回避できますか?https://segmentfault.com/a/1190000006863968

webpack複数ページアプリケーションアーキテクチャシリーズ(四):旧式jQueryプラグインはまだなくしてはいけませんが、どう対応していますか?https://segmentfault.com/a/1190000006871991

webpack複数ページアプリケーションアーキテクチャシリーズ(五):webpackはless/cssまで包装できると聞きました.https://segmentfault.com/a/1190000006887523

webpack複数ページアプリケーションアーキテクチャシリーズ(六):webpackは写真とフォントも包装できると聞きました.https://segmentfault.com/a/1190000006897458

webpack多ページ応用アーキテクチャシリーズ(七):開発環境、生産環境が馬鹿で分かりません.https://segmentfault.com/a/1190000006907701

webpackマルチページアプリケーションアーキテクチャシリーズ(8):コーチはES 6を書きます.webpackはどうやってBabelを統合しますか?https://segmentfault.com/a/1190000006952432

webpack多ページ応用アーキテクチャシリーズ(9):いつも意地悪な人が余を害したいです.ESLintはごみコードをブロックします.https://segmentfault.com/a/1190000006992218

webpack複数ページアプリケーションアーキテクチャシリーズ(10):どのようにカスタマイズされたbootstrapを作成しますか?https://segmentfault.com/a/1190000007030775

webpack複数ページアプリケーションアーキテクチャシリーズ(11):プリパックDll、webpack音速コンパイルを実現する:https://segmentfault.com/a/1190000007043716

webpack複数ページアプリケーションアーキテクチャシリーズ(12):webpackを利用してHTML普通ページ＆ページテンプレートを生成する:https://segmentfault.com/a/1190000007104372

webpack複数ページアプリケーションアーキテクチャシリーズ(13):簡単なテンプレートレイアウトシステムを構築する:https://segmentfault.com/a/1190000007126268

webpack複数ページアプリケーションアーキテクチャシリーズ(14):Noコピー貼り付け!多項目共用インフラ

webpack複数ページアプリケーションアーキテクチャシリーズ(15):フロントエンドがバックエンドレンダリング開発モードにおいて、サンドイッチ生存

webpack複数ページアプリケーションアーキテクチャシリーズ(十六):ブラウザキャッシュを善用し、行くならば、

を残します.
この文章は最初に
Aray_Huangの技術ブログ――https://segmentfault.com/a/1190000007159115、著作者の同意なしに転載しないでください.
原文の住所: このシリーズの文章に興味があるなら、ここに注目してください.https://segmentfault.com/a/1190000007030775