Vue の自動書式設定の改行保存の詳細な説明

Vue の自動書式設定の改行保存の詳細な説明

ネットで変更方法をいろいろ調べたのですが、うまくいきませんでした。後で大物から見て削除しました。フォントについては、元のシステムフォントをまだ使っていますが、見栄えが良いので自分で追加しました。必要に応じて自分で変更することができます。右上隅で、ファイル--環境設定--設定--設定の検索---setting.jsonの編集に移動し、他のコメントをコメントアウトして、次のコードブロックに置き換えます。フォントサイズと行の高さは自分で変更できます

{
  //テキストサイズを設定します "editor.fontSize": 18,
  //テキスト行の高さを設定する "editor.lineHeight": 20,
  //行番号プロンプトを開く "editor.lineNumbers": "on",
  // 入力時にパラメータのドキュメントと型情報を含む小さなパネルを表示します。
  "editor.parameterHints.enabled": true、
  // ウィンドウのズームレベルを調整します "window.zoomLevel": 0,
  // ファイルディレクトリ // "workbench.iconTheme": "vscode-icons",
  // フォントを設定します "editor.fontFamily": "'Consolas','Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
  // 自動行折り返し "editor.wordWrap": "on",
  // vscode パネルの色をカスタマイズする "workbench.colorCustomizations": {
    // "tab.activeBackground": "#253046", // アクティブタブの背景色// "activityBar.background": "#253046", // アクティビティバーの背景色// "sideBar.background": "#253046", // サイドバーの背景色// "activityBar.foreground": "#23f8c8", // アクティビティバーの前景色(アイコンなど)
    "editor.background": "#292a2c" //エディターの背景色},
  // デフォルトでは、vscode はオプション "editor.detectIndentation": false を有効にし、ファイルの種類に基づいてタブ サイズを自動的に設定します。
  // タブサイズをリセット
  "エディター.タブサイズ": 2,
  // #保存するたびに自動的にフォーマットする "editor.formatOnSave": true,
  // #関数(名前)とそれに続く括弧の間にスペースを追加します "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #これはユーザー自身の習慣に従って選択されます "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #Vue の js をエディターに付属する ts 形式に従ってフォーマットします "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 保存時に実行する ESLint アクション タイプをコード化します。
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": 真
  },
  // emmet サポート vue ファイルを追加 "emmet.includeLanguages": {
    "wxml": "html",
    "vue": "html"
  },
  // 2つのセレクタをラップするかどうか "minapp-vscode.disableAutoConfig": true,
  //クイックプレビュー(右側)
  "editor.minimap.enabled": true、
  // タブコード補完 "files.associations": {
    "*.wpy": "vue",
    "*.vue": "vue",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  // ESLint CLI エンジン API を使用して ESLint を起動する方法を構成するために使用されます。 デフォルトでは空のオプション "eslint.options": {
    「拡張機能」: [
      「.js」、
      「.vue」
    ]
  },
  // onSave または onType でリンターを実行します。デフォルトは onType です。
  "eslint.run": "onSave",
  // 検証済みファイルのフォーマッタとして ESLint を有効にします。
  "eslint.format.enable": true、
  // ESLint 拡張機能を有効化し、ファイルの検証を試みる言語識別子の配列。
  "eslint.probe": [
    「ジャバスクリプト」、
    「javascriptreact」、
    「vue-html」、
    「ビュー」、
    「html」
  ]、
  //rg.exe プロセスを閉じて cnpm を使用します。これにより、rg.exe が大量のメモリを占有することになります。"search.followSymlinks": false,
  // js-beautify-html のプロパティ パーティションを設定します "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "ラップ属性": "自動",
      "折り返し行の長さ": 200,
      "end_with_newline": 偽
    },
    "きれいなhtml": {
      "印刷幅": 200,
      "シングルクォート": false,
      "wrapAttributes": false、
      「ソート属性」: false
    },
    「もっときれい」: {
      「セミ」:偽、
      "シングルクォート": true
    }
  },
  // スタイルはデフォルトでインデントオフセットになります
  "vetur.format.styleInitialIndent": true、
  // 無名関数の function キーワードの後のスペースを定義します。
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  // 関数パラメータの括弧の前のスペースの処理方法を定義します。
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 新しいバージョンメッセージ "vsicons.dontShowNewVersionMessage": true,
  // ファイルをゴミ箱に削除するときにエクスプローラーが確認するかどうかを制御します。
  "explorer.confirmDelete": true、
  // eslint-plugin-vue を使用して <template> 内の vue-html を検証します
  "vetur.validation.template": false,
  // ワークベンチで使用するカラーテーマを指定します。
  // "workbench.colorTheme": "One Dark Pro"
}

要約する

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

以下もご興味があるかもしれません:
  • Vueは要素内の$notifyを使用してプロンプト情報の改行の問題を解決します
  • Vueの中括弧文字の折り返しの落とし穴を解決する
  • Vue の文字列ラッピング問題を解決する (非常に便利です)
  • div 均等分割と自動行折り返しを実現する Vue flex レイアウトのサンプル コード
  • v-html を使用して vue でテキストをセミコロンで囲む例

<<:  モバイルウェブページのサイズ調整を実装する方法

>>:  mysql サブクエリと結合テーブルの詳細

推薦する

素晴らしい CSS ナビゲーション バーの下線効果

中国初のカッター github.com/chokcocoまず、ここに画像があります。純粋な CSS ...

Docker で MySQL を起動したときに SQL 文を自動的に実行する方法

Docker で MySQL コンテナを作成する場合、コンテナの起動後にデータベースとテーブルが自動...

Vue.js のミックスインの詳細な説明

ミックスインは、コンポーネントに分散された再利用可能な機能を柔軟な方法で提供します。 Mixin オ...

シンプルなウェブページレイアウトの構造と表現原理の共有

構造とパフォーマンスの紹介HTML 構造、CSS 表現、JavaScript 動作。Web ページの...

MySQL における explain の役割の詳細な説明

1. MYSQLインデックスインデックス: MySQL がデータを効率的に取得するのに役立つデータ構...

一般的な MySQL ストレージ エンジンとパラメータ設定およびチューニングの紹介

MyISAM、MySQLでよく使われるストレージエンジン特性: 1. 同時実行性とロックレベル2. ...

CocosCreatorの共通知識ポイントを整理する

目次1. シーンの読み込み2. ノードを見つける1. ノード検索2. その他のノード操作3. 再生ア...

js 配列から重複を削除する 11 の方法

実際の業務や面接では、「配列の重複排除」の問題によく遭遇します。以下は、js を使用して実装された配...

VueはEChartsを使用して折れ線グラフと円グラフを実装します

バックエンド管理プロジェクトを開発する場合、バックエンドのユーザーデータをカウントし、折れ線グラフや...

CSS のオーバーフロー:hidden エラーの解決方法

失敗の原因今日、カルーセルを書いていたときに、overflow;hidden; が失敗する可能性があ...

ソフトウェア 404 と 404 エラーとは何か、またそれらの違いは何ですか

まず、404 とソフト 404 とは何でしょうか? 404: 簡単に言えば、ユーザーが存在しないペー...

MySQLデスクトップツールSQLyogのリソースとアクティベーション方法は、白黒のコマンドラインに別れを告げます

では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...

MySQL 5.7 インストール MySQL サービスを開始できませんが、サービスはエラーを報告しません

MySQL 5.7 をインストールするには 2 つの方法があります。1 つはインストーラをダウンロー...

Docker Compose を使用して ELK を迅速にデプロイする (テスト済みで効果的)

目次1. 概要1.1 定義1.2 機能説明2. ELKを展開する2.1 ディレクトリとファイルを作成...

forループ内のvarの問題の解決

序文var は ES5 における変数宣言方法です。var で変数を宣言するとループ変数がグローバル変...