WEBコーティングにおススメコードエディタ Visual Studio Code

今回はWEBデザインをオリジナルでコーティングする際に、必要なコードエディタでおススメの

Visual Studio Code についてご紹介します。

以前までAdobeが開発したBracketsを使用していたのですが、2021年9月1日をもってサポートが終了することに伴い、 Visual Studio Code への移行を公式サイトも進めています。

【記事一部抜粋】
AdobeとMicrosoftのパートナーシップを通じて、オープンソース上に構築されたMicrosoftの無料コードエディターであるVisual StudioCodeに移行することをお勧めします。
Brackets 公式サポート


早速、私自身も Visual Studio Code をダウンロードして作業開始！！
最初は移行組なので、少し慣れない部分もありましが、２,３時間、どんな風に作業進めたらいいかな？とかを実際に触ってみて、あとは1つサイトを Visual Studio Code で作ったら、あっという間に慣れました。これからWEBデザイナー・WEBコーダーとして活躍する初心者の方にもおススメです。

では、早速ダウンロードから簡単な操作方法をご紹介します！

Visual Studio Code をダウンロード

Googleで Visual Studio Code もしくは略称の VS Codeと入力して検索。
大概一番上に、Microsoftの公式ページが出てくるのでクリック！！

ダウンロードが完了すると、早速開いて見ましょう！！

あれ？画像みたいに、日本語になっていない！
そう思った方もご安心ください。 Visual Studio Code は拡張機能があり、様々な機能を追加したり、
元々の設定をカスタマイズすることが可能です。

例えば日本語化したい場合は

Visual Studio Code を日本語化

まず拡張機能メニューを開きます。

そして、拡張機能検索部分で Japanese Language Pack for Visual Studio Code と検索！！
画像の機能が表示されるのでインストールすればOKです。
画像はすでにインストール済なので日本語になっていますが、恐らくインストールボタンはinstallと表示されているかと思います。

インストール後に日本語にすぐ変わらない場合は、一度 Visual Studio Code を閉じて、再度開くとOKです。
Visual Studio Code には他にもたくさんの機能があるので、ご自身の作業環境に応じてインストールしてください。

『VS Code やりたいこと』 でGoogle検索すれば、大概やりかたの記事が出てきます笑

Visual Studio Code を使ってみる

実際にフォルダを開くから1つフォルダを開いてみます。
今回は私のデスクトップにある、コーティング用のディフォルトフォルダを開きます。

上記の画像のように、フォルダ内のファイルが表示されます。
画像はファイルの拡張子によって、自動的にアイコンの柄や色が分かれているのですが、
これは拡張機能で　vscode-icons　を入れている為なので、同じ様にしたい方は拡張機能のインストールを！！

もう一つ、コーティング環境ではかかせない、プレビューが見れるようにする機能。
HTML / CSS / javascriptなどフロントエンドの言語はこの拡張機能を入れるだけで、ローカル環境で現在作成中の内容が観ることができます。

拡張機能検索で、Live Server と検索。

インストールが完了すると、HTMLファイルを開き、右下のGo Liveをクリック！！

Go Liveクリックでブラウザが立ち上がり、ローカルで観ることができました！！

ちなみに、Go Liveで開くブラウザをGoogleのchromeにしたい場合は、 Live Server の設定が可能です。

拡張機能の設定を開くと、『Live Server › Settings: Custom Browser』の部分の内容をchromeにするだけです！

いかがでしょうか。
他にもたくさんの便利な機能が追加できます。
コードを予測してくれる拡張機能や、エラーを教えてくれる拡張機能などなど。
必要に応じて、Google検索でおススメの拡張機能を追加していってください。

【補足】 Visual Studio Code になると、Bracketsの時のショートカットキーとは変わってしまいます。
その為、 Bracketsの時のショートカットキー が使いたい！そっちの方が慣れている！という Bracketsからの移行組は、【Brackets Keymap】という拡張機能をインストールすればOKです。
この拡張機能でBracketsのキーに変わります。（私はCtrl + d で複製に慣れていたので、Brackets Keymapがあってよかった！）

ここまでだけで、フロントエンドの開発なら特に問題なく進めれるかと。
phpなどのバックエンドのコードももちろん Visual Studio Code で扱えます！

ただ、バックエンドのサーバーで動かすものをローカルでプレビューしようとすると Visual Studio Code だけでは難しいです。
私はXAMPPをダウンロードすることにより、XAMPPと Visual Studio Code でphpでの開発環境を構築しています。

XAMPPを使って、phpのローカル開発環境構築！

WordPressにサイトを反映する時はphpになるので、WordPressの使用を検討しているWEBデザイナーやコーダーの方は、XAMPPの導入もおススメします。

では、今回はこの辺で。