WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

今回紹介するVisual Studio Code拡張機能の「Edit csv」を使うと、CSVの編集がかなりラクになります。

Edit csv

Edit csv

Edit csvはVisual Studio CodeでCSVをプレビューして、編集作業を快適にしてくれる拡張機能です。

基本的な使い方

Visual Studio CodeでCSVを開くと、画面右上に「Edit csv」というテキストが表示されるので、このテキストをクリックします。

CSVを開いたときの表示

CSVのプレビュー画面が別タブで表示されます。
ここでCSVが表組みされた状態でプレビューされて、セルをダブルクリックして編集できます。

上の「Add row」や「Add column」で行や列を追加できます。

Edit csvのプレビュー表示

編集が終わったら、「Apply changes to file and save(変更をファイルに反映して保存する)」「Apply changes to file(変更をファイルに反映する)」で、CSVファイルに変更を反映します。

あくまでこのタブはプレビュー画面で、編集しただけではCSVファイルに反映されていないので、反映して保存する必要がある点だけ注意が必要です。

他にも文字揃えやヘッダーなど細かい設定もできますが、正直Visual Studio CodeでそこまでガッツリCSVを触ることは少ないと思います。
プレビューさえできればあとはラクに編集できますし、カンマが抜けていてあとで混乱することもなくなります。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね