プログラミングは初めてですか? VSCodeをセットアップしましょう

9496 ワード
html css javascript beginners テキストリンク

This is a preview from my CSSBootcamp.com course.



スニペット、エメット、およびショートカットを使用した一般的なセットアップについても説明します.

一般的な設定



プロ仕様のコード エディター オプションが多数あります.私が開発を行っている間、3 ～ 6 年ごとに、以前のすべてのエディタよりもさらに優れた新しい「最高のコード エディタ」が登場するようです. 1 つのエディターを使用してキャリアを開始し、後で新しいより優れたエディターに切り替えても、驚かないでください.

現在、VSCode は最も人気のあるエディターです.私は単に人気があるという理由だけで何かを使用するのは好きではありませんが、VSCode が人気があるのは、それが非常に優れているからです.

必要に応じて、VSCode の前に非常に人気があった Sublime Text または Atom を使用できます.コーディングの経験があり、好みのコード エディターを既にお持ちで、このコースに参加する方もいるでしょう.それもまったく問題ありませんが、私は VSCode を使用しており、現在市場シェアを持っているため、これらのコースで提供するセットアップとエディターのアドバイスはすべて VSCode に関するものになります.

Download VSCode

Linux または Windows を使用している場合は、システム設定を確認して、最適なダウンロード オプションを確認する必要がある場合があります.

インストールが完了すると、「Getting Started」画面が表示されます.必要でない限り、紹介全体を行う必要はありません.この「はじめに」コンテンツがタブとして表示されていることに注意してください.そのタブを閉じるだけで終了できます.



セットアップが完了したら、プロのように使用する準備が整います.次のステップは、設定をカスタマイズし、すべてのクールなキーボード ショートカットを使用する方法を学習することです.

スニペット、エメット、ショートカット





スニペットは、小さなコードを記述してから Tab キーを押すと、より大きなコードのチャンクがトリガーされる方法です.全体的なアイデアは、反復的なコードをより速く記述できるようにすることです.これにより、入力する必要がなくなります. Emmet は、VSCode に既に組み込まれているスニペットの大きなライブラリです.他のコード エディターを使用している場合は、Emmet を個別にインストールする必要がある場合があります.

スニペットは素晴らしいものですが、コンピューターで利用できるさまざまなショートカットを使いこなすには、キーボードの使いこなしが必要な場合もあります.ショートカットには通常、次の 2 つのタイプがあります.
  • オペレーティング システム ベース
  • アプリケーションベース

    • 上のビデオでは、知っておくべき一般的な OS ベースのショートカットを紹介しています.また、VSCode ベース (アプリケーション ベース) のショートカットもいくつか示しました. VSCode のショートカットの公式の「チート シート」を次に示します.これらすべてを学ぼうとしないでください.多すぎます.しかし、一度にいくつかのことだけに集中すれば、大きな違いを生むことができます.

    マック



    https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

    ウィンドウズ



    https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

    Linux



    https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf

    VSCode 設定



    上記のビデオで紹介した設定は次のとおりです.

    {
  "explorer.confirmDelete": false,
  "editor.tabSize": 2,
  // Use "Subtle Match Brackets" instead of the boxy
  // ones built-in
  "editor.matchBrackets": "none",
  "editor.renderIndentGuides": false,
  "editor.renderLineHighlight": "gutter",
  "editor.minimap.enabled": false,
  "editor.formatOnPaste": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.colorTheme": "One Monokai",
  "workbench.iconTheme": null,
  "files.restoreUndoStack": false,
  // This prevents the "quick suggestions" menu from
  // popping up all the time which is something I don't
  // like to see, but that menu also makes Emmet behave
  // oddly. 
  "editor.quickSuggestions": {
    "other": false,
    "comments": false,
    "strings": false
  },
  // With turning off quickSuggestions, now we need to 
  // tell Emmet how we want to start our snippet triggers
  "emmet.triggerExpansionOnTab": true,
}


    JSON ファイルでは技術的にコメントは許可されていませんが、VSCode とその設定については、エラーなしで実行できるので、私はそうします 😎

    拡張機能



    「微妙なマッチブラケット」を使用する設定のためにインストールした拡張機能は https://marketplace.visualstudio.com/items?itemName=rafamel.subtle-brackets でした


    This is a preview from my CSSBootcamp.com course.

    Next.js でのスクロールの復元
    Android公式互換ライブラリEmojiCompat Support Library