どーも、アサル（ASAL）です！
今回は、フロントエンドやHTMLコーダーに必須の初期設定と便利すぎる拡張機能20選をご紹介していきます！
ちなみに、僕が使った初めてのエディターがAdobeの「Dreamweaver」、その次に「Atom」を使っていて、現在は、「Visual Studio Code(VS Code)」を使っています。
VScodeは、Microsoftが提供している無償で高機能なエディターで、Atomなんかよりも断然に使いやすく、重宝しています！
これから、エディターを乗り換えようとしている方や、設定や拡張機能をお探しの方は、今回ご紹介する初期設定と拡張機能を入れておけば、開発が快適に進められますよ！
その前に、VScodeをまだ日本語化していないという方は、ウィンドウ画面の左にあるメニューの一番下のアイコンをクリックすると、拡張機能の検索が表示されるので、「Japanese Language Pack for Visual Studio Code」と入力または、コピペをしてEnterを押し、緑色のInstallボタンからインストールを行なって下さい。
インストールが完了すると、右下に再起動を促すメッセージが表示されるので、「Yes」を選択して再起動をします。
日本語表示で起動を確認できたら、これでVScodeの日本語化は、完了です！
それでは早速、初期設定から見て行きましょう！
VScodeのjsonオススメ初期設定
Macなら「⌘」と「,」で、Windowsなら「Ctrl」と「,」の同時押しで設定画面を開くことができます。
もしくは、ウィンドウ画面の左にあるメニューの左下の歯車アイコンをクリックして、設定から開きます。
設定画面を開けたら、以下の画像にあるアイコンをクリックします。
開いたページに下記のコードをコピペして、ファイルを保存(Macなら「⌘」と「s」Windowsなら「Ctrl」と「s」)して下さい。
(ソースコードにカーソルを当てると右上にコピーボタンが表示されます)
{
"workbench.editor.enablePreview": false, // 開かれるエディターをプレビューとして表示するか
"workbench.iconTheme": "vscode-icons", // ファイルアイコンを変更
"diffEditor.renderSideBySide": false, // Gitの差分を行内に表示
"editor.colorDecorators": false, // カラーデコレーターを非表示
"editor.formatOnPaste": true, // ペースト時に自動でフォーマット
"editor.formatOnSave": true, // ファイル保存時に自動でフォーマット
"editor.formatOnType": true, // 入力した行を自動でフォーマット
"editor.minimap.renderCharacters": false, // ミニマップの表示文字をブロックに変更
"editor.minimap.showSlider": "always", // 表示領域をミニマップで常にハイライト
"editor.multiCursorModifier": "ctrlCmd", // マウスでの複数選択時の修飾キーを変更
"editor.renderControlCharacters": true, // 制御文字を表示
"editor.renderLineHighlight": "all", // 選択行を行番号含めすべてハイライト
"editor.renderWhitespace": "all", // 半角スペースを常に表示
"editor.snippetSuggestions": "top", // Emmetなどのスニペット候補を優先して表示
"editor.tabSize": 2, // タブのサイズ変更
"editor.wordWrap": "on", // エディターの幅で折り返し
"emmet.showSuggestionsAsSnippets": true, // Emmetの候補を表示
"emmet.triggerExpansionOnTab": true, // TABキーでEmmetを展開できるようにする
"emmet.variables": { // Emmetで展開されるHTMLの言語を変更
"lang": "ja"
},
"explorer.confirmDelete": false, // ファイル削除時の確認を表示しない
"files.associations": {
".*lintrc": "json" // ファイルと言語の関連付けを変更
},
"files.exclude": { // エクスプローラーから非表示にするファイル
"**/*.map": true,
"**/node_modules": true
},
"files.insertFinalNewline": true, // ファイルの保存時に末尾を改行
"files.trimFinalNewlines": true, // ファイルの保存時に最終行以降をトリミング
"files.trimTrailingWhitespace": true, // ファイルの保存時に行末の空白をトリミング
"[markdown]": {
"files.trimTrailingWhitespace": false // Markdownのファイルは行末の空白をトリミングしない
},
"html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p", // タグ内の記述はフォーマットしない
"html.format.extraLiners": "", // head, body, /html タグの前に改行を入れない
"html.format.unformatted": null, // フレージング・コンテンツ（旧インライン要素のようなタグ）はフォーマットしない
"html.format.wrapLineLength": 0, // 行の文字数制限を無くし自動で改行させない
"html.mirrorCursorOnMatchingTag": false, // 勝手に閉じタグにカーソルが複製されてしまう機能の無効化
"search.exclude": { // 検索対象外にするファイル設定（ files.exclude のファイルも含む）
"**/tmp": true
},
"window.openFoldersInNewWindow": "on", // 新規ワークスペースを別ウインドウで開く
"window.title": "${activeEditorMedium}${separator}${rootName}", // ウインドウ上部に表示する文字列の設定
"workbench.editor.labelFormat": "short", // タブに表示する文字列の設定
"workbench.editor.tabSizing": "shrink", // タブの表示設定
"workbench.colorTheme": "One Dark Pro", //atomを同じテーマカラーに
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features" // htmlを整形
}
}
詳細については、コメントアウトにある通りなので、VScodeを使いながら、自分好みに変えていくのもありですね！
言語共通の拡張機能
まずは、言語関係なく使える便利な拡張機能からご紹介していきますね。
Bracket Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
インストール後に、対応する括弧に色がついて、括弧内にカーソルがあると、下の画像のように分かりやすく線が表示されます。
特にsassやscssのネストが深くなったときに、どこから開始された括弧なのか分かりにくくなるのを防ぐことができます！
vscode-icons
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
各種ファイルのアイコンがついて見やすくなります。
Trailing Spaces
https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces
空白が赤くハイライトされて、空白が分かりやすくなります。
例えば、行末に半角スペースが混じっているコードも、ハイライトされて不要な部分が一目瞭然です。
不要スペースを一括で削除したい場合は、「Ctrl(⌘)+P」で、コマンドパレットを表示して「Trailing Spaces: Delete」と検索して出てきたコマンドを実行すると一括で削除できます。
Path Autocomplete
https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete
ファイルパスの入力の手間を省けるようになります。
ファイルパスを入力しようとすると、候補となるファイル名が一覧で表示されるようになります。
Highlight Matching Tag
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
対応するタグを強調表示してくれる拡張機能です。
あってもなくても良い気がしますが、地味に便利なので、一応入れています(笑)。
indent-rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
階層の深さに応じて、インデントをカラーリングする拡張機能です。
インデントの深さが視覚的に分かりやすくなるので、かなりコードが書きやすくなります。
HTMLの拡張機能
次に、フロントエンドエンジニアやHTMLコーダーの方なら、入れておいて損はない超オススメの拡張機能をご紹介していきます！
まずは、HTMLで入れるべき必須の拡張機能から見ていきましょう。
Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
HTMLのリアルタイムプレビューができるようになります。
ファイルを保存した時点で、自動的に内容も変わってくれるので、非常に便利です。
HTML CSS Support
https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css
html、cssのclassやidを補完してくれて便利です！
HTML Snippets
https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets
HTML5に対応した追加スニペットです。
一文字か二文字入力するだけで、予測してくれるので、非常に少ない記述で書いていくことができます。
HTMLHint
https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint
HTMLの構文チェックをしてくれる拡張機能です。
HTMLの構文が間違っている箇所に波線を引いてくれるので、ミスが分かりやすくなります。
あくまで、構文チェックであり、タグの使い方などは自分でチェックしなければなりませんが…。
CSSの拡張機能
次に、CSSで重宝する拡張機能を見ていきましょう。
Autoprefixer
https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer
ベンダープレフィックスを必要に応じて、自動で付けてくれるプラグインです。
ベンダープレフィックスとは、ブラウザでまだ正式にサポートされていないcssのプロパティを適切に表示するためのもので、Flexboxやcss gridを使う時に、ベンダープレフィックスを付けておかないとIEやFirefoxなどのブラウザで正しく表示されなくなる場合があります。
「コードが増えてめんどくさい」と思う方もいるかもしれませんが、このプラグインを入れるだけで、ファイル保存時に自動でベンダープレフィックスをつけてくれます！
自動が嫌という方でも、手動で実行するようにも設定できます。
CSSTree validator
https://marketplace.visualstudio.com/items?itemName=smelukov.vscode-csstree
これは、CSSの構文チェックを行ってくれる拡張機能です。
これを入れると、CSSの記述が間違っている箇所に波線を引いて、エラーを表示してくれるので、スペルミスが格段に減ります。
Prettier – Code formatter
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
「Prettier」はJavaScriptやTypeScript、CSS、HTMLなどのコードを整形可能なコードフォーマッターです。
ファイル全体のフォーマットを整えるだけでなく、選択した部分のコードのみフォーマットを整えることも可能です。
また設定を変えることで、ファイル保存時に自動的にフォーマットを適用したり、ESLintの設定を使って整形することもできます。
IntelliSense for CSS class names in HTML
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
「HTML CSS Support」同様に、CSSのクラス名を補完してくれるプラグインです。
scssの拡張機能
次に、scssを使うなら必ず入れるべき拡張機能を見ていきましょう。
Easy Sass
https://marketplace.visualstudio.com/items?itemName=spook.easysass
「Easy Sass」はファイル保存時に自動でSASSをCSSにコンパイルしてくれる拡張機能です。
僕は、scssを使うときに、いつもkoalaを使っていたのですが、VScodeだけでscssまでコンパイルしてくれるなんて…。
アウトプットスタイルの変更やコンパイル後のcssの保存先のディレクトリを変更してあげることができるので、sassやscssを使っている方には、欠かせない拡張機能です！
SCSS Formatter
https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter
scssを整形してくれる拡張機能です。
SCSS IntelliSense
https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss
scssの変数などを補完してくれるようになります。
こちらもscssを使う人には、外せない拡張機能ですね。
WordPress構築に使える拡張機能
最後に、WordPress構築をサポートしてくれる拡張機能を見ていきましょう。
Format HTML in PHP
https://marketplace.visualstudio.com/items?itemName=rifi2k.format-html-in-php
インストールした後に、ショートカット「Ctrl(⌘)+Alt+F」を実行すると、PHPファイル中のHTMLが綺麗に整形されて、見やすくなります。
WordPressを構築するフロントエンドエンジニアには、必須の拡張機能ですね！
WordPress Snippet
https://marketplace.visualstudio.com/items?itemName=tungvn.wordpress-snippet
名前にある通り、WordPressのスニペットです。
WordPress関数を少し入力するだけで、候補を出してくれるので、うろ覚えの場合に助かります。
わざわざネットで検索したり、Codexで調べなくても済むようになるので、コーディングスピードもアップします。
PHP Intelephense
https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client
PHPでコード補完などをしてくれるようになります。
まとめ
いかがでしたか？
VScodeは、海外でも数多くの人気を誇っており、どんどんと広がっています！
今後は、VScodeの時代になっていくのに伴い、ダントツの処理スピードと幅広い拡張機能を持っているVScodeに、思い切って乗り換えてみてはどうでしょうか？
アサル（ASAL）でした！
