エディタをAtomからVisual Studio Codeに変えました

2022.10.05

GitHubがAtomの開発終了を発表
Visual Studio Codeを使い始めた
3ヶ月使ってみて行った設定など

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

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

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

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

Atomの画面

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

Visual Studio Codeをインストール

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

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

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

日本語化

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フレームワークなどを使用したアプリケーション開発を行うスタッフを募集しています。詳細はこちら
弊社での勤務に関心をお持ちの方は、知り合いの弊社社員・関係者を通じてご連絡ください。

こちらの記事もオススメです！

	VS Codeの便利な拡張機能3選（校正・目次自動作成・Vim） VS Codeを使っていて特に便利だと思った拡張機能（校正・目次自動作成・Vim）を3つ紹介します。
	スマートフォンのアプリのデータをadbコマンドを使用して移行しましたスマホを買い替え。Googleが公開しているコマンドラインツール（adbコマンド）でスマホのデータを移行。
	社内セキュリティ教育の教材として調査報告書（つるぎ町立半田病院様公開文書）を採用してみました半田病院様の調査報告書を教材にしてISMS推進チームの教育を実施しました。
	github.com/redmine/redmine の運用を引き継いだ RedmineのGitHub上のミラーリポジトリの運用をファーエンドテクノロジーが引き継ぎました。
	RedMica 2.1(Redmine 5.0互換)と Azure AD で SAML認証をする方法 RedMica stable-2.1（Redmine 5.0互換）でSAML認証する方法。

ファーエンドテクノロジーからのお知らせ（2025/07/09更新）

	夏季休業のお知らせ (8/13〜15休業) 2025/8/13(水)〜8/15(金)は夏季休業とさせていただきます。
	JANOG56ミーティング（7/30〜8/1開催）にRubyスポンサーとして協賛・ブース出展 JANOG56ミーティング（7/30〜8/1開催）にRubyスポンサーとして協賛、ブースを出展します。
	Redmine Japan Vol.4（7/25開催）に弊社代表の前田が招待講演として登壇オープンソースのプロジェクト管理ソフトウェア Redmine のイベント「Redmine Japan Vol.4」に弊社代表でRedmineコミッターの前田剛が招待公演に登壇します。
	RedMica 3.2 バージョンアップのお知らせ My Redmineで提供しているソフトウェアをRedMica（ファーエンドテクノロジー版Redmine） 3.1 から 3.2 へバージョンアップいたします。
	Redmineの最新情報をメールでお知らせする「Redmine News」配信中新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け