• Home
• コーポレートブログ
• エディタをAtomからVisual Studio Codeに変えました

石原です。今回は仕事で使うエディタを「Atom」から「Visual Studio Code」に変えた話です。

Atomを使うのをやめるきっかけになったのはこの記事です。

GitHubは6月8日（現地時間）、テキストエディタ「Atom」の開発を終了すると発表した。12月15日に関連する全プロジェクトをアーカイブするという。理由は「Microsoft Visual Studio Code」と「GitHub Codespaces」による、クラウドでのソフトウェア開発の信頼性向上に集中するためとしている。

GitHub、テキストエディタ「Atom」の開発終了　12月に全プロジェクトをアーカイブ - ITmedia NEWS

もう使われなくなってきていることは感じていましたが、使い慣れていたのでそのまま使い続けていたらとうとう時期がやってきてしまいました。

Visual Studio Codeをインストール

社内で次は何を使うと良いか聞いてみたところ「Visual Studio Code」の意見が多かったので、迷うことなく決まりました。

これまでのブログでも紹介されています。

• コーディング作業で使用しているVisual Studio CodeとVim
• VS Codeの便利な拡張機能3選（校正・目次自動作成・Vim）

インストールしてから次の設定や拡張機能を追加しました。

日本語化

Japanese Language Pack for Visual Studio Code
まずは言語を日本語化する拡張機能を追加しました。これで初期設定もしやすくなります。

EmmetのMarkdown有効化

EmmetはHTMLやCSSを短縮記法で入力できる機能でコーディングが簡単になります。例えば a:link と記載すると <a href="http://"></a> が入力されます。普段はMarkdownの記法で書くことが多いのですが、Markdownファイル内でHTMLタグを使いたいときがあります。MarkdownファイルではEmmetが使えなかったので、MarkdownファイルでもHTMLを簡単に書けるように設定しました。

調べてみると設定ファイルの settings.json を編集する方法が出てきますが、設定項目がありました。設定方法が少しわかりにくかったので詳しく書きます。

管理→設定→拡張機能→Emmet

• Exclude Languages: デフォルトでmarkdownが設定されているので、×をクリックして削除
• Include Languages: 「項目の追加」→項目に「markdown」、値に「html」を入力して「OK」

参考にしたサイト
【VSCode】EmmetをMarkdownでも有効にする方法 - たねやつの木

スペースの表示

半角スペースがあることを表示する設定です。
設定箇所: 管理→設定→Editor: Render Whitespace

インデントの色分け

indent-rainbow（拡張機能）
インデントが色分けして表示されて階層が見やすくなります。

最後に

そのほかに標準機能のターミナルも使っています。Macの標準アプリのターミナルを開くことが減りました。その分画面が小さく感じてしまいますが、一つのアプリケーションで作業できます。

3ヶ月使ってみましたが、正直まだ使いこなせていないところもあります。効率よく仕事ができるように設定や拡張機能で解決できないか探してみたいと思います。

振り返ってみると、入社した頃はSublimeTextを使っていました。何年後かはまた別のツールを使っているかもしれませんね。

【スタッフ募集中】
弊社ではAWSを活用したソリューションの企画・設計・構築・運用や、Ruby on Rails・JavaScriptフレームワークなどを使用したアプリケーション開発を行うスタッフを募集しています。詳細はこちら
弊社での勤務に関心をお持ちの方は、知り合いの弊社社員・関係者を通じてご連絡ください。

---