vscodeツール

基本的なスキル

• キーボードショートカット
• 複数の選択肢（マルチカーソル）
  
  以前はWebstorm IDEを使用していたので、ショートカットキーに慣れているので、次の拡張機能を使用します。
  

プロキシ

VS Codeは、GoogleChromiumと同じプロキシサーバーをサポートしています。

 // The proxy setting to use. If not set, will be inherited from the `http_proxy` and `https_proxy` environment variables.
  "http.proxy": "",
  // The value to send as the `Proxy-Authorization` header for every network request.
  "http.proxyAuthorization": null,
  // Controls whether the proxy server certificate should be verified against the list of supplied CAs.
  "http.proxyStrictSSL": true,
  // Use the proxy support for extensions.
  //  - off: Disable proxy support for extensions.
  //  - on: Enable proxy support for extensions.
  //  - override: Enable proxy support for extensions, override request options.
  "http.proxySupport": "override",
  // Controls whether CA certificates should be loaded from the OS. (On Windows and macOS a reload of the window is required after turning this off.)
  "http.systemCertificates": true,

エメット

Emmet（以前はZen Codingと呼ばれていました）は、HTMLとCSSの開発効率を大幅に向上させることができるWeb開発ツールです。

注意：この拡張機能はVisual StudioCodeにバンドルされています。無効にすることはできますが、アンインストールすることはできません。

// vscode.emmet【默认：开启】
"emmet.excludeLanguages": [
    "markdown"
  ], // Emmet缩写不应该扩展的一系列语言。
  // 要在默认情况下不可用的文件类型中启用Emmet缩写扩展，请使用emmet.includeLanguages设置：
  "emmet.includeLanguages": {
    
    
    "javascript": "javascriptreact",
    "razor": "html",
    "plaintext": "pug"
  }, // Emmet缩写在特定且不被默认支持的语言（默认的如：html）中生效。添加一个新语言与Emmet所支持语言的映射关系
  "emmet.triggerExpansionOnTab": true; // 使用Tab进行Emmet扩展
  "emmet.showExpandedAbbreviation": "never"; // 在suggestions中禁止显示Emmet
  // 如果编辑器全局禁用了suggestions功能，那么Emmet提示也不会起作用，需要手动输入“ ⌃Space ”触发展示
  "editor.quickSuggestions": {
    
    
    "other": true,
    "comments": false,
    "strings": false
  }, // 控制suggestions是否在键入时自动显示。
  // 为确保Emmet建议始终位于建议列表的顶部，请添加以下设置：
  "emmet.showSuggestionsAsSnippets": true,
  "editor.snippetSuggestions": "top"

VSCodeにはEmmetフラグメントと拡張機能のサポートが組み込まれているため、追加のサードパーティ拡張機能は必要ありません。Emmet 2.0は、すでにほとんどのEmmetアクションをサポートしています。

エメットの略語とコードスニペットを拡張する方法

デフォルトでは、html、halm、pug、slim、jsx、xml、xsl、css、scss、sass、less、stylusファイル、および上記のいずれかから継承された言語など、Emmetの略語とコードセグメント拡張機能が有効になっています（ as：ハンドルバーとphp）ファイル。

1. htmlコードスニペット：

2. jsxコードセグメント：### 3. cssの省略形：

切れ端

コードスニペットは、ループや条件文などの反復的なコードパターンを簡単に入力できるようにするテンプレートです。

"emmet.showSuggestionsAsSnippets": true, // 配合suggestions使用最佳

Visual Studio Codeでは、コードスニペットは他の提案とともにIntelliSense（⌃Space）に表示され、専用のコードスニペットセレクター（コマンドパネルにコードスニペットを挿入）に表示されます。タブ補完もサポートされています。「editor.tabCompletion」：「on」を使用して有効にし、フラグメントプレフィックス（トリガーテキスト）を入力し、Tabキーを押してフラグメントを挿入します。
VS Codeには、JavaScript、TypeScript、Markdown、PHPなどの複数の言語用のフラグメントが組み込まれています。

タブ補完

1.タブ補完はサポートされていません。提案に従って手動で選択する必要があります

"editor.tabCompletion": "off", // [on off  onlySnippets] 默认是关闭的，

2.タブ補完をサポートし、タブをクリックしてコードを自動的に自動的に補完します[メモリ、非推奨]

"editor.tabCompletion": "on",

市場からコードスニペットをインストールする

言語サポートのコードスニペットを含む、いくつかの人気のある拡張機能は次のとおりです。

独自のスニペットを作成する

拡張機能なしで独自のフラグメントを簡単に定義できます。

コマンドラインインターフェイス（CLI）

Visual Studio Codeには、エディターの起動方法を制御できる強力なコマンドラインインターフェイスが組み込まれています。コマンドラインオプション（スイッチ）を使用してファイルを開き、拡張機能をインストールし、表示言語を変更し、診断を出力できます。

code --help // cli help code -h
code --version
code --list-extensions
code -n/ code --new-window

// 从命令行启动code程序
code myProject
// 或者
cd myProject
code .

IntelliSense

IntelliSenseは、コード補完、パラメーター情報、クイック情報、メンバーリストなど、さまざまなコード編集機能の総称です。「コード補完」、「コンテンツアシスト」、「コードヒント」など、他の名前を使用してIntelliSense関数を呼び出すこともあり

ます。VisualStudioCodeIntelliSenseは、既製のJavaScript、TypeScript、JSON、HTML、CSS、SCSSなどを提供します。
VS Codeは、基本的に任意のプログラミング言語でIntelliSenseをサポートします。単語ベースの補完ですが、言語拡張機能をインストールすることで、より豊富なIntelliSenseを持つように構成することもできます。

市場には多くの拡張機能があり、IntelliSenseを拡張するためにインストールすることを選択できます。

デバッグ

Visual Studio Codeの主な機能の1つは、強力なデバッグサポートです。VS Codeの組み込みデバッガーは、編集、コンパイル、およびデバッグのサイクルをスピードアップするのに役立ちます。

バージョン管理

vscode.git // Git SCM集成
vscode.git-ui // Git SCM UI集成

Visual Studio Codeにはソースコード管理が統合されており、Gitサポートが組み込まれています。他の多くのソースコード管理プロバイダーは、VS CodeMarketplaceの拡張機能を介して使用できます。

"git.enabled": false, // 禁用版本控制功能 【默认是开启的】

エディターのこのUI機能は失敗します。

VSCodeでGitHubを使用する

GitHubをVisualStudio Codeと組み合わせて、ソースコードを共有し、他のユーザーとコラボレーションします。組み込み関数は比較的単純であり、より多くの関数を市場にインストールする必要があります。

"github.gitAuthentication": true, // 控制是否在VS Code中为git命令启用自动GitHub身份验证。

GitHubの統合は、GitHub Pull Requests andIssues拡張機能を通じて提供されます。

インストール後、左側にこのツールが表示されます。

統合ターミナル

Visual Studio Codeでは、最初にワークスペースのルートから統合ターミナルを開くことができます。これは、ウィンドウを切り替えたり、既存の端末の状態を変更したりすることなく、コマンドラインタスクをすばやく実行できるので便利です。

"workbench.panel.defaultLocation": "bottom" ; // 默认的面板(terminal, debug console, output, problems)的位置（bottom, right, or left）

"terminal.explorerKind": "integrated", // 定制要启动的终端类型：integrated集成的；external外部的。
// 使用外部的
"terminal.external.windowsExec": "C:\\Windows\\System32\\cmd.exe", // 如果使用外部的， window平台的terminal
"terminal.external.osxExec": "Terminal.app", // 如果使用外部的， osx平台的terminal
"terminal.external.linuxExec": "xterm", // 如果使用外部的， wlinux平台的terminal
// 使用集成的，进行定制化
"terminal.integrated.fontSize": 12,

タスクを介した外部ツールとの統合：

ソフトウェアシステムのリンティング、ビルド、パッケージング、テスト、展開などのタスクを自動化できるツールはたくさんあります。

• TypeScriptコンパイラを含み、
• ESLintやTSLintなどのリンター
• Make、Ant、Gulp、Jake、Rake、MSBuildなどのビルドシステム