vue フロントエンド HbuliderEslint リアルタイム検証 自動修復設定

複数人での共同作業であっても、個人的なプロジェクトであっても、コード標準は非常に重要です。そうすることで、基本的な構文エラーを大幅に回避できるだけでなく、文法ルールとコード スタイルをチェックするツールである ESLint を使用して、文法的に正しく、統一されたスタイルのコードが記述されていることを確認できます。

HBuilderX での ESLint プラグインのインストール

HBuilderX には、htmlhint、stylelint、eslint-plugin-vue、eslint-js の 4 つの構文チェック プラグインが含まれています。 [ツール] -> [プラグインのインストール] をクリックすると、インターフェイスは次のようになります。

プラグイン マーケットをクリックしてプラグイン マーケットに入り、eslint と入力して検索します。

eslint をクリックし、詳細ページに移動して、プラグインのインストールをクリックします。注意: hbuilderのバージョンは2.6.8以上である必要があります

eslint-vue と eslint-js をインストールした後。メニュー設定をクリックし、自動修復を保存するをチェックします

カスタム eslint-js ルール

上記の画像の「設定のために .eslintrc.js ファイルを開く」をクリックし、次のようにファイル コードを開きます。

  モジュール.エクスポート = {  
      「プラグイン」: [  
          「html」  
      ]、  
      "パーサー": "esprima",  
      "パーサーオプション": {  
          「ecmaバージョン」: 2018,  
          "ソースタイプ": "モジュール",  
          "ecmaFeatures": {  
              "jsx": 真  
          },  
          "allowImportExportEverywhere": false  
      },  
      「ルール」: {                                  
          "camelcase": 2, // キャメルケース命名を強制する,  
          "indent": [2, 4], // インデント スタイル "id-match": 0, // 名前検出 "init-declarations": 1, // 宣言時に初期値を割り当てる必要があります "no-undef": 1, // 未定義の変数を持つことはできません "no-multi-spaces": "error", // 複数のスペースを禁止します "semi": [2, "always"] ,// セミコロンの自動追加 "quotes": ["error", "single"] // 一重引用符を使用します }  
  };  

詳細なルールのリファレンス: eslint 共通構成は Hbulider を再起動し、保存するたびに JS コード内のコードの不整合を自動的に修正します。

予防

Hbulider コード自動修復機能を使用するための上記の設定は、Hbulider バージョン 2.6.8 以降にのみ適用されます。
参考資料: HBuilderX 構文チェック、eslint リアルタイムチェック自動修復機能の説明

以上が、vueフロントエンドにおけるHbuliderEslintのリアルタイム検証と自動修復設定の詳細な内容です。HbuliderEslintのリアルタイム検証と自動修復の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。