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

1. 説明
2. 関連する依存パッケージをダウンロードする
3. 設定ファイル .eslintrc.js (ルールを設定する方法は他にもあります)
4. vscode（バージョン1.44.0）設定で保存時にコードを自動的にフォーマットする
5. package.jsonにscriptsコマンドを追加する: eslintが検出して自動的に修正する
6. プロジェクトのeslint検証を終了する
7. eslint 中国語ドキュメント
要約する

1. 説明

eslint は、コードが標準化されているかどうかを確認するのに役立ちます。この記事では Prettier ルール (およびstandardjs 、 airbnbなどのルール) を使用します。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
  }
}