【VS Codeの使い方】初期設定から使い始めまでをブロガーが解説

2019年9月28日2020年2月1日

kimihikoです。

昔は制作バリバリでしたが、年々手を動かすことは減ってきています。

がっつりコーディングとかはもう、ほぼ全くしないです。

ですが、こうして、ブログの文章を書いて、
記事に対して装飾タグの挿入する、みたなコーディングが最近は多いです。

コーディングするとはいえ最近のブログツールの進化はめざましく、
wordpressのUI上のボタンぽちぽちでコードが自動的に挿入されて、コードを書かなくてもOKみたいな感じになってきていますね。

便利なので、僕も使っています。

とはいえそれですべてを完結できるかというと実際のところ答えはNOです。

実際には、コードをいじったほうが早かったり、
いじらざるを得ないというケースがほとんどだと思います。

そうなると、ブラウザ上で動くブログのエディターと、パソコンにインストールして使うテキストエディタ、どちらが使いやすいかといえば後者です。

というわけで何かしら別にテキストエディタを使ってます。

で、以前から何度も書いてますが、僕はずっと秀丸を愛用しています。

とはいえ、ツールは時代の流れで変化していくもの、
時代の流行りをキャッチアップしていくこともまた重要です。

ということで今日はブログ記事作成の際の装飾コーディングを想定して、昨今勢いがあって人気の高いvs codeを利用し始めてみました。

前置きが長くなりましたが、ここから本題です。

vs code 初期設定から使い始めまでの使い方

まず、僕のvs codeの利用用途について改めて書いておきます。

想定用途

ブログ記事原稿にhtml装飾するために利用。
がっつりゼロからページのコーディングみたいな利用用途、ではない、です。

やったことindex

• 日本語化
• 初期カスタマイズをサクッと
• emmet（エメット）記述
• 機能拡張インスト

やったこと

日本語化

Visual Studio Codeで日本語化する方法[Windows] – Qiita
https://qiita.com/nanamesincos/items/5c48ff88a4eeef0a8631

１、Visual Studio Codeを開く
２、viewを選択
３、comanndo palette を選択
４、configure display languageを選択
５、localeをenからjaに書き換える。

これみて、適当にさわればなんとかなります。

初期カスタマイズをサクッと

Visual Studio Code(VScode)でオススメの初期設定と拡張機能 – 自由気ままま
https://kutarosan.com/vscode-config/#TabEmmet

vs codeの設定に関する記事は、ググれば沢山でてきます。

そのなかから僕の感性では上記サイトがいいなと思いましたんで、そのままの内容を設定させてもらいました。

とくに手っ取りばやく設定、というところが共感できましたよｗ

VScodeを開いて、Command + Shift + Pを押します。
すると、VScodeの上部にコマンドパレットというものが出てきます。
ここで、>open settings json と入力しましょう。
すると、Preference : Open Settings(JSON)という項目が出てくるので、Enterキーを押します。
すると、setting.jsonというファイルが開かれるので、以下のコードをコピペしてあげましょう。

まだ何も設定していない方は、丸々上から貼ってしまってOKです。

{
“editor.formatOnSave": true,
“editor.formatOnType": true,
“emmet.triggerExpansionOnTab": true,
“workbench.editor.enablePreview": false,
“editor.tabSize": 2,
“editor.minimap.enabled": false,
“editor.hover.enabled": false
}

コードについては上の行から順番に次のような意味だそうです。

• “editor.formatOnSave”: true,は、保存時にコードを自動整形してくれる設定。
• “editor.formatOnType”: true,はタイプ時にコードを自動整形してくれる設定。
• “emmet.triggerExpansionOnTab": true,はEmmetを用いる時に使用するオプションで、Tabキーを押した時にEmmetを使用できる設定。
• “workbench.editor.enablePreview": false,はVScode上でファイルを開く時、常に新しいタブで開く設定。
• “editor.tabSize": 2,VScodeでTabキーを押した時に空けるスペースの大きさを決める設定。
• “editor.minimap.enabled": false,エディタ上にあるミニマップを非表示にする設定。
• “editor.hover.enabled": false,HTML上のタグをマウスホバーしたときの説明文を非表示にする設定。

emmet（エメット）記述

エメットという言葉を聞いてから気になっていたので、vs codeで初めて使いました。

実際に使ってみると。。便利ですね！

たとえば li　と入力して、
tabを入力するだけで、<li></li>が出現します。

そんな機能です。

ちなみに、zen codingの後継が、emmet、なんだそうで。

emmetがうまく動作しない。。？

そんなときは、編集中のビューをhtml形式で保存してみてくださいね。

機能拡張インスト

名前と機能説明を列挙しておきます。

• Auto Rename Tag　…　開始タグもしくは終了タグの一部を編集すると、もう片方のタグも自動的に修正される。
• Auto Close Tag　…　開始タグの　>　を入力したら、そのタグに対応する閉じタグが自動挿入されます。
• htmltagwrap　…　テキストを選択してalt＋wを入力すると、そのテキストをタグで囲みます。（そのタグの種類は設定可能）

機能拡張の設定に入るには、左メニューの一番下のアイコン（四角形が並んだようなアイコン）をクリックします。

思いのほかうれしかったこと

なにげに、コントロール＋マイナスボタンを入力したらちゃんと、文字が小さくなりました！

文字だけでなく、ＵＩも全部サイズ変更されたところに未来を感じました。でも、コードエリアの文字サイズの変更だけでよかったんですけどね。笑

コントロール＋プラスボタンだと文字が大きくなりますよ。

僕の場合、ブログ記事を書きながら、文字の大きさを少し小さく変更して、文字は読みづらくなっても文章の全体像をみたい、なんてことがあって、
秀丸のほうではカスタマイズしてそのショートカットで文字サイズ変更できるようにしてました。

vs codeではデフォルトで同じショートカットで文字サイズ変更できたので、思いのほかうれしかったですね。

テスト環境

テスト環境は以下の通りです。

vs code 1.38
windows 10 pro

おしまいに

本当にさくっとしてか使ってませんがvs codeを初めて利用してみました。

評判の通り、軽快で使いやすいツールだと感じましたね。

もちろん慣れは必要かと思いますが、それはvs codeに限りません。

癖の強い感じも無くて、使っていれば自然と手に馴染んでくるんだろうな、という感覚があったのもよかったですね。

当然といえば当然ですが、この記事のベースはvs code上で書きましたよ。

ただ、ブログ記事を仕上げるうえで使う場合は、ブログ独自で実装しているタグの利用や、素早くビジュアルプレビューできる点で、vs codeとブログ上のエディタを並行して使うといい感じなのかなと思いました。

いや、、正直、全体的な使い心地で秀丸を超えるもんなんてあるのか（いや、ないだろう）なんて思ってたんですが、少し使ってみただけですけど、全体をとおして、なかなか使い心地は良好でした。

秀丸ですら結構カスタマイズして使いやすくしているのに、
初期から少し設定をいじって、この使い心地はさすがだと思いました。

また冒頭から想定する利用用途をブログ記事の執筆および装飾としてきましたが、vs codeはゼロからのコーディングにも利用しやすい時短ツールであるというのが実際に使ってみたあとの感想です。

以上です。

関連記事