【実践できるVue2+3入門】(17) VUEのVueCliスキャフォールディングカスタム作成プロジェクト、ESlintコードの仕様と修復、ESlint自動修正プラグインの詳しい使用例

1. 本項の内容

VueCli スキャフォールディングカスタム作成プロジェクト
ESlint コードの仕様と修復
ESlint自動修正プラグイン

2.VueCliカスタム作成プロジェクト

1.足場の設置（設置済み）

npm i @vue/cli -g

2.プロジェクトの作成

vue create hm-exp-mobile

オプション

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     选自定义

機能の手動選択

ここに画像の説明を挿入します

vueのバージョンを選択してください

  3.x
> 2.x

ヒストリーモードを使用するかどうか

ここに画像の説明を挿入します

CSSの前処理を選択

ここに画像の説明を挿入します

eslintのスタイルを選択します（コードが仕様に準拠しているかどうかを確認するためのeslintコード仕様検証ツール）
例: const age = 18; => エラー! 余分なセミコロンが追加されました。背面にツールがあり、保存すると、すべてが最も標準化された方法でフォーマットされます。

ここに画像の説明を挿入します

検証するタイミングを選択（Enterを直接押す）

ここに画像の説明を挿入します

構成ファイルの生成方法を選択します (Enter を直接押します)

ここに画像の説明を挿入します

プリセットを保存して、次回直接使用しますか? => 保存せずに「N」を入力してください

ここに画像の説明を挿入します

インストールを待機中、プロジェクトの初期化が完了

ここに画像の説明を挿入します

スタートアッププロジェクト

npm run serve

3. ESlint コードの仕様と手動修復

コード仕様: コードを記述するための合意されたルールのセット。例: 代入記号の前後にスペースは必要ですか? 文末に「;」を付けたほうがいいでしょうか？…

ルールも基準もない

ESLint: コードが指定されたルールに準拠しているかどうかをチェックするために使用されるコード検査ツールです (あなたとあなたのチームが自分で一連のルールに同意することができます)。プロジェクトを作成するときは、JavaScript 標準スタイルのコードスタイルルールを使用します。

1.JavaScript標準スタイル仕様

https://standardjs.com/rules-zhcn.html を読むことをお勧めします。その後、作成時にエラーが発生した場合は、クエリを実行して解決できます。

以下にルールの一部を示します。

エスケープが必要な場合を除き、文字列には一重引用符を使用します
セミコロンは不要です。これに問題はありません。嘘をつかないでください！
キーワードの後にスペースを追加します if (condition) { ... }
関数名の後にスペースを追加します function name (arg) { ... }
適合性を維持し、チェックが必要な場合===は使用可能になったら==破棄しますnull || undefinedobj == null
…

2. コード仕様の誤り

コードが標準要件を満たしていない場合、eslint が飛び出して警告します。

main.js にランダムな変更を加えてみましょう。空白行とスペースを追加します。

import Vue from 'vue'
import App from './App.vue'

import './styles/index.less'
import router from './router'
Vue.config.productionTip = false

new Vue ( {
    
    
  render: h => h(App),
  router
}).$mount('#app')

コードを保存を押した後:

コンソールに次のエラー出力が表示されます。

ここに画像の説明を挿入します

eslint がお手伝いします。良い姿勢を持ち、間違いを犯した場合は修正してください。

3. 手動修正

エラープロンプトに従って 1 つずつ手動で修正します。

コマンドラインの構文エラーの意味がわからない場合は、エラーコード (func-call-spacing、space-in-parens など) に基づいて ESLint ルールリストでその具体的な意味を見つけることができます。

ESLint ルールテーブルを開き、このコードに対してページ検索 (Ctrl + F) を使用して、このルールの解釈を見つけます。

ここに画像の説明を挿入します

4. eslintプラグインによる自動修正

eslint は自動的にエラーを強調表示します

設定を通じて、eslint は自動的にエラーを修正します。

インストールする方法

ここに画像の説明を挿入します

設定方法

// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    
    
    "source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false

注: このプラグインを有効にするには、eslint 構成ファイルがルートディレクトリに存在する必要があります。プロジェクトはルートディレクトリで一度に 1 プロジェクトずつ開く必要があります
注: eslint 検証を使用すると、vscode が提供するすべての書式設定ツールに対して Beatify が無効になります。

settings.json リファレンス

{
    "window.zoomLevel": 2,
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    // 当保存的时候，eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码，不自动格式化
    "editor.formatOnSave": false
}