Vue の構文ルール検出におけるエラー報告の問題を解決する方法

この記事では主に、Vue でパスを設定するときにさまざまなエラーが発生する問題の解決策を紹介します。最も一般的なものは、スペース、インデント、さまざまな括弧などのいくつかの記述方法です。非常に興味深いので、必要な友達は参考にしてください

パスを設定するときに、最も一般的なものはスペースなどのいくつかの記述方法でした。結果は次のとおりです。 一言で言えば、この変更は非常に時間がかかり、非効率的です。主なエラーは次のとおりです。一般的なエラーのセクションをインターセプトし、そのうちの 1 つを選択しました:

4 つのスペースのインデントが予想されましたが、1 つのタブが見つかりました

翻訳すると、次の意味になります: 4 つのスペースがインデントされることが予想されましたが、1 つのタブが見つかりました。これは、Vue が記述ルールを検出した場合、スペースだけを認識し、タブのインデントを認識しないことを意味します。このとき、ページのコンテンツを変更してタブをスペースに置き換える必要があり、その方が面倒です。解決策は次のとおりです:

まず、ビルド ディレクトリで webpack.base.conf.js ファイルを見つけ、ルールのこのセクションをログアウトします:

それを保存します。 、そして、npm run dev をもう一度見てください:

エラーレポートは消えましたが、そうすることの欠点は、すべてのエラーチェック機能が強制的に停止され、初期には多くの文法エラーを検出できないことです。段階では、これはお勧めできません。コードの読みやすさと規範性にとってさらに悪影響を及ぼします。次に、別の方法を見つける必要があります。ルール内の設定を変更するだけです。

2 番目に、これは別の構成ファイルを使用します: テスト ディレクトリの .eslintrc.js ファイルです (推奨)

カスタム ルールを追加してから、ESLint ルールをよく理解することをお勧めします

ルール

一部のルールは設定ファイルで設定できます。

ルールには 3 つのエラー レベルがあります:

"オフ" または 0: ルールをオフにします。 "

warn" または 1: ルールをオンにし、警告として機能します (終了コードには影響しません)。

1. "error" または 2: ルールをエラーとして開きます (終了コードは 1 になります)。

2. ルールをより深く理解できるように、ESLint はルールをカテゴリに分類しています。

3. デフォルトでは、すべてのルールが無効になっています。構成ファイルで、「extends」:「eslint:recommended」を使用して推奨ルールを有効にし、いくつかの一般的な問題を報告します。これらの推奨ルールには以下のタグが付いています。

考えられるエラーはカスタム ルールに対して設定されています

スペース インデントに関連する上記で報告されたエラーを例に挙げて、関連するルール プロンプトを見つけます:

次にルールに移動し、手動で「no-」を追加します。 「mixed-spaces-and-tabs」を選択し、それを 0 として定義してルールを閉じます

 // 在这里添加自定义规则
 'rules': {
  // allow paren-less arrow functions
  'arrow-parens': 0,
  // allow async-await
  'generator-star-spacing': 0,
  // 禁止空格和 tab 的混合缩进
  'no-mixed-spaces-and-tabs'：0，
  // allow debugger during development
  'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
 }

さて、保存して更新すると、エラーが表示されなくなることがわかります。無視する必要があるルールを選択できます

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

Vue コンポーネントの jsx 構文の使用の概要

Vue ベースの遅延読み込みプラグイン vue-view-lazy の概要

以上がVue の構文ルール検出におけるエラー報告の問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。