VS Code (1.2.0) の最新のハイライトと機能の完全な紹介_html/css_WEB-ITnose

VS Code の 5 月のリリースでは、いくつかの優れた新機能が追加され、多くの既存の機能が改善され、重要なバグが修正されています。

このバージョンのハイライトは次のとおりです:

• : 挿入されたスペースを自動的に削除し、すべての一致をショートカット キーで選択できます。ピークビューのサイズを変更できるようになりました。
• : 検出されたすべての問題の修復をサポートするようになりました。TSLint はクイック フィックスをサポートし、除外する必要があるファイルを設定できます。
• : コード補完 (IntelliSense)、定義をジャンプまたはプレビューできます。検索呼び出し関数は、CSS、SCSS、および LESS ファイル内の CSS 変数の検索をすでにサポートしています。
• : 新しく統合されたターミナルは、VS Code でのシステム シェルの呼び出しをサポートします。ターミナルでのショートカット キーのバインド解除をサポートし、内部バージョンで使用できるラベルでの進行状況のサポートを追加しました。
• : デバッグ コンソールの表示方法を制御できるようになりました。シングルステップ デバッグのパフォーマンスも向上し、多数のローカル変数を含む Node.js プログラムのデバッグ パフォーマンスが大幅に向上しました。
• : コマンドラインから拡張機能のリストを表示し、拡張機能をインストールおよびアンインストールできるようになりました。拡張機能の開発者向けに、デバッグ、TextMate 構文、コマンド API を拡張し、言語サーバー プロトコルを改善しました。

詳しくは以下をお読みください。

エディタ

スペースを自動的に削除する

新しい行を開始すると、エディタはインデント規則と前の行の内容に基づいてスペースを自動的に挿入します。これにより、ファイル内に余分なスペースが残ります。 PR #5423 の取り組みのおかげで、新しい editor.trimAutoWhitespace 設定により、エディターは自動的に追加された空白を追跡し、特定の場所での入力時などの状況に基づいて空白を削除できるようになりました。この設定はデフォルトでオンになっていることに注意してください。

見つかった一致をすべて検索

ショートカット キー (OS X の場合は ⌥Enter、Windows および Linux の場合は Alt+Enter) を使用して、見つかったすべてのオプションをすばやく選択できます。以前の検索と置換よりも効率が高く、VS Code のマルチカーソル操作が大幅に改善されました。 PR #5715 のご尽力に感謝します。

単語ベースのプロンプトを構成する

言語サービスがセマンティック補完 (プロンプト) を提供できない場合、VS Code はデフォルトで単語ベースのプロンプトを提供します。これが、VS Code で特定の言語コードを記述するときに、IntelliSense がファイル内のすべての単語を一覧表示する理由です。この提案リストを表示したくないユーザーもいます。その場合は、editor.wordBasedSuggestions で設定をオフにすることができます。

プレビューウィンドウのサイズを変更する

プレビューウィンドウエディタは、関連参考文献の検索結果を表示するために使用され、ステートメントのプレビュー機能を提供します。プレビュー ウィンドウのサイズ変更がサポートされるようになりました。

ワークベンチ

タブ

注: タブ機能は、安定バージョン 1.2.0 (2016 年 5 月) には含まれていません。 VS Code 内部バージョンで使用できます。

タブのサポートは、ユーザーのフィードバックから生まれた機能です。この機能を完全に実装するには数回の反復が必要ですが、5 月のリリースでは開発の進捗状況を示したいと考えました。

このマイルストーンでは、開いている編集ウィンドウのスタック管理に焦点を当てます。下の図では、左側のパネルには 2 つのエディタが開いており、中央のパネルには 4 つのエディタが開いており、右側のパネルにも 3 つ以上のエディタが開いていることがわかります。斜体でリストされているファイルはプレビュー ファイルです。開いているエディターのリストで必要なファイルを見つけて Tab を使用して選択しなくても、クリックしてファイルを参照できます。

エディタを閉じると、今のようにパネルを直接閉じるのではなく、最後に開いたエディタ スタックが復元されます。これに加えて、私たちは多くのユーザーエクスペリエンス調査も実施しています。研究の結果をデザインに適用することで、これらの改善点は次のとおりです:

• 再設計されたオーバーフロー アイコン
• クイック オープン (クイック オープン) ファイルが固定されているかプレビューされているかを指定する機能
• プレビューでファイルを変換するコマンドを追加ステータスを固定ステータスに変更

これらのタスクは master ブランチに追加されており、内部バージョンで使用できます。

端末統合

ユーザーのフィードバックで 2 番目にランクされた機能は、端末統合、問題 #143 です。ターミナルを統合環境に直接組み込むと、ターミナルの初期パスが作業ディレクトリになります。端末の操作が必要な場合、ウィンドウの切り替えや端末の状態を変更することなく、素早く作業を開始できます。

5 月のリリースでは、端末統合機能の初期バージョンをリリースしました。ショートカット キーを使用してターミナルを開くことができます。OS X のショートカット キーは ⌃`、Windows および Linux のショートカット キーは Ctrl+` です。また、コマンド パレットの 表示 | 統合ターミナルの切り替え メニューから開くこともできます。

デフォルトで開かれるシェルは、システムによって設定された環境変数によって決まります。Linux と OS X は $SHELL 変数を使用し、Windows は %COMSPEC% 変数を使用します。これらの変数の内容は、オプションでterminal.integrated.shell.*設定を設定することでオーバーライドできます。開いた統合ターミナルは、通常のターミナルと同様に使用できます。

これは初期バージョンであることに注意してください。現在、VS Code は 1 つのターミナルのみをサポートしており、コピー アンド ペーストなど、まだサポートされていないキーボード関連の機能がいくつかあります。 Windows 10 ユーザーは、cmd.exe を呼び出す際に問題が発生する可能性があります。このような問題が見つかった場合は、#143 の説明に従って古いバージョンの cmd.exe を有効にしてください。問題と機能リクエストの完全なリストは、ここでご覧いただけます。

注: 統合ターミナルの起動 ショートカット キー (OS X の場合は ^`、Windows および Linux の場合は Ctrl+`) は、以前は オープン エディターの切り替え によって占有されていました。ニーズに応じてカスタマイズできます。

ショートカット キーのキャンセル ルールを定義する

ここで、デフォルトのショートカット キーをキャンセルするためのショートカット キー ルールを定義できます。すべての VS Code ショートカット キーは keybindings.json を通じて簡単に再定義できますが、ショートカット キー Tab または Esc のオーバーロードなど、一部の特別なカスタマイズを行うのは難しい場合があります。このバージョンから、コマンドの前に - を追加することで、ショートカット キーのキャンセル ルールを簡単に定義できるようになりました。

例は次のとおりです:

// In Default Keyboard Shortcuts...{ "key": "tab", "command": "tab", "when": ... },{ "key": "tab", "command": "editor.emmet.action.expandAbbreviation", "when": ... },{ "key": "tab", "command": "jumpToNextSnippetPlaceholder", "when": ... },{ "key": "tab", "command": "acceptQuickFixSuggestion", "when": ... },{ "key": "tab", "command": "acceptSelectedSuggestion", "when": ... },...// To remove the second rule, for example, add in keybindings.json:{ "key": "tab", "command": "-editor.emmet.action.expandAbbreviation" }

Language

CSS Variables

CSS ファイル内の変数のサポートは、現在ドラフト状態にある新機能の提案です。 VS Code は現在、CSS 変数の豊富なコード ヒント (IntelliSense) を提供するだけでなく、定義に移動して定義をピークし、同じファイル内のすべての参照を検索します。

たとえば、ここでは --bg-color、OS X ショートカット キー ⌥F12、Windows ショートカット キー Alt+F12、Linux ショートカット キー Ctrl+Shift+F10 の定義をプレビューできます。

Linter (リンター)

ESLint

ESLint 拡張機能が「すべて修復」コマンドをサポートするようになりました。関数のショートカットは、次のような eslint.fixAllProblems を通じて設定できます:

[    { "key": "ctrl+shift+alt+f",   "command": "eslint.fixAllProblems",                                     "when": "editorTextFocus" }]

TSLint

TSLint 拡張機能は、lint 対象のファイルから指定されたファイルを除外することをサポートするようになり (PR #47)、また、TSLint アラームのクイックフィックスの提供もサポートします。 ( PR #40 ) 機能。プルリクエストを送信してくれたすべての開発者に感謝します。

デバッグ

デバッグ

デバッグコンソールを開く制御

VS Codeでより良い内部デバッグコンソールを提供するために、launch.jsonにinternalConsoleOptions設定を導入しました(#6159を参照)。 VS Code でデバッグされたコードを監視しながら、デバッグ中に外部ターミナルを使用したい場合、この機能は非常に役立ちます。提供される関数は次のとおりです:

• NeverOpen: VS Code はデバッグ コンソールを開きません。
• openOnFirstSessionStart: VS Code は、最初のデバッグ セッションでデバッグ コンソールを開きます。
• openOnSessionStart: VS Code は、デバッグ セッションごとにデバッグ コンソールを開きます。

Node.js のシングルステップ デバッグのパフォーマンスを向上させる

VS Code の定義は、軽量かつ高速に保つことであるため、スコープ内に多数のローカル変数があるコードのシングルステップ デバッグのパフォーマンスを向上させる必要があります。 Node.js のデバッグ用に次の調整を行いました:

• スコープに 100 を超えるローカル変数 が含まれる場合、VS Code はこのスコープの自動拡張機能をオフにします。
• スコープを手動で拡張すると、最初の 100 個 のローカル変数のみが表示されます。

スコープ ヒントには、最初の 100 個のローカル変数のみが表示されます。

上位 100 に含まれない変数について学ぶには、変数を Watch 式に追加し、その値をデバッグ コンソールで表示するだけです。

拡張機能の作成

拡張機能 API のデバッグ

VS Code デバッガー コンポーネントの拡張 API として vscode.startDebug コマンドをオープンしました。このコマンドを使用すると、起動構成ファイル名または構成オブジェクトを渡して、プログラムでデバッグ セッションを開始できます:

    let launchConfig = {        type: "node",        request: "launch",        program: "${workspaceRoot}/test.js",        cwd: "${workspaceRoot}"    };    vscode.commands.executeCommand('vscode.startDebug', launchConfig).then(() => { vscode.window.showInformationMessage('Debug session started successfully'); }, err => { vscode.window.showInformationMessage('Error: ' + err.message); });

詳細については、こちらをご覧ください。

TextMate 文法挿入

拡張機能を通じて TextMate 文法を追加し、既存の文法に新しいルールを挿入して強調表示を実現できるようになりました。これにより、URL や TODO タグの言語間の強調表示など、文字列値やコメントに色を追加できます。

"grammars": [  {    "scopeName": "source.todo",    "path": "./syntaxes/todo.tmLanguage",    "injectTo": [  "source.js", "source.ts" ]  }]

ファイル比較

diff エディターを通じて任意の 2 つのリソースを比較するための新しい API コマンドを追加しました。比較コマンドの例: command.executeCommand('vscode.diff', uri1, uri2) 。

拡張機能のサンプルが更新されました

新しいリッチ拡張機能により、仮想ドキュメント、イベント、言語機能の豊富なサンプルがコマンドとして提供されます。同時に、HTML プレビューの例も更新されました:

• contentprovider-sample
• previewhtml-sample

调试转换器（Debug Adapter）：支持“单个”或“全部”线程控制操作

在之前的VS Code调试协议中，我们为 StoppedEvent 增加了 allThreadsStopped 属性。通过它，调试转换器能够向前端报告是一个线程还是所有线程已经停止。感谢开发者的反馈，让我们知道 ContinueRequest 也需要这个属性。

在1.9.0版本的 VS Code调试协议 ，我们为 ContinueRequest 增加了 allThreadsContinued 属性。通过它，调试转换器能够向UI报告是一个线程还是所有线程在继续执行。更多细节可以在 这里 找到。

语言服务器协议

语言服务器协议 现在为遥测通知（telemetry notification）提供支持。在 节点客户端开发库 中已经实现了消息追踪功能，可以用来追踪服务器中的问题。通过 ${clientName}.trace.server 设置启用。其中clientName是创建 LanguageClient 实例的名字，例如 eslint.trace.server 表示这是针对ESLint的linter服务。

命令行扩展管理

为了让自动化配置VS Code变得更加简单，现在你可以从命令行查看扩展列表、安装和卸载扩展。

示例：

code --list-extensionscode --install-extension ms-vscode.cpptoolscode --uninstall-extension ms-vscode.csharp

Monaco编辑器

VS Code的核心是“Monaco”代码编辑器。你可以在在许多微软的产品中找到“Monaco”编辑器，比如OneDrive、VSTS、Azure、TypeScript playground，甚至在IE和Edge的F12工具中都可以发现它的身影。

我们的目标是让每个人都可以使用“Monaco”编辑器并且可以在任何浏览器中的使用。今天，我们需要面临的挑战是 vscode 仓库中嵌入的编辑器以及语言服务扩展依赖（非浏览器）客户端使用的技术。

要实现编辑器发布，第一步是 探索 ，将TypeScript语言服务从VS Code的源代码中提取出来作为独立的编辑器API使用。

接下来的几周，我们会继续重构API并且将打包自动化，目标是让“Monaco”编辑器可以在六月的VS Code版本中发布。

值得关注的Bug修复

• 959 ：在缩放和滚动时字体变得fuzzy
• 1000 ：离线状态时响应很慢
• 2717 ：设置“Define Keybinding”后keybindings.json失效
• 4541 ：韩国语输入有问题
• 5645 ：TS仓库对象调用响应缓慢
• 5780 ：Linux下外部终端默认值可以改进
• 6029 ：node v6无法调试
• 6151 ：滚动条很丑，高dpi环境下显示不清晰
• 6432 ：安装完成后，Unity桌面没有马上安装
• 6525 ：文件名带空格的文件在Linux CLI下打开失败
• 6530 ：磁盘驱动器字符大小写不匹配时，源代码地图不显示
• 6593 ：在Unbuntu下有时候会出现两个桌面
• 6609 ：需要修改”fold all“与”unfold all“快捷键
• 6878 , 6916 : 处理压缩的（minified）js文件会卡顿或崩溃

1.2.0版本更新 已关闭的Bug 和 已完成的功能 。

下载

下载： Windows | OS X | Linux 64-bit .zip .deb .rpm | Linux 32-bit .zip .deb .rpm

原文： May 2016 (version 1.2.0) 作者： code.visualstudio.com 译者： 赖信涛 责编： 钱曙光