Vueでeslintを使用する方法の詳細な説明

Vueでeslintを使用する方法の詳細な説明

1. 説明

eslint は、コードが標準化されているかどうかを確認するのに役立ちます。この記事では Prettier ルール (およびstandardjsairbnbなどのルール) を使用します。eslint のデフォルトルールを使用する場合、または独自のルールを定義する場合は、prettier 関連の依存関係パッケージをダウンロードする必要はありません (同時に、.eslintrc.js 内の 'prettier' を含む関連設定を削除します。設定を削除せず、prettier をダウンロードしないと、プロジェクトの開始時にエラーが報告されます)。 vscode 環境に、保存時に非標準コードをルールに従ってフォーマットできる eslint プラグインをダウンロードしました。

2. 関連する依存パッケージをダウンロードする

"eslint"

"babel-eslint"

"eslint-config-prettier"

"eslint-loader"

"eslint-plugin-prettier"

"eslint-plugin-vue"

3. 設定ファイル .eslintrc.js (ルールを設定する方法は他にもあります)

プロジェクトのルート ディレクトリに、次の内容を含む新しいファイル .eslintrc.js を作成します (必要に応じて構成できます)。

モジュール.エクスポート = {
  root: true, // このルールを現在のプロジェクトにのみ適用します parserOptions: {
    "パーサー": "babel-eslint",
    "sourceType": 'module', // "module"、"script" に設定 (デフォルト)
    // "ecmaVersion": 6 // es6 構文を有効にし、es6 グローバル変数を自動的に有効にしない},
  parser: "vue-eslint-parser", // .vue ファイルを識別するには、eslint-plugin-vue をダウンロードする必要があります
  // 有効にする環境 env: {
    「ブラウザ」:true、
    「ノード」:真、
    "es6": 真
  },
   //プラグインルールを継承する extends: [
    "eslint:recommended", // "√" とマークされたデフォルトのルールを開始します。 "plugin:prettier/recommended" // 他の人が書いたルールで、パッケージ eslint-config-*** に依存します。ここでは prettier ルールを示します。
  // プラグイン名のリストを設定します。プラグイン名では、「eslint-plugin-」プレフィックスを省略できます。
  プラグイン: [ 
    'vue'、// eslint-プラグイン-vue
    'prettier' // eslint-plugin-prettier
  ]、
  // カスタムルールは最も優先度が高い "rules": {
    「コンソールなし」: 0
  }
}

4. vscode(バージョン1.44.0)設定で保存時にコードを自動的にフォーマットする

vscode 用の eslint プラグインをダウンロードし、settings.json ファイルを開いて、以下を追加します。

"editor.codeActionsOnSave": {

"source.fixAll.eslint": 真

},

他のバージョンでは設定が若干異なる場合があります。例えば、図に示す設定はバージョン 1.36.1 で有効になります。

5. package.jsonにscriptsコマンドを追加する: eslintが検出して自動的に修正する

"eslint": "eslint --fix --ext .js,.vue --ignore-path .eslintignore ."

eslintignoreは設定検出時に無視されるファイルです

6. プロジェクトのeslint検証を終了する

ここではvue-cli3以降を例に挙げますvue.config.jsに次の設定を追加するだけです。

lintOnSave: false

7. eslint 中国語ドキュメント

https://eslint.bootcss.com/docs/ユーザーガイド/開始

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue プロジェクトにおける Eslint コード エラーの解決方法
  • Vue eslint開発における厳密モード警告エラーの問題を解決する
  • vue-cli プロジェクトで遭遇した eslint の落とし穴と解決策
  • Vue での ESLint 設定方法
  • Vue で eslint 検出をオフにする方法 (複数の方法)
  • Vue プロジェクトのコマンドを使用して ESLint エラーを直接修正する方法

<<:  HTMLでは、div内のコンテンツが次のサイズを超えたときに自動的にスクロールバーが表示されるように設定します。

>>:  CSS を使用して波状のウォーターボール効果を実装するためのサンプルコード

推薦する

MySQL 8.0 のインデックス スキップ スキャン

序文MySQL 8.0.13 では、インデックス スキップ スキャン (インデックス ジャンプ スキ...

同じページを動的にロードするための Vue ルーティングリスニングの例

目次シナリオ分析発達要約するシナリオ分析システムでは、1 つのモジュールに 3 つのサブモジュールが...

シェル スクリプトを使用してワンクリックで MySQL 5.7.29 をインストールする方法

この記事は51CTOブログの著者wjw555の作品を参照しています。スクリプトの内容: vim イン...

Linux が Sudo 権限昇格の脆弱性を公開、どのユーザーでも root コマンドを実行可能

Linux で最も一般的に使用される重要なユーティリティの 1 つである Sudo は、ほぼすべての...

Vue プラグイン エラー: このページで Vue.js が検出されました。問題は解決しました

Vue プラグインがエラーを報告しました: このページで Vue.js が検出されましたVueプラグ...

mysql5.7 の新しい json フィールド タイプの使用例の分析

この記事では、MySQL 5.7 で追加された json フィールド タイプの使用方法を例を使って説...

mysqlタイムスタンプの使用

序文:タイムスタンプ フィールドは、MySQL でよく使用されます。たとえば、データ行が作成または変...

Linux ネットワーク システムの紹介

目次ネットワーク情報ホスト名を変更するDNSドメイン名解決ネットワーク関連コマンドファイアウォール暗...

Vue デフォルトスロットの理解とサンプルコード

目次スロットとは何かデフォルトスロットの理解コードスニペット要約するスロットとは何かスロットは、親コ...

よく使われるnginxの書き換えルールの詳細な説明

この記事では、Web ページのリンクを美しくするためによく使用される書き換えルールをいくつか紹介しま...

MySQLグループクエリ最適化方法

MySQL はほとんどの場合、GROUP BY クエリと DISTINCT クエリを同様に処理します...

この記事では、CSSの2列レイアウトと3列レイアウトの具体的な使い方をまとめます。

序文大規模なフロントエンドの開発に伴い、UI フレームワークが次々と登場し、フロントエンド開発におけ...

WeChatアプレット+EChartsで動的更新プロセス記録を実現

序文最近、小さなプログラムでリアルタイムにチャートを更新するという要件に遭遇しました。最初は wx-...

主要ブラウザとそのカーネルの紹介

トライデント コア: IE、MaxThon、TT、The World、360、Sogou Brows...

nginxリバースプロキシによるセッション障害の問題の解決策

同僚から助けを求められました。バックエンド システムへのログインは成功したものの、システムには正常に...