Vue.js学習シリーズ5-VUE-CLIからESLintについて

4953 ワード
最近vue-cliでプロジェクトを書いているとき、ESLintとよく付き合っているので、知り合いではないと言えます.次に、Vueを勉強しているときに遭遇した問題をまとめます.
ESLintの概要
ESLintについての紹介はネット上にたくさんありますが、ここでは簡単に役に立ちます.ESLintの役割は、コードエラーと統一コードスタイルをチェックすることです.コードを書く習慣は人によって異なるので、コードスタイルを統一することはチームワークにおいて特に重要です.
vue-cliのeslint関連
vue-cliはinit初期化時にESLintを追加する必要があるかどうかを尋ね、確認すると作成したプロジェクトに.eslintignoreと.eslintrc.jsの2つのファイルが表示されます..eslintignore Gitのような.gitignoreは、ESLintチェックを使用しないファイルを無視するために使用されます..eslintrc.jsは、プラグイン、カスタムルール、解析器などの構成を設定するためのESLintプロファイルです.
.eslintrc.js 
// http://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // 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
  }
}

解析器(parser):babel-eslintを使用しています.これはpackageで使用できます.jsonで見つけたのは、この解析器をインストールしたことを示しています.環境構成(env):ブラウザでeslintを使用します.継承(extends):このプロファイルはstandardルールを継承しており、具体的なルールは自分でドキュメントを見て、中国語版があることがわかりません.ルール(rules):3つのカスタムルールについて、公式ドキュメントを調べました.
  • arrow-parems矢印関数パラメータにかっこを使用できます.詳細は、ドキュメント
    • を参照してください.
  • generator-star-spacingは、function * generator() {}のような方法の間に星番号を付けることを可能にする.ドキュメントはここにあります.わざわざ調べてみると、ES 6が提供するジェネレータ関数であることがわかり、後で勉強します.
  • no-debugger'では、開発環境でdebuggerを使用できます.これは簡単ですが、ドキュメントを貼ると表示しやすいです.

    • 注:rulesの各構成項目の後の最初の値はeslintルールのエラーレベルです.
  • 「off」または0-このルールを閉じる
  • 「warn」または1-ルール違反は、(プロジェクトの実行に影響しない)
    • に警告します.
  • 「error」または2-ルール違反はエラー(画面上のエラーコードの山~)
    • を報告します.
    あった問題
    最初はESLintを知らずにプロジェクトを書き、Standardのドキュメントを読むことを知らなかったので、多くのESLintのエラーと警告に遭遇し、友达に役に立つことを望んでいました.
    1. Do not use 'new' for side effects
    このエラーは私が/* eslint-disable no-new*/という注釈を削除したことによるもので、/* eslint-disable */という注釈の役割はeslintに注釈の下のコードをチェックさせないことです.
    new Vue({
  el: '#app',
  router,
  template: '',
  components: { App }
})

    エラーの原因:新しいオブジェクトを直接newすることはできません.新しいオブジェクトを変数に割り当てる必要があります.
    var vm = new Vue()

    2. Strings must use singlequote
    エラーの原因:文字列は一重引用符で囲まなければなりません
    return {
      msg: "Welcome to Your Vue.js App", //   ，  ！
    }

    3. Expected space(s) after "return"
    エラーの原因:括弧の両側にスペースを置く必要があります
    return{//       
  msg: 'Welcome to Your Vue.js App', 
}

startClock (){} //){      ，  ！

    4. Expected indentation of 8 spaces but found 6
    エラーの原因:2つのスペースでインデントします.
          if (this.IntervalID === '') {
      this.IntervalID = setInterval(this.countDown, 1000)
      }

    実はESLintの間違いは難しくなく、間違いの原因を理解すればよく解決します.事前にドキュメントを見ておくと、エラーの問題はあまり発生しません.この物語は私たちにドキュメントを見ることが重要だと教えてくれました~%>
    Tips
    ESLintのエラーを発見すると、エラー文の前にURLが表示されます.クリックすると詳細なエラー情報が表示されますよ.これは私がブログを書いたばかりの時に見つけたものです.
      http://eslint.org/docs/rules/no-new  Do not use 'new' for side effects  
  E:\Github\EfficiencyTools\EfficiencyTool-VueMobile\src\main.js:15:1
  new Vue({

    ここのhttp://eslint.org/docs/rules/no-newESLintルールが間違っている理由は、やはり人間的です.
    エディタ
    VSCodeを使用してコードを編集することをお勧めします.VSCode拡張プラグインの推奨に従って、ノードとVueの開発効率を高めてプラグインをインストールし、構成した後、vueプロジェクトを書くのは便利になりました.
    まとめ
    実はvue-cliのESLintは私たちがあまり構成する必要はありません.基本的には構成されています.vue-cliが提供したルールに従ってコードを書くことができます.いくつかのルールを変更する必要がある場合はrulesに追加して既存のルールを置き換えればいいです.最初はESLintでコードを書くのが面倒で、フォーマットの問題でデバッグして報告を間違え、フォーマットを変更させることがよくあります.しかし、ESLintを使用すると、コードの可読性、美観性が大幅に向上していることがわかります.ESLintを使用してコード編集を規範化することをお勧めします~
    Vue.js学習シリーズ
    先端知識の断片化が深刻であることを考慮して、Vueに関する学習シリーズのブログを系統的に整理したいと思っています.
    Vue.js学習シリーズ1-vue-router 2学習実践ノート(DEMO付)Vue.js学習シリーズ二——vuex学習実践ノート(DEMO付)Vue.js学習シリーズ3——axiosとネットワーク伝送に関する知識の学習実践Vue.js学習シリーズ4-Webpackパッケージツールの使用Vue.js学習シリーズ5-VUE-CLIからESLint Vueについて話します.js学習シリーズ6-VueユニットはKarma+Mocha学習ノートVueをテストした.js学習シリーズ7-VueサーバレンダリングNuxt学習Vue.js学習シリーズ8——Vueソース学習のState学習
    Vue.js学習シリーズプロジェクトアドレス
    この文書のソースコードはGitHubに収められており、参考にして、もちろんstarを残したほうがいい-.https://github.com/violetjack/VueStudyDemos
    作者について
    VioletJackは、フロントエンドエンジニアを効率的に学習し、効率を高める方法を研究するのが好きで、Vueフロントエンドに関する知識の学習、整理にも専念しています.注目、称賛、コメントコメントコメントを歓迎します~私は引き続きVue関連の良質な内容を産出します.
    新浪微博:http://weibo.com/u/2640909603掘金:https://gold.xitu.io/user/571d953d39b0570068145cd1 CSDN: http://blog.csdn.net/violetjack0808 : http://www.jianshu.com/users/54ae4af3a98d/latest_articles Github: https://github.com/violetjack
    Vue(二、カスタム命令)
    tableソート