2021/02/07 修正・追記
特に大きな変更はありませんが、少し読みやすくしました。
はじめに
正直サクラエディターで不自由なことは無かったんですが、VS Codeが便利みたいだし乗り換えてみたい。
でも、「あの機能あるのかな」「この機能無かったら困るなぁ」
これを調べるのが結構時間かかるんですよね。
そんな悩みを抱えてるあなた。
初心者向けの類似記事は多いですが、個人的に欲しい内容が散らばっていたので、
私がよくサクラエディターで使用している機能をVS Codeで使えるようにした設定方法など、備忘録として残します。
（詳細が欲しい場合は別途ググって下さい）
本題の前に結論
便利だから早くVS Codeに乗り換えた方が良い。
本資料の目的
- サクラエディター民をVS Code民にコンバートする
基本的に初心者用なので、内容は薄いですが、サクラ民が初めてVS Codeを使う足掛かりになれば良いなと思います。
サクラエディターとVS Codeの簡単な機能比較
- Grep検索
- ファイルのコピペでフルパスをテキスト出力
上記内容に少し難があるが、それさえ我慢出来れば、とりあえず設定すれば色々と対応可能
| 機能 | サクラエディター | VS Code |
|---|---|---|
| 検索・置換（正規表現） | デフォルトで可能 | デフォルトで可能 |
| Grep検索・置換 | デフォルトで可能 | サクラと同等ではないがデフォルトで可能（※１） |
| ファイルのコピペでフルパスをテキスト出力 | デフォルトで可能 | デフォルトで可能＋α（※２） |
| 矩形選択 | デフォルトで可能 | デフォルトで可能 |
| マルチカーソル | 不可 | デフォルトで可能（くそ便利！！！） |
| ファイルを開いた後に文字コード指定して開き直す | デフォルトで可能 | デフォルトで可能 |
| ファイルを開く際、文字コード自動判定 | デフォルトで可能 | 設定変更で可能 |
Ctrl+マウスホイールでフォントサイズ変更 |
デフォルトで可能 | 設定変更で可能 |
| タブ記号の使用 | デフォルトで可能 | 設定変更で可能 |
| タブ記号の可視化 | デフォルトで可能 | 設定変更で可能 |
| 全角スペース可視化 | デフォルトで可能 | 拡張機能追加で可能 |
| 改行コードの可視化 | デフォルトで可能 | 拡張機能追加で可能 |
| 日付時刻の挿入 | デフォルトで可能 | 拡張機能追加で可能 |
| マクロ機能 | デフォルトで可能 | 不可 |
| ※１：サクラはutf-8でもs-jisでも検索してくれるが、VS Codeはutf-8のみ検索可能（残念！！！） | ||
| ※２：VS Code内でフルパスを確認したいファイルのフォルダを開いていれば可能。さらに相対パスを出力することも可能 |
VS Codeインストール
公式からインストール
Download Visual Studio Code
注意点
PATHへの追加にチェック入れてインストールし、再起動しましょう。
（コンソールでcodeコマンドを打つのに必要）
*VisualStudioCodeインストール手順から引用
拡張機能のインストール
初期状態では個人的に機能不足なので、色々と拡張機能をインストールします。
VS Code上のMarketPlaceから拡張機能をインストールする事も可能ですが、
今回はコンソールからインストールします。
下記を必要に応じてPowerShellに張り付けて実行しましょう。
面倒だったら全選択して貼り付けてインストールしてしまいましょう。
（言語系は、元となる言語のインストールが必要かも？）
## 全般
# VS Code日本語化
code --install-extension MS-CEINTL.VS Code-language-pack-ja
# 括弧強調
code --install-extension CoenraadS.bracket-pair-colorizer-2
# インデントを虹色表示
code --install-extension oderwat.indent-rainbow
# csvを虹色表示
code --install-extension mechatroner.rainbow-csv
# 全角スペースの可視化
code --install-extension mosapride.zenkaku
# 改行文字の可視化
code --install-extension sohamkamani.code-eol
# インテリセンスの並び順をより賢く
code --install-extension VisualStudioExptTeam.VS Codeintellicode
# CSVのかっこいいグラフ化（2021/02/07 追記）
code --install-extension msrvida.vscode-sanddance
# キャメルケース スネークケースの変換（2021/02/21 追記）
code --install-extension wmaurer.change-case
# 日本語の文章の校正チェック
code --install-extension ics.japanese-proofreading
# 英単語スペルチェック（2021/02/21 追記）
code --install-extension streetsidesoftware.code-spell-checker
# 連番作成 Ctrl+Alt+N（2021/02/21 追記）
code --install-extension Asuka.insertnumbers
# UML作成(Javaや他1ツール要インストール)
code --install-extension jebbs.plantuml
# 日付時刻挿入(ショートカット用登録)おすすめ Alt+;,Alt+:
code --install-extension jsynowiec.vscode-insertdatestring
## Markdown
# 便利なショートカットキーを提供（コマンドパレットからTOCの作成や見出しの項番の有無を切り替え可能）
code --install-extension yzhang.markdown-all-in-one
# excelのテーブルをmarkdown記法でコピペ(Shift+Alt+V)
code --install-extension csholmq.excel-to-markdown-table
# プレビュー後の状態でPDFとして書き出し（ほかにHTML、PNG、JPEGファイルにも対応）
code --install-extension yzane.markdown-pdf
# Markdownの厳しい校正チェック
code --install-extension DavidAnson.VS Code-markdownlint
# クリップボードの画像を貼り付け Ctrl+Alt+V（2021/02/07 追記）
code --install-extension mushan.vscode-paste-image
## node.js
# インテリセンス
code --install-extension leizongmin.node-module-intellisense
# javascriptの校正チェック
code --install-extension dbaeumer.VS Code-eslint
## Python
# Python実行
code --install-extension ms-python.python
## Azure
# Functions（デプロイ、関数実行）
code --install-extension ms-azuretools.VS Code-azurefunctions
共通設定
設定画面(Ctrl+,)の検索欄で下記項目を検索し設定する
| 項目 | 設定 | 説明 |
|---|---|---|
| mouse wheel zoom | チェック |
Ctrl+マウスホイールでフォントサイズ変更を許可設定 |
| Auto Guess Encoding | チェック | ファイルを開く際、文字コード自動判定を許可設定 |
| Insert Spaces | チェックを外す | タブ記号の使用 |
| Detect Indentation | チェックを外す | タブ記号の使用 |
| Render Whitespace | boundary | タブ記号の可視化 |
| Font Family | Myrica M, Consolas, 'Courier New', monospace | 【おまけ】コーディングに適したフォントに変える |
普段サクラエディターでしてる事をVS Codeでする
上記までで設定済の機能
- 全角スペース可視化
- 改行コードの可視化
-
Ctrl+マウスホイールでフォントサイズ変更 - ファイルを開く際、文字コード自動判定
- タブ記号の使用
- タブ記号の可視化
- 日付時刻の挿入
下記で残りの機能説明
- ファイルを開いた後に文字コード指定して開き直す
⇒ 画面右下の文字コードをクリックする事で可能
| 機能 | VS Code | 備考 |
|---|---|---|
| 検索 | Ctrl+F | 正規表現Alt+R 検索履歴の表示 Alt+↑/↓
|
| 置換 | Ctrl+H | 正規表現Alt+R 検索履歴の表示 Alt+↑/↓
|
| Grep検索（※３） | Ctrl+Shift+F | サクラよりくそ早い |
| 矩形選択 | Ctrl+Shift+Alt+矢印キー Shift+Alt+ドラッグ |
- |
| マルチカーソル | Ctrl+Alt+矢印キー Alt+クリック |
サクラにはない。便利。 |
※３：特定のフォルダー配下を検索したい場合はファイルエクスプローラーでフォルダーを右クリックして「フォルダー内を検索」
※３：日本語を検索する場合、utf-8で保存されたファイルである必要がある。
（他の文字コードファイルを検索する場合、VS Codeでは不可）
目的達成
とりあえず使える状態にはなったが、便利に使うには他にも勉強が必要。
それは下記、先駆者の記事を参考にお願いします。
参考資料
拡張機能
VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)
VS Code色んな機能説明
Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する！《VSCode実践入門》
ショートカット一覧
どれかをひと通り見ればいいかな？
VS Code の便利なショートカットキー
Visual Studio Code キーボード ショートカット（テキスト）
Visual Studio Code キーボードショートカット一覧（画像）
VS Codeを他環境に移行
Visual Studio Code で必要な拡張パッケージを一括でインストールするスクリプト
VS codeでMarkdown
VSCodeのmarkdown(初心者向け)
VisualStudioCodeでMarkdownを書く際に入れておきたい便利な拡張機能5選
マルチカーソル練習帳