Visual Studio CodeでCSVの編集を見やすく行う拡張機能「Edit csv」

CSVをちょっと編集したいときに、Visual Studio Codeなどのテキストエディタで開くとカンマ区切りのテキストとして表示されてしまいます。
かといってExcelで開くと文字化けするときがあったり、予期しない現象に当たって時間を取られてしまうときがあります。
今回紹介するVisual Studio Code拡張機能の「Edit csv」を使うと、CSVの編集がかなりラクになります。
Edit csv

Edit csvはVisual Studio CodeでCSVをプレビューして、編集作業を快適にしてくれる拡張機能です。
基本的な使い方
Visual Studio CodeでCSVを開くと、画面右上に「Edit csv」というテキストが表示されるので、このテキストをクリックします。

CSVのプレビュー画面が別タブで表示されます。
ここでCSVが表組みされた状態でプレビューされて、セルをダブルクリックして編集できます。
上の「Add row」や「Add column」で行や列を追加できます。

編集が終わったら、「Apply changes to file and save(変更をファイルに反映して保存する)」「Apply changes to file(変更をファイルに反映する)」で、CSVファイルに変更を反映します。
あくまでこのタブはプレビュー画面で、編集しただけではCSVファイルに反映されていないので、反映して保存する必要がある点だけ注意が必要です。
他にも文字揃えやヘッダーなど細かい設定もできますが、正直Visual Studio CodeでそこまでガッツリCSVを触ることは少ないと思います。
プレビューさえできればあとはラクに編集できますし、カンマが抜けていてあとで混乱することもなくなります。


Vue CLIでVue.jsの開発環境をセットアップするまでの流れ
Visual Studio Codeで対応する括弧に色を付けて見やすくする環境設定
Bracket Pair ColorizerでVisual Studio Codeの括弧を色分けして見やすくする
スクロールしてもテーブルヘッダーが追尾するテーブルの作り方
Visual Studio Codeのマルチカーソル機能で文字操作を一括で行う
Visual Studio Codeでできる最低限のGit操作方法
サイトのPocketに保存された回数や、あとで読まれた回数まで解析できるPocketのパブリッシャーツールの登録方法
CSSのカスタムプロパティ(変数機能)の使い方
Nuxt.jsで「Classic mode for store/ is deprecated and will be removed in Nuxt 3.」のエラーメッセージが表示される場合の対処法
Movable TypeでMTLoopを使ってkeyでソートしたときに、10個以上表示させると並びがおかしくなる
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Google日本語入力のサジェスト(変換候補)の選択方法
Figmaでモックアップをすばやく作成する「Mockuuups Studio」
Visual Studio CodeでGitをもっと便利に使うための拡張機能
MacでEvernoteにWebデザインをストックしたいならPaparazzi!とFolder Action Scriptの組み合わせがオススメ!!
CSS Nite in Kobe, vol.53「XDで作るワイヤーフレーム・プロトタイプとサイト制作時のコミュニケーション」に参加してきました
npm install時に「cb() never called!」とエラーが表示されたときの解決法
Visual Studio Codeで簡易的なローカルサーバーを起動して、コード保存時に自動でブラウザをリロードする拡張機能「Live Server」
Macで画像の一括リサイズを行いたいときは、プレビュー.appを使う方法が手軽!
Google Maps APIでピンの見た目をカスタマイズする方法
Zoomで画面共有が始まると自動でフルスクリーンになるのをオフにする方法