Vueの研究ノート：一般的なツールの開発効率と経験を強化します

冬

用途：

• 構文ハイライト
• タグの補完、テンプレート生成
• リントチェック
• フォーマット

コードの環境設定ファイルの対

• ファイル- >設定- >検索veture（自己インストールする必要性を見つけることができません）- > setting.jsonで編集
• 次のようにプロファイルのコードは次のとおりです。

{
     "extensions.ignoreRecommendations"：偽、
     "team.showWelcomeMessage"：偽、
     "git.enableSmartCommit"：真、
     "vsicons.dontShowNewVersionMessage"：真、
     "git.autofetch"：真、
     "react.beautify.onSave"：真、
     "files.associations" ：{
         "*の.js"： "javascriptreact" 
    }、
     "git.confirmSync"：偽、
     "explorer.confirmDelete"：偽、
     "[値下げ]" ：
    {}、 "eslint.enable"：真、
    "eslint.options" ：{
         "拡張" [
             "の.js" 、
             ".jsxの" 、
             ".vue" 
        ] 
    }
     "eslint.validate" ：[
         "ジャバスクリプト" 、
         "javascriptreact" 、
        {
             "言語"： " VUE」、
             "自動修正"：真
        } 
    ]、
     "vetur.validation.template"：偽、
     "eslint.autoFixOnSave"：真、
     "editor.tabSize"：2 、
     "jest.autoEnable"：偽、
    "jest.pathToConfig"： "./.jest.js" 、
     "terminal.integrated.rendererType"： "DOM" 、
     "window.zoomLevel"：0 、
     "editor.quickSuggestions" ：{
         "ストリング"：真
    }、
     " diffEditor.renderSideBySide "：真
}

 

コード対迅速ショートカット成分を生成

• ファイル - >設定 - >ユーザースニペット - >入力ボックスvue.json
• 次のコードにファイルをコピーします。

"コンソールへの印刷" ：{
     "接頭辞"： "VUE" 、
     "身体" ：[
       "<！ - $ 0 - 1>" 、
       "<テンプレート>" 、
       "<div> </ div>" 、
      「</テンプレート> " "" 、
       "<script>" 、
         "エクスポートデフォルト{" 、
         "データ（）{" 、
         "リターン{" 、
         "}" 、
         "}" 、
         "}" 、
         "" 、
       "</ SCRIPT>" 、
       "" 、
       "<スタイルLANG = 'スタイラス'スコープ>"、
       "" 、
       "</スタイル>" 、
       "" 
    ]、
     "説明"： "ログ出力コンソールに" 
  }

 

ESLint

使用

• コードの仕様
• エラーチェック

きれい

• フォーマット美化

ビュー - デベロッパーツール

クロムのプラグイン

• リモートデバッグ
• パフォーマンスの監視
• 統合されたVUE