コードエディタ VSCode のセットアップと基本の使い方

概要

Windows ならサクラエディタなどが有名なエディタですが、Macで何使うのってなると、VSCodeあたりがいいのかなと思います(他にもたくさんあるけど)。

手順

Macにおけるコードエディタ VSCode のセットアップと基本の使い方です。

1. VSCode(Visual Studio Code)をダウンロードしてインストール

1. URLからインストール

Documentation for Visual Studio Code
Find out how to set-up and get the most from Visual Studio Code. Optimized for building and debugging modern web and cloud applications. Visual Studio Code is...

2. インデント設定の変更

1.左下の歯車マークをクリックして [設定](英語ならSettingとか出てるはず)
2.[Indentation Size]を検索
3.「adaptive」を「inherit」に変更
adaptive : 箇条書きで 2スペース、項番付きで 3スペース
inherit : 現在の TAB サイズ設定に従う
4. 保存ボタンとかはないので、そのまま設定タブを「×」で閉じる

2. プラグインの追加

1. 日本語拡張を入れる

メニューを日本語にする

1. VSCode画面左側の「縦に並んでるアイコン」の一番下、カーソルあわせると「Extentions」と表示されるアイコンをクリック
2. 「Japanese Language Pack for Visual Studio Code」と検索して[Install]
3. 画面右下に「Change Language and Restart」のポップアップが出るのでクリック
4. メニューが日本語になった
5. 「Japanese Language Pack for Visual Studio Code」のタブを閉じる

2. Markdown用拡張

Markdownで便利な拡張機能セット。キーボードショートカット、Markdown入力支援、目次出力、HTML出力など。リアルタイムプレビューが出せるので便利。

1. VSCode画面左側の「縦に並んでるアイコン」の一番下、カーソルあわせると「Extentions」と表示されるアイコンをクリック
2. 「Markdown All in One」を検索して[インストール]
3. 「Markdown All in One」のタブを閉じる

3. 便利な機能

1. diffとgrepを使ってみる

試す用のファイルを作って比較とgrepをします

1. Mac のターミナルを起動してテスト用ファイルの作成

cd Downloads
mkdir `date +%Y%m%d_test`
cd `date +%Y%m%d_test`
echo -e "aaa\nbbb\nccc">test_1.txt
echo -e "aaa\nccc\nddd">test_2.txt
cat test_1.txt
cat test_2.txt

2. VSCodeで[ファイル]-[ファイルを開く]で前項番で作った2つのファイルを開く

3. VSCode画面上部のSearchボックス上で「>compare」と入力すると、「File: Compare Active File with...」とサジェストされるのでクリック

4. もう片方のファイルが自動的に選ばれるので、クリック

5. 2つのファイルの差分が表示されたことを確認

6. 右上の[…]-[インラインビュー]

7. 差分表示がインラインに切り替わる

8. 開いてる3つのタブを、すべて閉じる
text1.txt
text2.txt
text2.txt←→text1.txt

9. [ファイル]-[フォルダーを開く]

10. 項番1のテスト用フォルダを開く
※信用に足るフォルダか聞かれたら「はい、作成者を信頼します」

11. [編集]-[フォルダーを指定して検索]

12. 検索ボックスに「aaa」を入力すると実行される

13. 検索結果の一覧で「text1.txt」の下の「aaa」行をクリックするとそのファイルでの該当箇所が表示される

14. 検索結果の一覧で「text2.txt」の下の「aaa」行をクリックするとそのファイルでの該当箇所が表示される

15. 検索結果の一覧(どこでもいい)を右クリックして [すべてコピー]

16. [ファイル]-[新しいテキストファイル]

17. 貼り付け(Option+V)をすると結果が貼り付けられる

18. 開いてるタブを全て閉じる

19. [ファイル]-[フォルダーを閉じる]

20. VSCodeを閉じる

21. Mac のターミナルに戻って、Downloadsにいることを確認して、ファイルの削除

pwd
ls -l `date +%Y%m%d_test`
rm -rf `date +%Y%m%d_test`
ls -l

2. Markdown エディタを使う

1.  [ファイル]-[新しいテキストファイル]
2. ファイル内に下記を記述

# 1. 見出しレベル1
ここに本文を書く
## 2. 見出しレベル2
ここに本文を書く

3. VSCode画面上部のSearchボックス上で「>markdown」と入力すると、「markdown:プレビューを横に表示」とサジェストされるのでクリック
4. 画面右にプレビューがでる
5.「1. あああ」と打って(1.の後は半角空白)、エンター
6. 「2.」が自動で表示されたことを確認
7. 適当な文字列を選んで「Ctrl+B」で太字に出来ることを確認
8. 今書いてる内容を消して次の内容に置き換え

# あああ
## あああ
### あああ
#### あああ
##### あああ

9. VSCode画面上部のSearchボックス上で「>section」(または「>セクション」)で検索、「Markdown All in One: Add/Update section numbers」を選択
10. 見出しに設定したものが、自動でナンバリングされることを確認

# 1. あああ
## 1.1. あああ
### 1.1.1. ああ
#### 1.1.1.1. あああ
##### 1.1.1.1.1. あああ
タイトルとURLをコピーしました