ESLint(vue+webpack)配置

3351 ワード

先端 eslint

一、ESLINE
共同開発の過程で、コード検視からの悪意を常に感じています.コードの習慣が合わなくて、半日見ます.下手なミスを提出するなんて、私の天┻┻┻!検討した結果、ESLINEを使ってコード規範検査をすることにしました.
二、配置方式

JavaScriptの注釈:JavaScriptの注釈を通して構成情報をコードに埋め込む.

package.json:package.jsonファイルのeslintConfigフィールドで構成を指定します.

プロファイル:eslintrc.(js/json/yaml/yml)の個別ファイルを通して、ディレクトリ全体またはサブディレクトリの設定情報を指定します.ESlintはプロファイルを検索して自動的に読み込みます.

三、設定プロセス(プロファイル)

関連npmパッケージ

yarn add eslint babel-eslint eslint-loader eslint-plugin-vue eslint-friendly-formatter --dev

をインストールします.

ファイルを追加します.eslintignoreは検査不要ファイル(gitのようです.gitignore)を設定します.ESlintrc.jsは、ESlint検証規則の設定ファイルを構成するために使用されます.

webpackプロファイルを変更する

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

四、配置ファイルの詳細
eslintrc.jsを例にして

module.exports = {
  //     root，ESlint              
  root: true,
  //   
  parser: "babel-eslint",
  //     JS    
  parserOptions: {
    //  ES6    (    es6     {env: {es6: true}}，     ES6    )
    //               ：2015
    ecmaVersion: 6,
    //   script
    sourceType: "module",
    //         
    ecmaFeatures: {
      //...
    }
  },
  //       ，                 ，          
  env: {
    es6: true,
    browser: true,
    jquery: true
  },
  //               ，no-undef    。
  //            ，   globals   ，            
  globals: {
    //           ，                 
    test_param： true
  },
  //          ，   eslint-plugin-    ，         
  //  vue    eslint-plugin-vue  
  plugins: ["vue"],
  //       
  extends: ["eslint:recommended", "plugin:vue/essential"],
  //                
  //      ： "off"(0)  、"warn"(1)  、"error"(2)  --error   ，    
  rules: {
    //  “  console”  
    "no-console": "off",
    //       ，     2   ，    4   
    "indent": ["warn", 2, {
      //   1   switch   case    2   
      "SwitchCase": 1,
      //    var、let const   
      "VariableDeclarator": { "var": 2, "let": 2, "const": 3 }
    }],
    //          ，          
    quotes: ["error", "double"],
    //....
    //       http://eslint.cn/docs/rules/
  }
}

JavaScriptの注釈を使って規則を有効にしたり、指定することを禁止したりします.

/* eslint-disable */
alert('message');
/* eslint-enable no-alert, no-console*/
...

積層配置
ESlintは積層構成をサポートしています.ファイルを検出するルールは、そのディレクトリ階層構造のすべてです.eslintrcファイルの組み合わせは、規則が衝突したときに、検出ファイルに一番近いルールが優先されます.
デフォルトでは、ESlintはルートディレクトリまで、親ディレクトリに沿ってオンラインでプロファイルを探します.設定ファイルにroot: trueがある場合、ESlintは親ディレクトリ内の検索を停止します.
五、配置中に発生した問題
エラーが発生しました.Use the latest vue-eslint-parser.
解決方法:parser: "babel-eslint"をパースOptionsに移動します.

{
  //parser: "babel-eslint",
  parserOptions: {
    parser: "babel-eslint",
    //...
  }
}

問題の原因:eslint-plugin-vueにおける多くの規則は、vue-eslint-parserが

データタイプ007