Code(以下VScode)ですが、初期設定だと便利な機能がオフになっていたり、逆にいらない機能がオンになっている場合があります。Web制作において作業を効率化できる拡張機能が複数存在します。本記事では、最初にやっておくべき設定と、入れておくと便利な拡張機能を紹介します。以下、記事に入ります。まとめ初期設定まずは、手っ取り早く初期設定を行ってしまいます。Settings(JSON)という項目が出てくるので、Enterキーを押します。すると、setting.jsonというファイルが開かれるので、以下のコードをコピペしてあげましょう。何も設定していない方は、丸々上から貼ってしまってOKです。false}以下、貼り付けた各コードの内容に関して解説します。解説を見て、自分には不要だなーと思った部分は削除してしまいましょう。2)に,(カンマ)をつけてはいけません。true,は、保存時にコードを自動整形してくれる設定です。以下のようにインデントがぐちゃぐちゃのコードがあったとします。S)を押してセーブすると、このように綺麗にインデントが整えられた状態になおしてくれます。どれだけ適当に書いてもセーブすると綺麗に直してくれる非常に便利な機能なので、是非導入しましょう。true,はタイプ時にコードを自動整形してくれる設定です。コードの区切りを入力したときに自動整形が発動します。言葉だけじゃわかりにくいので、とりあえず設定して実際に見てみるのをオススメします。true,こちらはEmmetを用いる時に使用するオプションで、Tabキーを押した時にEmmetを使用できる設定です。Emmetで、nav.global-nav>ul>li*5>aこういった省略技法を書いた時、Tabキーを押しただけで展開できるようになります。厳密には連続で入力すればTabキーで反応するのですが、例えば上のコードだとaを入力した後に間違ってEnterを押す→aまで戻ってTabキーと押すと反応しなくなります。Emmetを頻繁に使用する方は絶対に設定しておきましょう。false,VScode上でファイルを開く時、常に新しいタブで開く設定です。VScodeのファイルを開くと、エディタ上部にタブが表示されます。このタブですが、中身に変更を加えないと古いタブが新しいタブにどんどん上書きされて表示されます。個人的にサイト制作では新しいタブで開きたいことが多かったので、こちらの設定をオススメします。2,VScodeでTabキーを押した時に空けるスペースの大きさを決めます。4になっています(半角スペース4つ分)Tabsizeは人によって意見が分かれるので、Tabsize:2が正解というわけではありません。これがオススメというより、こちらでタブスペースを設定できるということを覚えておきましょう。false,エディタ上にあるミニマップを非表示にする設定です。VScodeでは、デフォルトでエディターの右側にコードのミニマップを表示してくれます。超長いコードを扱う時は有用ですが、それ以外だとさほど役に立ちません。誤クリックで意図せぬところに移動することもあるので、デフォは非表示を推奨します。falseHTML上のタグをマウスホバーしたときの説明文を非表示にする設定です。VScodeのデフォルトでは、HTMLのタグをマウスホバーすると、タグに関する説明が表示されます。コードを書き始めたころにはもしかしたら重宝するかもしれませんが、実際の制作においては不要なため外しておくのを推奨します。TagHTMLのタグを一括で書き換えてくれるプラグインです。<p>テスト</p>というタグをspanに書き換えたい、となったとき開始タグか閉じタグどちらかのpをspanに書き換えるだけでもう片方のpもspan書き換わります。プラグインのページにデモムービーがあるので、実際に見てみるとわかりやすいです。2SCSSやjsで括弧がたくさん出てきた時、色分けしてくれるプラグインです。実際に使用すると以下のようになります。括弧がどれに対応するかがわかるので、単純にコードの視認性が上がります。wを入力すると選択範囲を好きなタグで囲うことができます。以下のようなHTMLでpタグの中のダミーにspanを付けたいとします。W)を押すとpタグが出てきます。タグを変えたい時はそのまま入力すると違うタグに変わります。プラグインのページにデモムービーがあるので、実際の動作を見てみたい方はそちらをご覧ください。カンプからテキストをコピーして、一部をspanで囲いたい時なんかによく使います。CodeVScodeは初期状態で英語ですが、それを日本語化するプラグインです。注意として、これを導入しただけでは日本語にはなりません。以下、設定方法を解説します。Languageという項目があるので選択してEnter。言語選択が表示されるので、日本語である「ja」を選択しましょう。選択すると、VScodeが再起動を求めてくるので従います。再起動すると、日本語が無事表示されています。fixer初期設定のときに設定した自動整形機能ですが、PHPファイルには対応していません。fixerというプラグインを用いて自動整形機能を設定します。このプラグインを導入しただけでは自動整形は発動せず、多少の設定が必要になります。以下、やり方を解説します。PHP-CS-FixerのGITHUBのページに移動します。https://github.com/FriendsOfPHP/PHP-CS-Fixer少しページの下に行くと、「Installation」という項目があります。ここに、php-cs-fixer.pharというファイルのダウンロードリンクがあるので、こちらをクリックしてダウンロードします。ダウンロード後、ファイルを任意のフォルダに保存します。“~/.vscode/php-cs-fixer-v2.phar”は僕の場合なので、同じ場所に入れない限りそのまま貼り付けても作動しません。パスなんてわからない!という方は、php-ch-fixer-v2.pharを右クリックして、optionを押してください(Macのみ)以下の「php-ch-fixer-v2.pharをコピー」の部分が、optionを押している間は「php-ch-fixer-v2.pharのパス名をコピー」に変わります。うまくパスを設定して、先ほどのjsonファイルにコードを貼り付けたら作業は終了です。適当なPHPファイルを開いてセーブすると、HTMLやCSSと同じように自動整形機能が発動します。Web制作でもWordPressなどを取り扱うとPHPファイルを編集する機会も多いので、整形できるようにしておきましょう。まとめ今回紹介したVScodeの設定やプラグインはあくまでほんの一部です。便利な設定やプラグインは存在するので、「これ不便だな...」「この機能が欲しい...」と思った時にご自身で調べてみてください。何かオススメのプラグインなどあれば情報お待ちしております。コメントをキャンセルメールアドレスが公開されることはありません。東京都内でWebコーダーとして活動中。ブログではプログラミングやガジェット、お役立ちツールなんかを発信していくつもりです。Web制作のご依頼はお問い合わせから承っております。