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

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年から専門学校でデザインを学び、卒業後は神戸の制作会社でWeb制作に従事しています。Webrandumは2016年から運営し、ウェブデザイン、フロントエンド開発、WordPress、CSS、JavaScript、制作環境の効率化を中心に、実際に試した内容を執筆しています。

Twitterをフォロー Facebookでいいね