| 名前 | 機能 |
|---|---|
| Auto Close Tag | HTMLやXMLなどのタグを自動で閉じる機能。 |
| Auto Complete Tag | HTMLタグを入力する際に自動補完を行う機能。 |
| Auto Rename Tag | HTMLタグを開いたときに、開いたタグと閉じたタグを自動的に同期させる機能。 |
| Bookmarks | コードの行やセクションをマークし、それらを簡単に参照できるようにする機能。 |
| Code Spell Checker | コード中のスペルミスを検出して修正するための機能。 |
| Color Highlit | テキスト内の色を直感的に表示する機能。 |
| endwise | コードの末尾に自動的に適切な構文を挿入するための機能。 |
| Error Lens | コードエディター上でエラーを視覚的に表示する機能。 |
| ESLint | JavaScriptコードの構文とスタイルを検証し、問題を検出して修正するための機能。 |
| Highlight Matching Tag | HTMLタグをハイライトして閉じタグを確認しやすくする機能。 |
| HTML CSS Support | HTMLおよびCSSの記述を補助するための機能。 |
| indent-rainbow | インデントを色分けして視覚的に分かりやすく表示する機能。 |
| IntelliSense for CSS class names in HTML | HTML内のCSSクラス名を自動補完する機能。 |
| Japanese Language Pack for Visual Studio Code | Visual Studio Codeの日本語環境を構築するための機能。 |
| JavaScript (ES6) code snippets | JavaScript (ES6)のコードスニペットを提供する機能。 |
| Live Sass Compiler | Sass/SCSSファイルを自動的にCSSにコンパイルするための機能。 |
| Live Server | ローカルサーバーを使用してWebページを開発するための機能。 |
| Material Icon Theme | アイコンをマテリアルデザインスタイルに変更する機能。 |
| Output Colorizer | 出力ウィンドウ内のテキストを色付けする機能。 |
| Partial Diff | 2つのテキストファイルを比較し、変更された部分を表示するための機能。 |
| Path Intellisense | ファイルパスの自動補完機能。 |
| Ruby | Rubyのコードを書くためのインテリジェンス補完、デバッグ、フォーマットなどの機能を提供します。 |
| Ruby Solargraph | Rubyのコードをより正確かつ効率的に書くための機能。 |
| TODO Highlight | コード内のTODOコメントをハイライト表示する機能。 |
| Todo Tree | TODOコメントを検索して、タスクリストを作成する機能。 |
| Trailing Spaces | 行末の空白文字を自動的に削除する機能。 |
| Vetur | Vue.jsアプリケーション開発をサポートする機能。 |
| vscode-icons | ファイルやフォルダーを視覚的に整理するためのアイコンを表示する機能。 |
Auto Close Tag
HTMLやXMLなどのタグを自動で閉じることができるツールです。
HTMLやXMLなどのファイルを編集する際に、開始タグを入力した直後に終了タグが自動的に補完されます。例えば、<div>と入力した直後に、</div>が自動的に挿入されます。
また、既に開始タグが存在する場合にも、カーソルを開始タグの内側に移動すると、終了タグが自動的に補完されます。
「Auto Close Tag」は、デフォルトでHTMLやXMLファイルに対して自動補完が有効になっていますが、他の言語に対しても自動補完を有効にすることができます。また、自動補完を無効にすることもできます。
⭐️Auto Complete Tag
HTMLやXMLなどのファイルでタグを自動補完することができるツールです。
HTMLやXMLなどのファイルを編集する際に、開始タグを入力すると、自動的に対応する終了タグが挿入されます。また、既に開始タグが存在する場合にも、終了タグを入力すると、自動的に開始タグが補完されます。
さらに、この拡張機能には、タグの属性も自動的に補完する機能があります。属性を入力する際には、属性名を入力すると、自動的に属性値が補完されます。また、属性値を入力する際には、"または'を入力すると、自動的に閉じる引用符が挿入されます。
⭐️Auto Rename Tag
HTMLやXMLなどのマークアップ言語でタグの名前を変更する際に、自動的に対応する開始タグと終了タグの名前を同時に変更することができるツールです。
、HTMLやXMLなどのマークアップ言語で、開始タグや終了タグの名前を変更する際に、その名前を入力するだけで、自動的に対応する開始タグと終了タグの名前が同時に変更されます。これにより、タグの名前を手動で変更する際に、開始タグと終了タグの名前が一致しなくなるミスを防ぐことができます。
🍀Bookmarks
コード内の特定の場所にブックマークを付けて、後で簡単にアクセスできるようにするツールです。
この拡張機能を使用することで、コード内の重要な箇所や作業中の箇所を、ブックマークとしてマークすることができます。ブックマークには、番号が自動的に割り当てられ、Ctrl + Shift + 数字キーを押すことで、登録した場所にすぐに移動することができます。
また、「Bookmarks」には、複数のブックマークをグループ化して管理することができる機能もあります。グループ化することで、複数のプロジェクトを同時に作業する場合など、異なるグループでブックマークを分けて管理することができます。
さらに、「Bookmarks」には、ブックマークに注釈をつけたり、削除したり、名前を変更したりすることができる機能もあります。
⭐️Code Spell Checker
コード内のスペルミスをチェックするツールです。
英単語のスペルミスを検出し、赤い波線でマークして表示します。また、スペルチェック機能は、自動的に有効になり、ファイルを開いた瞬間にスペルチェックが実行されます。さらに、日本語のファイルでも自動的にスペルチェックが行われるため、日本語でコメントを書いた場合にもスペルミスを検出することができます。
「Code Spell Checker」は、設定をカスタマイズすることもできます。たとえば、無視する単語のリストを設定することができます。また、チェック対象とするファイルの拡張子を指定することもできます。
🍀Color Highlit
CSS、Sass、Lessなどのスタイルシートファイル内のカラーコードをハイライト表示するツールです。
CSSファイルなどのスタイルシート内のカラーコードが自動的にハイライト表示されます。ハイライト表示されるカラーコードには、RGB、HEX、HSLなどのフォーマットがあります。また、カラーコードが入力されると、即座にハイライト表示されます。
さらに、「Color Highlit」には、カラーピッカー機能が付属しています。カラーピッカーを使用すると、マウスでクリックするだけでカラーコードを選択することができます。カラーピッカーには、RGB、HEX、HSLなどのフォーマットがあり、簡単にカラーコードを選択することができます。
🍀endwise
Rubyコードに必要なendキーワードを自動的に挿入するツールです。
Rubyでは、if、while、defなどの制御構文の末尾には、必ずendキーワードを付ける必要があります。「endwise」は、if、while、defなどの制御構文に対して自動的にendキーワードを挿入します。
⭐️⭐️Error Lens
コード内のエラー、警告、情報メッセージを視覚的に表示するツールです。
この拡張機能を使用すると、開発者はコードを書いているときに、コード内にあるエラーや警告を直接確認することができます。これにより、エラーを素早く特定し、修正することができます。
「Error Lens」は、主に次の3つの機能を備えています。
・エラーレンズ：コード内のエラーを視覚的に強調表示する機能です。エラーがある行にカーソルを合わせると、エラーの詳細情報がポップアップ表示されます。
・ウォッチレンズ：コード内の警告や情報メッセージを視覚的に表示する機能です。警告や情報メッセージがある行にカーソルを合わせると、メッセージの詳細情報がポップアップ表示されます。
・Problem Matcher：多くのプログラミング言語は、コンパイルや実行時にエラーを出力する特定の形式を持っています。Problem Matcherは、コード内のエラーや警告を検出するために、これらの形式に一致する正規表現を使用します。
⭐️ESLint
「ESLint」は、JavaScriptの静的解析ツールの1つで、コードに対してルールを適用して、構文エラー、バグ、一貫性のないコードなどを検出し、修正するためのツールです。
JavaScriptは動的な言語であり、実行時にエラーが発生することがあります。しかし、ESLintは、コードを解析することで、潜在的な問題を事前に特定し、開発者が問題を修正することを助けます。
⭐️Highlight Matching Tag
HTMLファイルで編集中のタグと、その対応する終了タグを強調表示するためのツールです。
この拡張機能を使用すると、カーソルがタグにある場合、対応する終了タグが明るく表示されます。同様に、カーソルが終了タグにある場合、対応する開始タグが明るく表示されます。
この拡張機能は、HTMLの入れ子構造が複雑な場合に特に便利です。開始タグと終了タグが見つけにくい場合でも、Highlight Matching Tagを使用することで、簡単に対応するタグを見つけることができます。
HTML CSS Support
この拡張機能を使用すると、HTMLファイルでCSSを使用する際に、CSSのプロパティを入力すると、自動的にプロパティの候補が表示されます。また、CSSのクラス名やID名を入力すると、対応するCSSファイルが自動的に検索されます。
さらに、この拡張機能には、CSSファイルで使用されるクラス名やID名の自動補完機能があります。HTMLファイルでCSSファイルを読み込むと、クラス名やID名が自動的に表示され、入力を容易にすることができます。
indent-rainbow
インデントの階層を視覚的に表示するための拡張機能です。この拡張機能を使用すると、コード内のインデントレベルを見やすく表示することができます。
この拡張機能は、インデントの階層に応じて、異なる色を使用して表示します。たとえば、最も外側のインデントはグレー、2番目のインデントは青、3番目のインデントは緑といった具合に、色のグラデーションを使用して、コードのインデントを表示します。
IntelliSense for CSS class names in HTML
HTMLコードを書く際に、CSSクラス名の入力を容易にするためのツールです。
この拡張機能を使用すると、HTMLファイルでCSSクラス名を入力する際に、クラス名を自動補完することができます。クラス名を入力し、クラス名の先頭に「.」を入力すると、使用可能なCSSクラス名のリストが表示され、自動補完を行うことができます。
Japanese Language Pack for Visual Studio Code
Japanese Language Pack for Visual Studio Codeは、VS Codeの日本語翻訳拡張機能です。
VS Codeのユーザーインターフェースが日本語に翻訳され、日本語で操作することができます。また、エディター内のテキストも日本語に翻訳されます。
この拡張機能には、日本語翻訳以外にも、日本語の入力支援機能が含まれています。IMEの設定や、全角/半角キーの切り替えなどが、日本語入力に最適化されています。
JavaScript (ES6) code snippets
この拡張機能を使用すると、ES6で追加されたJavaScriptの機能を簡単に入力することができます。例えば、imrと入力すると、import React from 'react'が自動的に挿入されます。
また、rfcと入力すると、React関数コンポーネントのテンプレートが自動的に挿入されます。
⭐️Live Sass Compiler
Live Sass Compilerには、Sassファイルを自動的にコンパイルする機能があり、Sassファイルが変更された場合に、自動的にCSSファイルを更新します。これにより、開発者は手動でCSSファイルを作成する必要がなくなり、コーディングの時間を節約できます。
また、Live Sass Compilerには、Sassファイルのコンパイル先のフォルダやコンパイル方法などをカスタマイズする機能があります。
Live Server
HTML、CSS、JavaScriptファイルを簡単にライブリロードしてプレビューすることができます。
Live Serverを使用するには、プロジェクトフォルダーを開き、HTMLファイルを右クリックして、「Open with Live Server」をクリックするだけです。これにより、ブラウザが起動し、HTMLファイルが表示されます。
Live Serverは、プロジェクトフォルダー内のHTML、CSS、JavaScriptファイルを監視し、ファイルに変更が加えられると、自動的にページを再読み込みして表示を更新します。また、この拡張機能には、内部サーバーの機能も備わっており、ファイルの変更をリアルタイムで反映することができます。
🍀Material Icon Theme
vscodeで使用できるアイコンテーマの一つです。この拡張機能を使用すると、ファイルやフォルダー、メニュー、タブなどのアイコンをカラフルかつ洗練されたものに変更することができます。
また、Material Icon Themeは、VS Codeのユーザーインターフェイスを改善するための多くの機能も提供しています。たとえば、アイコンのサイズや色を変更する機能があります。
Output Colorizer
Output Colorizerは、Visual Studio Codeで標準出力を表示する際に、テキストの色をカスタマイズするための拡張機能です。
この拡張機能を使用すると、ログファイルやコンソールアプリケーションなどの標準出力を表示するときに、異なるテキスト色で表示することができます。たとえば、赤色でエラーメッセージ、黄色で警告メッセージ、緑色で情報メッセージを表示することができます。
Output Colorizerには、多数のプリセットが用意されており、カスタムスタイルも作成することができます。また、この拡張機能は、標準出力以外にも、VS Codeのターミナル、テストランナー、デバッグコンソールなど、多数のVS Codeコンポーネントに対応しています。
Partial Diff
Partial Diffは、Visual Studio Codeのファイルの差分を比較するための拡張機能です。
この拡張機能を使用すると、2つのファイルの差分を可視化することができます。2つのファイルの差分が表示され、変更された部分は色で強調表示されます。この機能は、2つのファイルのバージョンを比較する際に非常に便利であり、特にソースコードの管理に役立ちます。
Partial Diffは、異なるファイル形式のファイルを比較することもできます。例えば、テキストファイルとJSONファイル、または画像ファイルと画像ファイルなどです。この拡張機能を使用すると、ファイルの変更を追跡し、変更された部分を見つけることができます。
⭐️Path Intellisense
ファイルパスを簡単に入力することができるようにするためのツールです。
この拡張機能を使用すると、ファイルパスを入力する際に自動的に補完されます。Path Intellisenseは、ファイルシステム内のファイル、フォルダー、および他のプロジェクトファイルをスキャンし、ファイルパスの自動補完を提供します。また、複数のプロジェクトフォルダーのサポートも提供されています。
⭐️Ruby
シンタックスハイライト: Ruby言語のキーワード、変数、メソッドなどを視覚的に区別するために、コードの色分けを行います。
インテリセンス: コードの補完機能で、開発者が入力した文字列に基づいて、関連する変数、メソッド、クラス名などを表示します。
デバッグ機能: Ruby言語で書かれたコードをデバッグするためのツールを提供します。
テストフレームワークのサポート: Ruby言語で書かれたコードのテストフレームワークをサポートします。
ERBのサポート: ERB（Embedded Ruby）言語のサポートを提供します。
⭐️Ruby Solargraph
Ruby Solargraph拡張機能の主な機能は以下のとおりです。
・コード補完機能: Rubyのメソッドやクラスの名前を入力すると、自動的に補完してくれます。また、入力途中の単語に対しても補完候補を表示してくれます。
・メソッドの定義や引数の情報を表示する機能: メソッドの定義や引数の情報を表示することができます。また、メソッド名をクリックすると、メソッドの定義箇所にジャンプすることができます。
・デバッグ機能: Rubyのコードをデバッグすることができます。デバッグポイントを設定して、コードの実行を一時停止したり、ステップ実行したりすることができます。
⭐️TODO Highlight
プログラムコード内に記述されたTODO、FIXME、NOTEなどのコメントをハイライト表示してくれるツールです。これにより、プログラムの中で特定のタスクに対するコメントを簡単に特定できるようになります。
TODO Highlightは、特定のコメントに対してカスタムのハイライト色を設定することもできます。例えば、FIXMEコメントに対して赤色のハイライト色を設定することで、問題がある部分をすぐに確認することができます。
また、TODO Highlightは、検索機能とも連携しているため、特定のコメントをすぐに見つけることができます。検索機能を使えば、コード全体から特定のコメントを検索することもできますし、TODO Highlightの検索機能を使えば、ハイライト表示されたコメントの中から特定のコメントを検索することもできます。
⭐️Todo Tree
ソースコード内に記述されたTODOコメントを自動的に検出し、Tree Viewとして表示することができる拡張機能です。
TODOコメントは、コード内で特定の箇所に注釈をつけて、今後修正すべき箇所や追加すべき機能などをメモするために使用されます。しかし、プロジェクトが大きくなると、TODOコメントが多数存在する場合に、それらを追跡することが困難になることがあります。こういった場合に、「Todo Tree」拡張機能を使用することで、TODOコメントを見つけやすくなります。
⭐️Trailing Spaces
不要な空白文字を検出し、削除する機能を提供する拡張機能です。この拡張機能は、ファイルの保存時に自動的に不要な空白を削除することができます。
Trailing Spacesは、以下のような機能を提供しています。
・空白文字を検出し、表示する機能
・自動的に空白を削除する機能
・削除する空白文字の設定をカスタマイズできる機能
TODO
FIXME
HACK
BUG
NOTE
REVIEW
⭐️Trailing Spaces
Trailing Spacesは、テキストエディターのVisual Studio Codeで使用できる、空白の行末を検出・強調表示してくれる拡張機能です。コードを書いていると、うっかりスペースやタブを入力してしまい、余計な空白が行末に残ってしまうことがあります。そのような場合、余計な空白が残ってしまうとコードの見た目が悪くなるばかりか、スペースとタブの混在によってコードが崩れることもあります。
Trailing Spacesを導入することで、行末の余計な空白を強調表示してくれるため、不必要なスペースやタブを見逃すことがありません。また、設定を調整することで、空白の自動削除や、特定の行だけを削除することもできます。
Vetur
Veturは、Vue.js用のVisual Studio Code拡張機能で、Vue.jsの開発をより効率的に行うために様々な機能を提供します。
主な機能としては、以下が挙げられます。
・Vueファイルのハイライトと構文チェック
Veturは、Vueファイルの構文を解析して、タグ、属性、テンプレート式などをハイライト表示し、構文エラーを検出して表示する機能を提供します。
・コンポーネントのインテリセンス
Vue.jsでコンポーネントを作成するときには、テンプレート内でコンポーネントのプロパティやメソッドを呼び出す必要がありますが、Veturは、Vueコンポーネントのプロパティとメソッドを自動的に認識し、インテリセンス機能を提供します。
・コードフォーマット
Veturは、Vueファイルのコードフォーマットを自動化する機能を提供します。フォーマットを実行すると、タグや属性、テンプレート式などが適切に整形され、コードの見た目をきれいにします。
・テンプレートのプレビュー
Veturは、Vueファイルのテンプレートのプレビュー機能を提供します。プレビュー機能を使用すると、ブラウザーによるテストをしながら、Vueテンプレートを編集することができます。
・ファイルの自動保存
Veturは、Vueファイルの自動保存機能を提供します。ファイルを保存するたびに、Veturが自動的にVueファイルを整形して保存するため、手動で整形する必要がなくなります。
vscode-icons
ファイルアイコンを追加することで、プロジェクト内のファイルを直感的に把握することができるようになります。
この拡張機能は、様々なファイルタイプに対応したアイコンを提供し、ファイルの種類を一目で把握することができます。例えば、JavaScriptファイルにはJSのアイコンが表示され、CSSファイルにはCSSのアイコンが表示されます。また、ファイルの種類によっては、アイコンの色も変わるため、より直感的にファイルを識別することができます。