一、关于 Vscode#
1.1 VsCode 是个啥#
Visual Studio Code は 軽量でありながら強力なソースコードエディタ で、デスクトップ上で動作し、Windows、macOS、Linux で利用可能です。 JavaScript、TypeScript、Node.js の組み込みサポートがあり、C++、C#、Java、Python、PHP、Go などの他の言語や、.NET や Unity などのランタイム用の豊富な拡張エコシステムを備えています。
サポートされている拡張機能には、以下のような一般的なものが含まれます：
image.png
1.2 VSCode の学習ウェブサイト#
VSCode ヘルプドキュメントリンク
それを見つける方法は非常に簡単です。
image.png
二、How to Use#
2.1 コードのデバッグとプラグインのインストール#
コードのデバッグを開始する方法、ここでは python を例にします#
Step1: まずストアで python を検索します
image.png
Step2: 次に、メインページでデバッグを F5 で直接開始できます
以下のページに注意してください。IDE 内部で使用する場合は、以下の対応するウィンドウブロックを使用します。
image.png
ファイルとデバッグブロックの指示
image.png
三、よく使うショートカットキーに慣れる#
3.1 デバッグの一般的なショートカットキー#
F9 デバッグブレークポイントの開閉
F11 ステップデバッグ
F5 デバッグの開始
image.png
デバッグの具体的なページは以下のようになります
image.png
二、使用一波#
2.1#
Vscode は軽量なコンパイラであるため、デフォルトではフォルダを開く機能を使用して対応するプロジェクトを開きます。また、最近開いたプロジェクトがリストされ、ユーザーが最近開いたプロジェクトを編集および修正するのが便利です。
image.png
ここでデフォルトでプロジェクトを開くと、以下のようなメッセージが表示されます。
Mac のコンピュータで⌘、⌥、⇧、⌃などの特殊文字を入力する方法は、私はコピーしたので、ちょっと手抜きしました。
ちょっとした豆知識：
⌘ command キー
⌥ option/alt
⇧ shift キー
^ control キーを示します
プロジェクトを開く
2.2 不明なショートカットキーを調べる#
まず⇧ ⌘ P を入力し、次に以下のようなインターフェースが表示されます。ここで「デバッグ」というキーワードを入力すると、必要なショートカットキーを迅速に検索できます。
image.png
2.3 ⇧ ⌘ F プロジェクト全体でキーワードを検索#
その後の効果は、以下の図のようになります。実際には、左側の虫眼鏡を直接クリックするのと同じ効果です。
image.png
2.4 ⌘ P すぐに見たいファイルにジャンプ#
image.png
2.5 ^ ` ターミナルを呼び出して閉じる#
ターミナルを迅速に呼び出すことができ、私たちのようにターミナルを使用するコード（例えば python や vue-cli、RN、Flutter など）には特に便利です。
2.6 アウトライン機能#
git 部分のデフォルトサポートについて、現在のプロジェクトに変更がある場合、変更が明確に表示されます。
image.png
Vue ファイルの 1 つを開くと、アウトライン機能は非常に優れた機能であり、この問題のファイルの構造が明確に示されています。
image.png
2.6.1 html ツリー#
image.png
2.6.2 less の階層#
image.png
2.6.3 js 部分#
唯一の小さな残念な点は、compute や methods などで function を分類していないことですが、この順序は非常に良いです（この点では WebStrom には劣ります）。
image.png
2.7 迅速で強力なコーディング機能#
プログラム内の問題を迅速にキャッチし、強調表示できます。複数のカーソル編集、パラメータのヒント、その他の迅速なコーディング機能をサポートしています。
image
2.8 IntelliSense 機能#
ドキュメントのコンテキストに基づいて、変数の型、関数の定義、インポートされたモジュールに対してコードのインテリジェント補完機能を提供します。
image.png
2.9 コードナビゲーションとリファクタリング#
peek と navigate to definition 機能を使用して、ソースコードを参照し、コードのリファクタリングが容易になります。
image.png
2.10 より多くの一般的な機能#
image.png
2.11 戻ると進むの意味について#
ドキュメント内で、最初に A で編集を行い、以下の図のようにタグを追加します。
image.png
次に、B でその div の css スタイルを設定し始めます。
image.png
この時、^ -を使用して A エリアに戻ることができます。
A エリアで^ ⇧ -を使用すると B エリアに戻ります。
複数回戻ることができると、ファイルを跨いで戻ることができるこの機能も素晴らしいです。
image.png
2.12 簡単に全体のインターフェースのフォントを拡大縮小#
⌘ + と ⌘ + を使って、全ページのフォントサイズを簡単に調整できます。
image.png
image.png
2.13 ファイルのフォーマットショートカットキー#
⌥ ⇧ F
image.png
2.14 VSCode の固定ウィンドウモード#
WebStorm に慣れている人は、WebStorm が.js ファイルを開くと、以下のように表示されることを明確に感じるでしょう。
webStorm の展示.png
通常のウィンドウを開くと、クリックしたときに以前のウィンドウが置き換えられます。
image.png
WebStorm と同じ方法を実現するには、上記の矢印で示されたタイトル部分をダブルクリックするだけで固定効果を得ることができます。
image.png
注意して観察すると、この時タイトルフォントが通常のフォントに変わることがわかります。
三、新しい html を作成し、Chrome でデバッグを実現する方法#
3.1 まずインストールします。以下の図のように。方法は非常に具体的で、ここでは繰り返しません。#
image.png
3.2 自分の html プロジェクトディレクトリで f5 をクリックするか、左側でデバッグボタンを選択します。#
image
image.png
しかし、直接開いたchromeでは以下のようなエラーが表示されます
image.png
3.3 上記の問題を解決する#
まず、ポップアップした launch.json に以下の内容を追加します。
{
// IntelliSenseを使用して関連するプロパティを理解します。
// ホバーして既存のプロパティの説明を表示します。
// 詳細については、次のリンクを参照してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Chromeを起動し、localhostを開く",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "attach",
"name": "Chromeにアタッチ",
"port": 9222,
"webRoot": "${workspaceRoot}"
},
{
"name": "index.htmlを起動（ソースマップを無効にする）",
"type": "chrome",
"request": "launch",
"sourceMaps": false,
"file": "${workspaceRoot}/index.html"
}
]
}
3.4 次に、デバッグページで対応するスキームを選択します。#
image.png
、上部で
image
、ドロップダウンボタンを選択すると、追加が表示され、chrome を選択します。
四、附録その他#
4.1 MAC 上の F 機能キー#
MACPro で開発しているため、デフォルトの F1 から F12 はそれぞれシステム調整ボタンに置き換えられます。F1 から F12 をデフォルト機能として設定する方法。
Mac の F キーの標準機能とキー上の特殊機能を入れ替えます。
設定 --》 キーボード --》 F1、F2 をチェックします。
4.2 TODO の指示機能を実現する#
まず、対応するプラグインをインストールします。
image.png
次に Vscode を再起動すると、以下のような TODO のツリー構造が表示されます。
image.png
五、参考リンクと書籍#
Visual Studio Code 中国語ドキュメント（一）- クイックスタート
VS Code - Chrome 用デバッガーで js をデバッグ