ECサイトを作る時の要件定義【無料テンプレあり】
にゃん花子
にゃんと役立つ！Wordpress手引き書サイト
【Visual Studio Codeのインストールと拡張機能】miからVisual Studio Codemiへ乗り換えました
にゃん花子
記事内に商品プロモーションを含む場合があります
10年ほどmiというテキストエディタを愛用していましたが、今更VSCodeに乗り換えにゃした。
10年以上コードを書いてきて、実はず〜とシンプルなエディタを愛用し続けていました。
terapad→秀丸→さくらエディタ→mi（イマココで10年以上….)
お陰様で、「コードを自分で書く」という能力は、かなり鍛えられたかなと。
ただ人に「コード教えて〜」って言われた時に、このシンプルなエディタって相当ハードル高く感じるみたいで…初めてコード書く時に「むっずかしい」って思わせちゃったらあかんよな…と思い直し、自分自身もエディタを変えることにしました。
miからVSCodeに乗り換えた理由（主に上の2つが大きい）
- 初心者向けにコードを教えることが増えた（miはハードル高い）
- フルコーディングする機会が少なくなった
- Windows、Linux、Macで使えるので、同じ環境で作業できる（テキストディタもOK）
- デバック機能が充実（テキストディタは自分でやるしかない）
- プロジェクト管理ができる（テキストディタは、設定しないとできない）
- 日本語対応している（テキストディタもOK）
このblogでわかること
- Visual Studio Code（VS Code）の基本的な機能
- Visual Studio Code（VS Code）のインストールと日本語化
- Visual Studio Code（VS Code）の便利な拡張機能
目次
Google広告
VSCodeは何ができるの？
Visual Studio Code（以下、VS Code）は非常に多くの便利な機能を持っていますが、初めて使う方にはいくつかの基本的な機能を紹介しますね。
- エディター機能:
- テキストの編集、コピー、貼り付けなど基本的な操作はもちろん、複数行の同時編集（マルチカーソル）やUndo/Redoの機能もあります。
- 言語のサポート:
- 多くのプログラミング言語に対応しており、シンタックスハイライトや自動補完などのサポートがあります。言語ごとに拡張機能をインストールすることで、さらに機能が拡張されます。
- インテリセンス（IntelliSense）:
- コード補完やパラメーターヒント、メソッドの定義にジャンプする機能などがあり、開発を効率化します。
- デバッグ機能:
- デバッグ機能を使って、ブレークポイントを設定したり、ステップ実行したりすることができます。多くの言語やプラットフォームに対応しています。
- Gitの統合:
- Gitリポジトリの初期化、コミット、プッシュ、プルなどの操作をVS Code内で行うことができます。また、変更点の差分を見たり、コードの履歴を調べることもできます。
- 拡張機能:
- Visual Studio Codeは拡張機能（Extensions）を豊富にサポートしており、特定の言語やフレームワークに特化した機能拡張やテーマ、カスタマイズを追加することができます。
- タスクとランナー:
- タスクランナーを設定して、ビルドやテスト、その他のカスタムタスクを自動化することができます。
- エクスプローラーとサイドバー:
- ファイルやフォルダーのエクスプローラーや、プロジェクトのワークスペースを管理するサイドバーがあり、プロジェクト全体を効率的に操作できます。
これらはVS Codeの基本的な機能ですが、実際に使い始めるとさらに多くの便利な機能が見つかるでしょう。特に拡張機能をインストールすることで、さまざまな開発環境や言語に対応させることが可能です。
VSCodeのインストール
まずインストールは、Visual Studio Codeの本家サイトから、「Download」ボタンからインストールしましょう。
ダウンロードページを表示すると、使用しているOSに合わせてい、ダウンロードボタンが自動表示されています。そちらをクリックして、アプリケーションをダウンロードしてください。
（にゃん花子はMac使用）
VSCodeの日本語化
インストールできたら、日本語化しておきましょう。
にゃん花子の場合は、初回起動時に「日本語化しますか？」とチュートリアルが表示されました。その場合は「はい」を選択すれば、自動で日本語化するための拡張機能をインストールしてくれます。
もし、チュートリアルなど表示されず、英語のままであれば、下記の方法で日本語化しましょう。
VSCodeを起動して、「Ectensions」をクリック
検索BOXで、「Japanese Language Pack」と検索する
「インストール」ボタンをクリック
上記では既にインストール済みなのでボタンが非表示になっています。
地球儀マークのJapanese Language Packのサイドに表示される「install」ボタンをクリックしてインストールしてください。
VSCode再起動後、日本語化されています。
VSCodeで新しいファイルを開く
VSCodeで新しいファイルを作成する手順は次の通りです。
「ファイル」メニューから「新規テキストファイル」を選択してください。
エディターが開き、編集が可能です。
<html>のコードを書くと、途中まで入力すれば、自動で補完してくれます。
VSCodeの補完機能を拡張する
VScodeには最初からコード補完（IntelliSense）が備わっています。多くのプログラミング言語に対応しており、その言語サポートは拡張機能を通じてさらに広げることができます。
補完に対応している主な言語
- JavaScript
- Python
- Java
- C/C++
- PHP
- Go
- Ruby
- Swift
- HTML/CSS
- JSON
- SQL
その他、コード補完に便利な拡張機能をいくつかご紹介いたします。
Code Spell Checker
ソースコード内のスペルミスをチェックするためのツールです。この拡張機能は、コードのコメント、文字列リテラル、そしてドキュメントのスペルチェックを行い、スペルミスを検出して修正提案を教えてくれます。
どんな機能がある？
コードのコメントや文字列リテラル内のスペルミスをリアルタイムでチェックしてくれます。スペルミスがある箇所に下線を引いて強調表示します。
スペルミスの上にカーソルを置くと、右クリックメニューやクイックフィックスで修正提案を表示できます。
動作例
indent-rainbow
コードのインデントを視覚的に分かりやすくするために、インデントレベルごとに異なる色を付けてくれます。HTMLやCSSでも役立つ拡張機能ですが、特にネストが深いコードやインデントベースの言語（例えばPython、YAMLなど）でのコードの可読性を向上させてくれます。
どんな機能がある？
各インデントレベルに異なる色を付けることで、コードブロックの開始と終了を視覚的に区別しやすくします。
スペースとタブの両方に対応し、混在したインデントスタイルでも正しく色付けが行われます。
動作例
zenkaku
ソースコード内の全角スペースをハイライトするためのツールです。日本語環境で開発を行う際、全角スペースが意図せず含まれてしまうことがあり、これが原因でエラーが発生することも…..
この拡張機能は、そうした全角スペースの存在を視覚的に示してくれる、お役立ち拡張機能です！
どんな機能がある？
コード内の全角スペースをリアルタイムで検出し、視覚的にハイライトします。
Color Highlight
記述したカラーコードを、その色で囲んでくれる拡張機能。カラーコードって、後から見るとどこが何色かわからないので、視覚的に色を確認できて助かりますよ！
どんな機能がある？
CSSで定義された色を視覚的に確認でき、正しい色が表示されるかどうかを視覚的に確認できます。
Code Runner
選択範囲のソースコードをすばやく実行するためのツールで、全体のでバックではなく、個々の機能だけをデバックしたい場合に便利な拡張機能です。
どんな機能がある？
CSSで定義された色を視覚的に確認でき、正しい色が表示されるかどうかを視覚的に確認できます。コードの一部または全体を選択し、右クリックメニューから「Run Code」を選択するか、ショートカットキー（デフォルトは Ctrl+Alt+N または Cmd+Alt+N）で実行できます。
コードの実行結果はVS Codeの出力パネルに表示されます。エラーが発生した場合も出力パネルにエラーメッセージが表示されます。
Prettier
コードフォーマッタ（コードの整形を自動的に行い、一定のスタイルに統一すること）をし、コードの可読性を向上させコーディングスタイルの一貫性を保ってくれます。
どんな機能がある？
一貫したコードスタイルを保つことができます。
ファイル保存時に自動整形:
- VS Codeの設定で「Format On Save」を有効にします。これにより、ファイルを保存するたびにPrettierが自動でコードを整形します。
{ "editor.formatOnSave": true }
コマンドパレットを使用:
- コマンドパレット（
Ctrl+Shift+PまたはCmd+Shift+P）を開き、「Format Document」や「Format Selection」を選択します。
まずはチュートリアルをやってみよう！
インストール、日本語化、拡張機能を追加したら、VSCodeを再起動しチュートリアルをやってみましょう！
Google広告
ABOUT ME
「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め｜文系から独学でWeb屋さんになった人｜インフラ分野のわかるWebディレクター｜主にWordpressのサイト立ち上げ、リプレイス、運用をしています｜Shopifyもはじめました | アニメ・映画・ドラマを聴きながら、ブツブツ呟きながら、制作するのが好きです | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中｜小学１年生の壁に負けじと２０２４年も奮闘します
