VsCode環境をゼロから設定し、一般的なプラグイン、テーマをインストールし、設定を変更する。

新しい開発環境に変更するたびに、VsCodeプラグインを再インストールしたり、設定項目を変更したりする必要があります。ここでは、よく使用されるVsCodeプラグインと設定を記録し、後で閲覧できるように保存します。

デバイスの同期

使えば、インストールしたプラグインや設定をGithubに同期し、新しい環境にSettings Syncを直接インストールして同期することができます。これにより、新しい環境に移行するたびにVsCodeを再設定する必要がなくなります。

同期ステップ

• プラグインをインストールすると、まずGithubアカウントにログインするよう求められます。
• 古い環境にSetting Syncをインストールした後、Ctrl|Cmd + Pの後に> syncと入力し、Update/Upload Settingsを選択すると、現在の設定がGithubに同期されます。
• 新しい環境にSetting Syncをインストールした後、Ctrl|Cmd + Pの後に> syncと入力し、Download Settingsを選択すると、Githubから設定が同期され、プラグインが自動的にインストールされます。

よく使われるプラグイン

ブックマーク

Settings Sync、ファイルをマークアップしたり、現在のファイル内のマークアップ間をジャンプして行き来することができます。また、プロジェクトの左側にブックマークタブがあり、クリックするとプロジェクト内のすべてのマークアップが表示されます。

インデントレインボー

Bookmarks、プロジェクト内のコードが多すぎてレベルが同じでない場合、効果がわかりにくいので、これは各レベルのスペースに異なる色を追加し、肉眼で見やすくします。

ブラケット・ペア カラーライザー2

indent-rainbow、一般的にインデントレインボーと一緒に使用されますが、この違いは、肉眼で見やすいようにブラケットの各レベルに異なる色を追加することです。

GitLens - Gitスーパーチャージャー

GitLens、VsCodeのgitプラグインは、別のgitlensタグがあるでしょう、あなたはコミットレコードの現在のブランチだけでなく、ファイルのコミットレコードを見ることができます、あなたはまた、他のブランチと比較することができます、ファイルをクリックすると、現在のコミットレコードも表示されます。使い方はとても簡単です。

TODO

• GitLens、TODO:、FIXME:をハイライトしますが、大文字しか認識されず、セミコロンが必要です。3、4年前からメンテナンスされていません。
• todo-tree、todoのハイライト、fixme、ツリー表示。

vscode-pdf

todo-tree、VsCodeで直接PDFファイルを表示することができます。

Vue

ヴェトゥール

vscode-pdf、シンタックスハイライト、Emmet、フォーマットなどを含むVueファイル用のプラグインツールです。VsCodeでvueファイルを開くと、このプラグインをインストールするかどうかのプロンプトも表示されます。

ビューフォーマット

Vetur、vueファイルのフォーマットツールで、デフォルトでjs-beautify設定を使用します。

内部で使用されているコンフィギュレーション：

"vue-format.break_attr_limit": 5, // 改行前のタグに複数の属性を入れる
"vue-format.js-beautify": {
 "indent_size": "editor.tabSize",
 "indent_char": " ",
 "indent_with_tabs": false,
 "brace-style": "collapse-preserve-inline", // コードスタイル、オプション値[collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline
 "wrap_line_length": 12000, //必要に応じて改行の長さを設定する
 "space_after_anon_function": true,
 "css": {},
 "js": {},
 "html": {
 "force_format": [
 "template"
 ]
 }
}

Vue CSS Peek

vue-format、単一ページのvueファイルのCSSトランジションをサポートします。vueテンプレート内のクラスをクリックすると、対応するスタイル定義が表示されます。

Vueファイルパスのジャンプ

プラグイン：

• Vue CSS Peek、あらゆるプロジェクトのサポート、自由に設定可能なマッピングルール、自由に設定可能なデフォルトサフィックスリスト
• Path Intellisense, Path Autocompletionの最終更新は2017年です。あまりお勧めできません。

VsCode目の保護テーマ

一日後にデフォルトのテーマを使用してコードを見て、非常に不快な目、収れんを感じています。目の保護のテーマを変更し、それを使用した後、はるかに快適に感じることはありません。また、黒のクールなスタイルを好むが、快適であるか変更するために。

• H5Builderのテーマからインポートされた、H5Builderのカラースキームと一貫性があり、solarizedからインポートされたいくつかの機能があり、非常に快適に使用することができます。では、このテーマを使ってみてください。
• 、ソラライズされたテーマは、選択する暗いと光があり、光は目の保護のテーマであり、それはまた、より快適に使用することができます。

目を保護するテーマを使用した後、上のインデントレインボーの色も変更する必要があります。変更後の設定は以下の通りです：

"indentRainbow.colors": [
 "rgba(, )",
 "rgba(0, 0.15)",
 "rgba(,)",
 "rgba(, 0.08)",
 "rgba(3, 0.15)"
]

これをコピーしてSetting.jsonで使用することができます。