デザイン × Web × 秘書スキルでサポートするお仕事マルチパートナー完山美弥子 【vscode】をインストールして、実際にコードを書いてみよう!エディタを準備しよう! – うぃずデザイン – with design

完山美弥子 かんやまみやこ うぃずデザイン

【vscode】をインストールして、実際にコードを書いてみよう!エディタを準備しよう!

vscodeとはMicrosoft Corporationが提供するコーディングや編集作業に適した高機能で軽量なソースコードエディタです。
VS Codeは、テキストエディタでありながら、デバッグ機能・バージョン管理(Git)との統合、豊富な拡張機能によるカスタマイズ性などを備えています。

主な言語はHTML、CSS、PHPなど多くのプログラミング言語に対応しています。それでいて無料なのがすごいところです!!
まずは、このソフトをインストールしてみましょう!!

Microsoft Storeからのインストール

以下のサイトに詳しく書かれていますので、ご参考にしてください^^
https://www602.math.ryukoku.ac.jp/Prog1/vscode-win.html

WEBからのインストール

以下のサイトに詳しく書かれていますので、ご参考にしてください^^
https://qiita.com/YurimyMiyu/items/5ce7821f1e3e5905c3ee

上記のサイトよりインストールが終わると拡張機能で日本語機能まで設定できていると思います!!
次に、言語ごとにコーディングしていくことになりますが、言語に合わせて拡張子を有効・無効にする必要があります。
それが意外となれないとややこしいです。。私は匙を投げました(笑)多分そんな方は多いはず!ここからが私の流儀ですが、拡張子はそれぞれ有効にしたまま、jsonでコントロールします!
案外これが簡単です^^是非コピペしてください!!

HTML、CSSであれば便利な拡張子は以下です!

  1. Prettier – Code formatter
  2. CSS Formatter
  3. Path Intellisense

これを入れておけばとりあえずは整形に問題なく、動くはずです!!


Prettier – Code formatter

公式 https://prettier.io/ とはコードフォーマッタです。htmlのコードを保存時に綺麗にフォーマットしてくれます!


CSS Formatter

CSSのコードをフォーマットしてくれます!


Path Intellisense

階層内のファイル名候補をあげてくれます!タイプミスもなくなりますしいいです!!
画像を引っ張るときに使います!


1.設定を開く


2.ワークスペースを選択

フォルダーのリストより該当するプロフェクトを選択します。

 

3.jsonの設定

   

4.以下をコピペ

{
  “editor.formatOnSave”: true,
  “files.autoSave”: “afterDelay”,
  “editor.defaultFormatter”: “esbenp.prettier-vscode”
}

     

5.保存

これで『nekonote-co-2025』は保存時に整形ができるようになりました!
これはHTML,CSS用の設定です!WordPressはこれとは別の拡張機能です。