VSCodeを10倍便利にするヒント（初心者向けガイド）

関連する推奨事項: 「vscode 基本チュートリアル 」

「VS Code は非常に使いやすく、書くのが楽しいです」 code. ."

あなたの周囲で複数の人がこのようなことを言っているのを聞いたことがあると思います。最近の JS 2019 レポートでも、VS Code が圧倒的な優位性で 1 位を獲得しました 、他のエディターは容赦なく打ち砕かれ、地面にこすられるしかありませんでした...

JS 2019 レポート

ただし、VS Code は、PyCharm/WebStorm のようにすぐに使用できるわけではありません。追加のプラグインをインストールし、いくつかのショートカット キーとスキルを習得する必要があります。スムーズにご使用頂けます。

私たちは 1 週間かけて、おそらく最も包括的な VS Code の初心者向けガイドを作成しました。このガイドは 3 つの部分に分かれています: ショートカット キーのチート シート、10 個の非常に使いやすいプラグイン、 Bai はすぐに使い始められ、効率が 2 倍になります。

# ショートカット キーのチートシート

#最初に、VS Code でよく使用されるショートカット キーの 2 つのクイック キーをまとめました。表の上位:

Mac ショートカット キー

Windows/Linux ショートカット キー

ショートカット キーVS Code に慣れて初めて、VS Code がいかに便利であるかを理解できます。本物の達人はキーボードから手を離さずにコードを書きます。

● 10 個の非常に便利なプラグイン

中国語 (簡体字) 言語パックVisual Studio Code[1]

‍ Microsoft

3,358,698 ダウンロード

インストール後
1 秒で中国語 VS code なら、もう英語が読めないことを心配する必要はありません。

街の明かりのテーマ[2]

‍ ヤミーガム

54,054 ダウンロード

これは良いテーマプラグインですが、テーマの選択は人によって異なります。「テーマ」で直接検索することもできます

には多くのテーマが用意されていますので、自分に合ったテーマを見つけてください。

美化

##[3]

‍ HookyQR 3,998,071 ダウンロード

マークを拡大したり、コードの間隔を調整したり、

コードをすばやくフォーマットしたりすることができます

また、後のメンテナンスも容易になります。

vscode-icons

[4]

‍ VSCode Icons チーム4,237,487ダウンロード

ファイルアイコンを設定します。さまざまな種類のファイルに応じて、対応するファイルアイコンを設定します。ファイルリストを見ると、一目ではっきりとわかり、必要なファイルをすぐに見つけることができます(特にファイル数や種類が多い場合）。

画像プレビュー^[5]

‍ タマスにキス

123,990 ダウンロード

カーソルが画像パス上にあると、画像プレビューが表示されるため、コードを入力するときに、画像が正しいかどうかをすぐに知ることができます。参照は正しいです。画像またはアイコン。

コード スペル チェッカー[6]

‍ ストリート サイドソフトウェア

970,955 ダウンロード数

コードを入力するときに使用する名前の多くは英語の単語を使用しています。不注意な友人はスペルを間違える可能性があります。このプラグインは、単語のスペルが間違っている場合の救済ツールです。 ##間違った単語をマークします

。また、その単語の正しいスペルを求めるプロンプトを表示することもできます。これを使用すると、単語のスペルミスが原因で長い間バグを見つける必要がなくなります。

Live Server

[7]^{‍ Ritwick Server}

3,551,236 ダウンロード

フロントエンド開発を行う場合、ブラウザを開いてプレビューおよびデバッグする必要があります。ページ。このプラグインは、静的ページと動的ページのリアルタイム プレビューを実現できます。

保存すると、ページの更新が表示されます

。手動で更新する必要はありません。

indent-rainbow

[8]

‍ oderwat ^{#567,061 ダウンロード}##コードを記述するとき、インデントが適切に配置されているかどうかを確認するメッセージが表示されます。

各ステップで 4 つの異なる色を交互に配置します。適切に配置されていない場合は、色が変わります。 red

、コードがきれいに見えるのはとても快適です。

#レインボー ブラケット

[9]

‍ 2gua

367,290 ダウンロード

丸括弧、角括弧、および曲線括弧の色を提供します。 同じ色は同じレベルの括弧を表します 分離された右括弧は赤で強調表示され、JavaScript を作成する人にとってより便利です。

Polacode-2019[10]

‍ ジェフ・ハイキン

4,704 ダウンロード

コードを美しい画像に保存できます。テーマやコードの配色も異なります。枠線の色、サイズ、影を自分で設定することもできます。 ## チュートリアル または、コード例

がドキュメントに提供されていると便利です。

#● VS Code 初心者向けチュートリアル

① VS Code をインストールする

VS Code 公式ダウンロードアドレス: https://code.visualstudio.com

お使いのコンピュータに応じて、対応するバージョンをダウンロードし、インストールしてください。

② VS コードを入力します

インターフェイスは次の部分に分かれています。まず、各部分が何をするのかを全体的に理解します。 . の

#??? # #上記の非常に使いやすいプラグインはここからインストールできます。

#④ コードの作成を開始しますまず、コンピューター上に新しいフォルダーを作成します

次に、

VScode でこのフォルダーを開きます

、またはショートカット キー (Command /Ctrl O)

#新しいファイルを作成します

(コマンド/コントロール N)、

VScode がファイルの種類を識別できるように、サフィックス

を記述する必要があります。

#⑤ コードの実行を開始します。

• コードを編集して保存し、 Live Server プラグイン プレビューの上の推奨事項を参照して、プラグインをインストールした後、

  右クリックして [Live Server で開く] を選択します
開くか
• クリック
  [ライブに移行する]
は右下隅にあります。
• ●この要約を最後に書いてください

• 長い間記事を書いてきましたが、この記事では VS Code について知っておくべきことをすべてお伝えしたいと思います。

あなたも VS Code の威力を感じたら、2020 年までにできるだけ早く使ってください。

• 少しでもお役に立てれば幸いです######参考###############^中国語パッケージプラグ-アドレス https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode- language-pack-zh-hans############^City Lights テーマ https://marketplace .visualstudio.com/items?itemName=Yummygum.city-lights-theme############^美化 https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify### ### ######^vscode-icons https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons############^画像プレビュー https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview############^コード スペル チェッカー https://marketplace.visualstudio.com/items? itemName=streetsidesoftware .code-spell-checker############^ライブ サーバー https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer###

• ^indent-rainbow https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

• ^レインボー ブラケット https:/ /marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets

• ^Polacode https://marketplace.visualstudio.com/items?itemName=jeff-hykin.polacode- 2019

プログラミング関連の知識については、プログラミング入門をご覧ください。 ！

以上がVSCodeを10倍便利にするヒント（初心者向けガイド）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。