コードを書くのが楽になる！知っておくと便利なVS Codeの機能・設定のまとめ
Post on:2020年9月1日
sponsors
VS Codeは毎月のようにアップデートされ、便利な機能がどんどん追加されています。最近追加された機能をはじめ、Web制作で役立つ便利な機能を紹介します。
特に人気が高い機能拡張と同じレベルの仕事が、VS Codeの基本機能・設定だけで利用できるので、便利です。
VS Code: You don't need that extension
by Rob O'Leary
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- はじめに
- 1. タグの自動名前変更と終了タグ補完
- 2. 設定の同期
- 3. モジュールの自動インポート
- 4. HTMLとCSSのスニペット管理
- 5. ダミーテキスト
- 6. 末尾のスペースを自動的に削除
- 終わりに
はじめに
私は最近、VS Codeを深く掘り下げいて、いくつか興味深い発見がありました。人気のある機能拡張の仕事を十分にこなす機能や設定がVS Codeにはたくさんあります。
1. タグの自動名前変更と終了タグ補完
1回の作業で、HTMLの開始タグと終了タグの名前を変更できます。新しいタグを追加するときには、自動的に終了タグを追加します。
タグの自動名前変更と終了タグ補完
VS Codeの機能拡張
- Auto Rename Tag: Visual Studio IDEと同様に、ペアになっているHTML/XMLのタグの名前を自動的に変更します。
- Auto Close Tag: Visual Studio IDEやSublime Textと同様に、HTML/XMLの終了タグを自動的に追加します。
VS Codeの設定
この設定の名前は少し曖昧なので、見つけられない人がいるかもしれません。
- Editor: Rename on Type: エディタがタイプに応じて自動的に名前を変更するかどうかを制御します。デフォルトは、falseです。
この機能は現時点では、HTMLファイルのみサポートされています。JSXファイルに対応するためには未解決の問題があります。
Vueファイルが追加される可能性は低いですが、Vetur拡張機能に追加される可能性は高いです。詳しくは、veturをご覧ください。
settings.json
|
1 |
"editor.renameOnType": true |
VS Code 日本語版での設定
VS Code 日本語版での設定
2. 設定の同期
VS Codeは、異なるマシン間でのVS Codeの設定の同期をサポートするようになりました。この機能は、v1.48（2020年7月リリース）以降で利用できます。
私はさっそく同期を試してみましたが、特に問題はありません。
VS Codeの機能拡張
- Settings Sync: 設定、キーバインド、スニペット、拡張機能、起動ファイルをGitHub Gistに同期します。
VS Codeの設定
この機能については、ユーザーガイドをご覧ください。
設定は下記のようになります。
設定の同期
MicrosoftまたはGitHubのアカウントを使用して、同期したいものを選択します。
同期したいものを選択
VS Code 日本語版での設定
VS Code 日本語版での設定
3. モジュールの自動インポート
JavaScriptやTypeScriptのモジュールのインポートを管理することは、特にプロジェクトを再編成したり、コードをリファクタリングしたりするときに面倒になる可能性があります。可能であれば、自動化することが望ましいと思いませんか？
VS Codeの機能拡張
- Auto import: 利用可能なすべてのインポートのコードアクションとコード補完を自動的に検出、解析、提供します。TypescriptとTSXで動作します。
- Move TS: Typescriptファイルの移動とワークスペース内の相対インポートの更新をサポートします。
- Auto Import - ES6, TS, JSX, TSX: 利用可能なすべてのインポートのコードアクションとコード補完を自動的に検出、解析、提供します。JavaScriptとTypeScriptで動作します。
VS Codeの設定
- JavaScript > Suggest: Auto Imports: 自動インポートを有効・無効にします。ワークスペースでTypescript 2.6.1以降を使用する必要があります。デフォルトは、trueです。
- TypeScript > Suggest: Auto Imports: 自動インポートを有効・無効にします。ワークスペースでTypescript 2.6.1以降を使用する必要があります。デフォルトは、trueです。
- JavaScript > Update Imports on File Move: Enabled: VS Codeでファイルの名前を変更または移動するときのインポートパスの自動更新を有効または無効にします。ワークスペースでTypeScript 2.9以降を使用する必要があります。デフォルトは、promptです。
- TypeScript > Update Imports on File Move: Enabled: VS Codeでファイルの名前を変更または移動するときのインポートパスの自動更新を有効または無効にします。ワークスペースでTypeScript 2.9以降を使用する必要があります。デフォルトは、promptです。
settings.json
|
1 2 3 4 |
"javascript.suggest.autoImports": true, "typescript.suggest.autoImports": true, "javascript.updateImportsOnFileMove.enabled": "always", "typescript.updateImportsOnFileMove.enabled": "always", |
また、保存時にインポートを整理したい場合は、下記の設定を追加してください。未使用のインポートを削除し、インポートを絶対パスを先頭にして整理してくれます。私はこういった「セットしたらお任せ」の大ファンです。
|
1 2 3 |
"editor.codeActionsOnSave": { "source.organizeImports": true } |
VS Code 日本語版での設定
VS Code 日本語版での設定
4. HTMLとCSSのスニペット管理
すぐに始められるようにHTMLのテンプレートを用意したり、キーストロークを少なくするためにコードチャンクを作成したり、コンテンツのブロックを完成させるためにコードを用意しておきたいと思うかもしれません。これらは似ていますが、ニーズが微妙に異なります。以下で説明します。
VS Codeの機能拡張
- HTML Snippets: HTML5のスニペットを含む完全なHTMLタグ。
- HTML Boilerplate: 基本的な HTML5のテンプレートのスニペット ジェネレーター。
- CSS Snippets: CSSのショートハンド スニペット。
VS Codeの機能
VS CodeにはEmmetが組み込まれています。Emmetは、HTMLとCSSの略語とスニペット展開を提供するものです。html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less, stylusファイルに対してデフォルトで有効になっています。詳しくは、VS CodeのUser Guideをご覧ください。
例えば、HTMLのテンプレートを用意するには、「!」を入力し、Tabキーを押します。
HTMLのテンプレートを用意
CSSだと、下記のような略語もあります。
|
1 |
ul>li*5 |
これで、下記が生成されます。
|
1 2 3 4 5 6 7 |
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> |
「a」を入力してTabキーを押すと、<a href="">が生成され、カーソルは引用符の中に移動され、hrefの値をすぐに入力できます。
これはHTMLでできることの簡単な概要にすぎませんが、CSSでも同様の機能が提供されています。私のお気に入りは、ベンダープレフィックスを自動で追加することです。詳しくは、Emmetのドキュメントをご覧ください。また、Emmetのチートシートも用意されています。
snippets.jsonという名前のjsonファイルに追加することで、独自のスニペットをカスタマイズまたは作成できます。
また、より多くの言語でEmmetを有効にすることもできます。例えば、VueとJavaScriptを含めるには、settings.jsonに下記を追加します。
|
1 2 3 4 |
"emmet.includeLanguages": { "vue-html": "html", "javascript":"javascriptreact" } |
マークダウンを含めるには、落とし穴（バグ）があります。下記のスニペットのように、除外する言語リストが空であることも確認しなければなりません。この回避策については、stackoverflow.comをご覧ください。
|
1 2 3 4 |
"emmet.excludeLanguages": [], "emmet.includeLanguages": { "markdown": "html" } |
VS Code 日本語版での設定
VS Code 日本語版での設定
5. ダミーテキスト
コンテンツを埋めるためにダミーのテキストを使用して、UIがどのように見えるかを確認したい場合があります。もしかすると、「lorem ipsum」のようなテキスト生成に慣れ親しんでいるかもしれません。
VS Codeの機能拡張
- Lorem Ipsum: 「lorem ipsum」のようなテキストを生成。
VS Codeの機能
前述したように、VS CodeにはEmmetが組み込まれており、Lorem Ipsumも利用できます。
「lorem」と入力してタブキーを押すと、30語のダミーテキストが生成されます。
ダミーテキストの生成
この機能を使用して、複数のブロックを生成することもできます。例えば、「p*2>lorem」と入力すると、下記のコードが生成されます。
|
1 2 3 4 5 6 7 8 9 10 |
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus! </p> <p> Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam! </p> |
6. 末尾のスペースを自動的に削除
私が提案する設定は、置換ではありません。拡張機能では編集中やコマンドを使用してスペースを削除しますが、設定では保存時にスペースを削除します。
VS Codeの機能拡張
- Trailing Spaces: 末尾のスペースを強調表示して、削除します。
- Autotrim: カーソルをある行から別の行に移動すると、末尾のスペースを自動的に削除します。
VS Codeの設定
- Files : Trim Trailing Whitespace: trueにすると、ファイルを保存するときに末尾のスペースが削除されます。デフォルトは、falseです。
settings.json
|
1 |
"files.trimTrailingWhitespace": true |
VS Code 日本語版での設定
VS Code 日本語版での設定
終わりに
拡張機能に手を伸ばす前に、VS Codeがすでにそれをできるかどうかを確認してください。当たり前のように聞こえるかもしれませんが、誰もがこのようなことをしたことがあるでしょう。
VS Codeは定期的に機能を追加しているので、変更ログを必ず確認することをお勧めします。
私は最近、Marky Markdownという機能拡張を作成しました。VS Codeにはないマークダウンの機能が必要な場合はチェックしてみてください😊
sponsors
