VisualStudioCodeの使用方法

友人向けのVSCodeであるVisualStudio Codeは、非常に強力なエディターであり、人気が非常に高まっています。理由と、開発者向けの主な機能をご覧ください

前書き

当初から、編集者は奇妙な獣です。編集者の選択を激しく擁護する人もいます。 Unixの世界ではそれらがありますEmacsvsvi「戦争」、そして私は一種の想像なぜあるものと別のものの利点を議論するのに非常に多くの時間が費やされています。

過去数年間、私はたくさんのエディターとIDEを使用しました。 TextMate、TextWrangler、Espresso、BBEdit、XCode、Coda、Brackets、Sublime Text、Atom、vim、PHPStormを覚えています。 IDEとエディターの違いは、主に機能セットと複雑さにあります。

IDEよりもエディターの方が高速で邪魔にならないので、私は主にエディターを好みます。

過去12か月間、マイクロソフトのオープンソースエディターであるVS Codeを使用してきましたが、すぐに私のお気に入りのエディターになりました。

VS Codeに切り替える必要がありますか?なぜ?

あなたがそれを使うべきかどうかについての提案を探しているなら、私に言わせてくださいはい、現在使用している他のエディターから切り替える必要があります。

このエディターは、マイクロソフトの数十年にわたるエディターの経験に基づいて構築されています。

エディターのコードは完全にオープンソースであり、使用するのに支払いは必要ありません。

それは使用しています電子ベースとして、クロスプラットフォームであり、Mac、Windows、Linuxで動作することを可能にします。 Node.jsを使用して構築されており、JavaScriptを使用して拡張できます(これにより、すべてのJavaScript開発者にとってメリットがあります)。

それは速い、SublimeTextの後に私が使用した中で最も速いエディターです。

それはコミュニティの熱意を勝ち取りました:何千もの拡張機能、一部は公式、一部はコミュニティによって作成されたものであり、受賞調査

マイクロソフトは毎月アップデートをリリースしています。頻繁な更新はイノベーションを促進し、Microsoftはプラットフォームを可能な限り安定させながら、ユーザーの声に耳を傾けています(VS Codeをほぼ一日中使用して1年間、問題が発生したことは一度もないと言えます)。

入門

インターネット上のVisualStudioCodeのホームページはhttps://code.visualstudio.com/

そのサイトにアクセスして、エディターの最新の安定版リリースをダウンロードしてください。

VS Code site

インストールプロセスはプラットフォームによって異なり、慣れておく必要があります。

エディターを初めて起動すると、ウェルカム画面が表示されます。

Welcome screen for VS Code

左側に5つのアイコンが付いたツールバーがあります。これにより、以下にアクセスできます。

  • ファイルエクスプローラー
  • 探す
  • ソース管理
  • デバッガー
  • 拡張機能

冒険者

エクスプローラーで探索を始めましょう(しゃれを意図しています)。

VS Code Explorer

サイドバーの「フォルダを開く」ボタンを押すか、Open folder...ウェルカムページのリンク。どちらもファイルピッカービューをトリガーします。

ソースコードがあるフォルダを1つ選択するか、テキストファイルだけを選択して開きます。

VS Codeは、そのフォルダーのコンテンツをビューに表示します。

Opened folder

右側の空のビューには、いくつかのクイック操作を実行するためのいくつかのコマンドと、それらのキーボードショートカットが表示されます。

左側のファイルを選択すると、そのファイルがメインパネルに開きます。

Files list

編集を開始すると、タブのファイル名の横とサイドバーにもドットが表示されます。

Editing file

押すCMD+P大規模なプロジェクトでファイルを簡単に移動するためのクイックファイルピッカーが表示されます。

Quick file picker

ショートカットを使用して、ファイルをホストするサイドバーを非表示にできますCMD+B

注:Macのキーボードショートカットを使用しています。ほとんどの場合、WindowsとLinuxでは、CMTをCTRLに変更するだけで機能しますが、常に機能するとは限りません。あなたのキーボードショートカットリファレンス

ツールバーの2番目のアイコンは「検索」です。それをクリックすると、検索インターフェースが表示されます。

Search

アイコンをクリックすると、大文字と小文字を区別したり、単語全体(部分文字列ではない)に一致したり、検索文字列に正規表現を使用したりできます。

検索を実行するには、を押しますenter

左側の▷記号をクリックすると、検索および置換ツールが有効になります。

3つのドットをクリックすると、特定の種類のファイルを含めたり、他のファイルを除外したりできるパネルが表示されます。

Search and replace

ソース管理

[ソース管理]タブは、ツールバーの3番目のアイコンをクリックすると有効になります。

Source control

VS Codeには、すぐに使用できるGitサポートが付属しています。この場合、開いたフォルダーにはソース管理が初期化されていません。

上部にあるGitロゴのある最初のアイコンをクリックすると、Gitリポジトリを初期化できます。

Git repo is initialized

ザ・U各ファイルの横は、最後のコミット以降に更新されたことを意味します(最初にコミットを行ったことがないため、すべてのファイルが更新されます)。

テキストメッセージを書き込んでを押して、最初のコミットを作成しますCmd-Enter、または上部の✔︎アイコンをクリックします。

First commit

私は通常、コミットしたときに変更を自動的にステージングするようにこれを設定します。

3つのドットのアイコンをクリックすると、Gitを操作するための多くのオプションが提供されます。

Git options

デバッガ

ツールバーの4番目のアイコンは、JavaScriptデバッガーを開きます。これはそれ自体で記事に値する。それまでの間、チェックアウトしてください公式ドキュメント

拡張機能

5番目のアイコンは拡張機能に移動します。

Extensions

拡張機能は、VSCodeのキラー機能の1つです。

それらは非常に多くの価値を提供できるので、きっとあなたはそれらをたくさん使うことになるでしょう。

たくさんの拡張機能がインストールされています。

覚えておくべきことの1つは、インストールするすべての拡張機能が(多かれ少なかれ)エディターのパフォーマンスに影響を与えるということです。

インストールした拡張機能を無効にして、必要な場合にのみ有効にすることができます。

特定のワークスペースの拡張機能を無効にすることもできます(作業ワークスペースについては後で説明します)。たとえば、GoプロジェクトでJavaScript拡張機能を有効にしたくないとします。

最も人気のあるすべてのツールを含む、推奨される拡張機能のリストがあります。

Recommended extensions

私はブログのマークダウンファイルをたくさん編集しているので、VSCodeは私にmarkdownlint拡張機能。Markdownファイルのリンティングと構文チェックを提供します。

例として、インストールしてみましょう。

まず、ビュー数を調べます。それは120万です、とてもたくさんです!そして、レビューは肯定的です(4。55)。拡張機能名をクリックすると、右側に詳細が開きます。

Extension details

緑色の[インストール]ボタンを押すと、インストールプロセスが開始されます。これは簡単です。それはあなたのためにすべてを行います、そしてあなたはそれをアクティブにするために「リロード」ボタンをクリックする必要があります、それは基本的にエディタウィンドウを再起動します。

完了!行方不明などのエラーのあるマークダウンファイルを作成してテストしてみましょうalt画像の属性。それは私たちにそう教えてくれます:

markdownlint extension

以下に、見逃したくない人気のある拡張機能と、私が最もよく使用する拡張機能をいくつか紹介します。

ターミナル

VSCodeには端末が統合されています。

メニューから有効にできますView ➤ Integrated Terminal、またはを使用してCMD+\`そしてそれはあなたのデフォルトのシェルで開きます。

The terminal

これは非常に便利です。なぜなら、現代のWeb開発では、ほとんどの場合、いくつかのnpmまたはyarnバックグラウンドで実行されているプロセス。

複数のターミナルタブを作成して、それらを並べて表示したり、ウィンドウの下部ではなく右側に積み重ねたりすることができます。

Multiple terminals

コマンドパレット

コマンドパレットは非常に強力なツールです。クリックして有効にしますView ➤ Command Palette、またはを使用してCMD+SHIFT+P

モーダルウィンドウが上部に表示され、インストールしたプラグインと最後に使用したコマンドに応じて、さまざまなオプションが表示されます。

私が実行する一般的な操作は次のとおりです。

  • 拡張機能:拡張機能をインストールする
  • 設定:カラーテーマ色のテーマを変更する(私は時々夜ごとに変更します)
  • ドキュメントのフォーマット、コードを自動的にフォーマットします
  • 実行コード、Code Runnerによって提供され、JavaScriptの強調表示された行を実行します

入力を開始することでこれらのいずれかをアクティブ化でき、オートコンプリート機能により必要なものが表示されます。

入力したときに覚えておいてくださいCMD+P以前にファイルのリストを表示するには?これは、コマンドパレットの特定の機能へのショートカットです。他にもあります:

  • Ctrl-Shift-Tabアクティブなファイルを表示します
  • Ctrl-Gコマンドパレットを開いて、移動する行番号を入力できるようにします
  • CMD+SHIFT+O現在のファイルで見つかった記号のリストを表示します

どのような記号ですファイルの種類によって異なります。 JavaScriptでは、それらはクラスまたは関数である可能性があります。 Markdownのセクションタイトル。

テーマ

をクリックすると、使用するカラーテーマを切り替えることができますCMD-k+CMD-t、またはを呼び出すことによって設定:カラーテーマコマンド。

インストールされているテーマのリストが表示されます。

Themes

いずれかをクリックするか、キーボードで移動すると、VSCodeにプレビューが表示されます。 Enterをクリックして、テーマを適用します。

Light Theme

テーマは単なる拡張です。拡張機能マネージャーに移動すると、新しいテーマをインストールできます。

おそらく発見可能性のための最良のものは使用することですマーケットプレイスのウェブサイト

私の好きなテーマはあゆ、昼、夜、朝/夕方、午後のいつでも素晴らしいスタイルを提供します。

カスタマイズ

テーマは、作成できるカスタマイズの1つにすぎません。

ファイルに割り当てられているサイドバーアイコンも、優れたユーザーエクスペリエンスの大きな部分を占めています。

あなたはに行くことによってそれらを変更することができますPreferences ➤ File Icon Theme。 Ayuには、テーマの色と完全に一致する独自のアイコンテーマが付属しています。

Ayu Light

これまでに行ったすべてのカスタマイズ、テーマとアイコンテーマは、ユーザー設定に保存されます。

に移動Preferences ➤ Settings(経由でも到達可能CMD-,)それらを見るために:

Settings

ビューには、簡単に参照できるように左側にデフォルト設定が表示され、右側にオーバーライドされた設定が表示されます。テーマの名前と設定したアイコンテーマは、で確認できます。workbench.colorThemeそしてworkbench.iconTheme

を使用してズームインしましたCMD-+、およびこの設定もに保存されましたwindow.zoomLevel、そのため、次にVS Codeを起動すると、ズームの選択が記憶されます。

いくつかの設定をグローバルに適用することを決定できます。ユーザー設定、またはワークスペースに関連して、ワークスペース設定

ほとんどの場合、これらの設定は拡張機能またはVS Code自体によって自動的に追加されますが、場合によっては、この場所で直接編集します。

素敵な構成オプション

VSCodeには多くのオプションがあります。すべてが高度に構成可能であり、すべてを理解するのが難しい場合があります。

コマンドパレットを使用して構成JSONファイルを開き、[Open Settings (JSON)

コードで設定したいくつかの優れた構成オプション:

オプション 説明
"editor.minimap.enabled": false エディターの右側に表示されているミニマップを削除します
"explorer.confirmDelete": false ファイルを削除したいときに確認を求めないでください(ソース管理があります!)
"explorer.confirmDragAndDrop": false ドラッグアンドドロップの確認を無効にする
"editor.formatOnSave": true 保存時にコードを自動的にフォーマットします
"editor.formatOnPaste": true コードを貼り付けると、コードが自動的にフォーマットされます
"javascript.format.enable": true JavaScriptコードのフォーマットを有効にする
"files.trimTrailingWhitespace": true ファイルの空白を削除します
"editor.multiCursorModifier": "alt" Altキーをクリックしてマウスでクリックすると、複数の行を選択できます
"editor.detectIndentation": true ファイルのインデントに適応し、他の人のコードを編集するときに役立ちます
"editor.quickSuggestionsDelay": 0 数秒後ではなく、すぐにコードの提案を表示します

コーディングに最適なフォント

好きフィラコード。これは無料で、次のような一般的な構造を変換する非常に優れたプログラミング合字がいくつかあります。!==そして=>より良いシンボルへ:

Fira code

フォントをインストールし、これを構成に追加して有効にします。

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true`

ワークスペース

すべてのユーザー設定は、ワークスペース設定で上書きできます。それらが優先されます。たとえば、使用する他のすべてのプロジェクトとは異なるリンティングルールを持つプロジェクトを使用していて、そのためだけにお気に入りの設定を編集したくない場合に便利です。

をクリックして、既存のプロジェクトからワークスペースを作成します。File ➤ Save Workspace as...メニュー。

現在開いているフォルダがワークスペースのメインフォルダとして有効になります。

次回VSコードを開くとき、またはプロジェクトを切り替えるときは、フォルダーを開く代わりにワークスペースを開くと、コードを含むフォルダーが自動的に開き、そのワークスペースに固有に設定したすべての設定が記憶されます。

ワークスペースレベルの設定に加えて、特定のワークスペースの拡張機能を無効にすることができます。

ワークスペースが必要な特定の理由が得られるまで、フォルダーを操作できます。

理由の1つは、複数の個別のルートフォルダーを持つことができることです。あなたは使用することができますFile ➤ Add Folder to Workspace新しいルートフォルダを追加します。これはファイルシステムのどこにでも配置できますが、既存の他のフォルダと一緒に表示されます。

編集

IntelliSense

サポートされている言語(JavaScript、JSON、HTML、CSS、Less、Sass、C#、およびTypeScript)VS CodeにはIntelliSenseがあります。これは、入力時に関数とパラメーターのオートコンプリートを示唆するテクノロジーです。

コードのフォーマット

2つの便利なコマンド(Format DocumentそしてFormat Selection)は、コマンドパレットでコードを自動フォーマットするために使用できます。 VS Codeは、デフォルトでHTML、JavaScript、TypeScript、JSONの自動フォーマットをサポートしています。

エラーと警告

ファイルを開くと、右側にいくつかの色のバーが表示されます。これらの色は、コードに問題があることを示しています。たとえば、これが私が今見ているものです:

Warnings

これらはすべての警告またはエラーです。コードでそれらを見つけようとすると、赤で下線が引かれた部分が表示されます。または、を押すこともできます。CMD-Shift-M(または選択View ➤ Problems

View problems

キーボードショートカット

これまでにたくさんのキーボードショートカットを紹介しました。

それらすべてを覚えるのは複雑になり始めていますが、それらは素晴らしい生産性の助けになります。公式ショートカットのチートシートを印刷することをお勧めします。マックLinuxそしてウィンドウズ

キーマップ

他のエディターからのキーボードショートカットに慣れている場合は、1つのエディターで長い間作業していたためか、キーマップを使用できます。

VS Codeチームは、vim、Sublime Text、Atom、IntelliJ、Eclipseなどの最も人気のあるエディターにキーマップを提供します。それらはプラグインとして利用できます。開くことによってPreferences ➤ Keymaps Extensionsメニュー。

コードスニペット

スニペットはとてもかっこいいです。

開発している可能性のあるすべての言語に対して、使用できる既製のスニペットを提供する拡張機能があります。

JavaScript / Reactの場合、人気のあるものの1つはVSコードES7React / Redux / React-Native / JSスニペット

入力するだけですrfe、Tabキーを押すと、エディタに表示されます。

import React from 'react'

const $1 = props => { return <div>$0</div> }

export default $1

これらのショートカットはたくさんあり、多くの時間を節約できます。入力するだけでなく、正しい構文を検索することからも。

独自のスニペットを定義することもできます。クリックPreferences ➤ User Snippets指示に従って、独自のスニペットファイルを作成します。

拡張機能のショーケース

VS CodeCLIコマンド

コマンドパレットを開き、install 'code' command in PATHコマンド。

Enterキーを押すと、codeコマンドは、コマンドラインでグローバルに使用できます。

これは、エディターを起動して、現在のフォルダーのコンテンツを含む新しいウィンドウを開くのに非常に便利です。code .

code -n新しいウィンドウを作成します。

常に知られているわけではない便利なことは、VSCodeが2つのファイル間の差分をすばやく表示できることです。code --diff file1.js file2.js

使用率の高いCPUの問題の解決

たくさんのファイルがあるプロジェクトで、CPU使用率が高く、ファンが回転するという問題が発生しました。node_modules。この構成を追加すると、状況は再び正常に見えました。

  "files.exclude": {
    "/.git": true,
    "/.DS_Store": true,
    "/node_modules": true,
    "/node_modules/": true
  },
  "search.exclude": {
    "/node_modules": true
  },
  "files.watcherExclude": {
    "/node_modules/": true
  },

その他のdevtoolsチュートリアル: