eslintまとめ

1、初期コマンド
eslintの初期コマンドは以下の通りです.
(1)eslint--init:生成.eslintrc.jsファイル(2)eslint src--fix:自動修復エラー.しかし、基本的なコードロジックに影響しないエラーを修正するしかありません.他のno-unused-varsのようなエラーは手動で修正するしかありません.
2、一般的な属性
eslintの一般的な属性:env、extens、parserOptions、plugins、rulesなど.
パースOptions EsLintはパースOptionsを通して、検査のecmaのバージョンを指定することができて、およびecmaのいくつかの特性

"parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },

PArser指定解像器EsLintはデフォルトではesprimを使ってスクリプト解析を行います.ess 6コードを使用する場合、babel-eslintに変更する必要があります.Babel-eslint解析器は使用頻度が高い解像器です.今は多くの会社のプロジェクトがes 6を使っています.互換性を考慮するためにBabelプラグインを使ってコードをコンパイルしています.Babelでコンパイルした後のコードはBabel-eslintという解像器を使って、不必要なトラブルを避けることができます.babel-eslintインストールコマンド:

npm install --save-dev babel-eslint

eslintrc.jsプロファイルに以下の構成項目コードを追加します.

parser: 'babel-eslint',

envEnvironmentは、brower、node環境変数、es 6環境変数、mocha環境変数などの他の環境のグローバル変数を設定できます.

"env": {
        "browser": true,
        "node": true
    }

プラグインの環境変数を使用するには、plugisで指定できます.

{
      "plugins": ["example"],
      "env": {
          "example/custom": true
      }
  }

pluginsは、サードパーティプラグインを参照するために使用されます.

"plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]

rules:具体的な配置を設定します.一つ目はエラーレベルです.「off」or 0-クローズルール「warn」or 1-ルールを警告と見なす(終了コードに影響しない)「error」or 2-ルールをエラーと見なす(終了コードは1)

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

extensは、基礎構成から有効なルールを継承することができる.eslintの公式は3種類のプリインストールパッケージを提供しています.(1)eslint-config-google

npm install eslint eslint-config-google

(2)eslint-config-airbnban標準は、eslint、eslint-plug-inmport、eslint-plugn-react、and eslint-plugn-jsx-a 11 yなどのプラグインに依存します.以下のコマンドを実行して、依存する各バージョンを確認します.

npm info "eslint-config-airbnb@latest" peerDependencies

依存を知ったら、依存パッケージをインストールします.eslint-config-airbn-baseはES 6+コードに対するチェックを含んでいます.eslint-config-airbnbはeslint-config-airbbaseに基づいてreactとjsx文法に対するチェックを追加しました.
(3)eslint-config-standrd

"extends": "standard",

グローバル変数をglobalで指定します.true代表は書き換え、falseは書き換えが許されないことを表します.

"globals": {
  "var1": true,
  "var2": false
}

3、コード間の使用
eslintのコメントはコード間にコメントを付けて、eslintを有効にするかどうかを設定します.

var a = 1; //eslint-disable-line        

//eslint-disable-next-line        
var a = 1

/* eslint-disable */
...
/* eslint-enable */
        

4、自分の設定を発表する
eslintは自分で設定した配置を発表することができます.引用されて使えばいいです.(1)my-config.js

module.exports = {
    extends: 'eslint:recommended',
    env: {
        node: true,
        es6: true
    },
    rules: {
        'no-console': 'off',
        'indent': [ 'error', 4 ],
        'quotes': [ 'error', 'single' ]
    }
};

(2)package.json

{
    "name": "eslint-config-my",
    "version": "0.0.1",
    "main":"my-config.js"
}

このモジュールを正しく読み込むためには、npm linkを実行して、このモジュールをローカルのグローバル位置にリンクする必要があります.

npm link eslint-config-my

ファイル.eslintrc.jsを変更します.

module.exports = {
    extends: 'my', //  extends  ， eslint-config-my      my
}; 

コード説明

module.exports = {
//      ，ESLint               ，      。ESLint           "root": true，             。
  root: true,
//  Babel          ESLint   。
  parser: 'babel-eslint',
  parserOptions: {
    //     ECMAScript   
    sourceType: 'module'
  },
  env: {
    //         ，        
    browser: true,
  },
//            ，  eslint-config-standard 
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
// required to lint *.vue files
  plugins: [
    //        .html   .vue    js  
    'html',
    // standard      
    "standard",
    // standard      
    "promise"
  ],
// add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

一般プラグイン
1、eslint-friendly-formaterは、eslintのエラー情報を端末に表示させることができます.webpackの構成によって、以下のように使います.

{
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter')
  }
},

2、eslint-plugin-htmlこのプラグインは、モジュールスクリプト間のブラウザでグローバル変数を共有する行為をシミュレートするため、モジュールスクリプトには適用されません.
このプラグインはファイルを拡張することもできます.
.eslintrc.jsには、以下の構成項目を追加します.

settings: {
  'html/html-extensions': ['.html', '.vue'],
  'html/indent': '+2',
},

このようなeslint-pulgin-htmlで拡張されたファイルはeslint--ext.htmlを使って検出できます.vue srcは、開発中に書き込みながら検出するためには、該当ファイルのloaderを使って処理することができます.そしてnpm run devを実行すれば実現できる機能です.書きながら検出する機能です.