Codemiへ乗り換えましたにゃんと役立つ!Wordpress手引き書サイトにゃんと役立つ!Wordpress手引き書サイト自分で更新できるワードプレスで自分だけのホームページの作り方やポイントを紹介中!非エンジニアのための、とっても役立つ、Wordpress手引き書サイトです。記事内に商品プロモーションを含む場合があります10年ほどmiというテキストエディタを愛用していましたが、今更VSCodeに乗り換えにゃした。10年以上コードを書いてきて、実はず〜とシンプルなエディタを愛用し続けていました。terapad→秀丸→さくらエディタ→mi(イマココで10年以上....)お陰様で、「コードを自分で書く」という能力は、かなり鍛えられたかなと。人に「コード教えて〜」って言われた時に、このシンプルなエディタって相当ハードル高く感じるみたいで...初めてコード書く時に「むっずかしい」って思わせちゃったらあかんよな...と思い直し、自分自身もエディタを変えることにしました。Code)は非常に多くの便利な機能を持っていますが、初めて使う方にはいくつかの基本的な機能を紹介しますね。エディター機能:テキストの編集、コピー、貼り付けなど基本的な操作はもちろん、複数行の同時編集(マルチカーソル)やUndo/Redoの機能もあります。言語のサポート:多くのプログラミング言語に対応しており、シンタックスハイライトや自動補完などのサポートがあります。言語ごとに拡張機能をインストールすることで、さらに機能が拡張されます。インテリセンス(IntelliSense):コード補完やパラメーターヒント、メソッドの定義にジャンプする機能などがあり、開発を効率化します。デバッグ機能:デバッグ機能を使って、ブレークポイントを設定したり、ステップ実行したりすることができます。多くの言語やプラットフォームに対応しています。Code内で行うことができます。変更点の差分を見たり、コードの履歴を調べることもできます。Codeは拡張機能(Extensions)を豊富にサポートしており、特定の言語やフレームワークに特化した機能拡張やテーマ、カスタマイズを追加することができます。タスクとランナー:タスクランナーを設定して、ビルドやテスト、その他のカスタムタスクを自動化することができます。エクスプローラーとサイドバー:ファイルやフォルダーのエクスプローラーや、プロジェクトのワークスペースを管理するサイドバーがあり、プロジェクト全体を効率的に操作できます。Codeの基本的な機能ですが、実際に使い始めるとさらに多くの便利な機能が見つかるでしょう。拡張機能をインストールすることで、さまざまな開発環境や言語に対応させることが可能です。Codeの本家サイトから、「Download」ボタンからインストールしましょう。VSCodeの本サイト(ダウンロードページ)ダウンロードページを表示すると、使用しているOSに合わせてい、ダウンロードボタンが自動表示されています。そちらをクリックして、アプリケーションをダウンロードしてください。(にゃん花子はMac使用)VSCodeの日本語化インストールできたら、日本語化しておきましょう。花子の場合は、初回起動時に「日本語化しますか?」とチュートリアルが表示されました。その場合は「はい」を選択すれば、自動で日本語化するための拡張機能をインストールしてくれます。チュートリアルなど表示されず、英語のままであれば、下記の方法で日本語化しましょう。Pack」と検索する「インストール」ボタンをクリック上記では既にインストール済みなのでボタンが非表示になっています。Packのサイドに表示される「install」ボタンをクリックしてインストールしてください。VSCodeで新しいファイルを開くVSCodeで新しいファイルを作成する手順は次の通りです。「ファイル」メニューから「新規テキストファイル」を選択してください。エディターが開き、編集が可能です。<html>のコードを書くと、途中まで入力すれば、自動で補完してくれます。VSCodeの補完機能を拡張するVScodeには最初からコード補完(IntelliSense)が備わっています。多くのプログラミング言語に対応しており、その言語サポートは拡張機能を通じてさらに広げることができます。補完に対応している主な言語JavaScriptPythonJavaC/C++PHPGoRubySwiftHTML/CSSJSONSQLその他、コード補完に便利な拡張機能をいくつかご紹介いたします。Checkerソースコード内のスペルミスをチェックするためのツールです。この拡張機能は、コードのコメント、文字列リテラル、そしてドキュメントのスペルチェックを行い、スペルミスを検出して修正提案を教えてくれます。どんな機能がある?コードのコメントや文字列リテラル内のスペルミスをリアルタイムでチェックしてくれます。スペルミスがある箇所に下線を引いて強調表示します。スペルミスの上にカーソルを置くと、右クリックメニューやクイックフィックスで修正提案を表示できます。動作例indent-rainbowコードのインデントを視覚的に分かりやすくするために、インデントレベルごとに異なる色を付けてくれます。HTMLやCSSでも役立つ拡張機能ですが、特にネストが深いコードやインデントベースの言語(例えばPython、YAMLなど)でのコードの可読性を向上させてくれます。どんな機能がある?各インデントレベルに異なる色を付けることで、コードブロックの開始と終了を視覚的に区別しやすくします。スペースとタブの両方に対応し、混在したインデントスタイルでも正しく色付けが行われます。動作例zenkakuソースコード内の全角スペースをハイライトするためのツールです。日本語環境で開発を行う際、全角スペースが意図せず含まれてしまうことがあり、これが原因でエラーが発生することも.....この拡張機能は、そうした全角スペースの存在を視覚的に示してくれる、お役立ち拡張機能です!どんな機能がある?コード内の全角スペースをリアルタイムで検出し、視覚的にハイライトします。Highlight記述したカラーコードを、その色で囲んでくれる拡張機能。カラーコードって、後から見るとどこが何色かわからないので、視覚的に色を確認できて助かりますよ!どんな機能がある?CSSで定義された色を視覚的に確認でき、正しい色が表示されるかどうかを視覚的に確認できます。Runner選択範囲のソースコードをすばやく実行するためのツールで、全体のでバックではなく、個々の機能だけをデバックしたい場合に便利な拡張機能です。どんな機能がある?CSSで定義された色を視覚的に確認でき、正しい色が表示されるかどうかを視覚的に確認できます。Cmd+Alt+N)で実行できます。Codeの出力パネルに表示されます。エラーが発生した場合も出力パネルにエラーメッセージが表示されます。Prettierコードフォーマッタ(コードの整形を自動的に行い、一定のスタイルに統一すること)をし、コードの可読性を向上させコーディングスタイルの一貫性を保ってくれます。どんな機能がある?一貫したコードスタイルを保つことができます。Save」を有効にします。これにより、ファイルを保存するたびにPrettierが自動でコードを整形します。Selection」を選択します。役立つ!Wordpress手引き書サイト記事URLをコピーしました。