1. 目次
2. はじめに
Atomを使ってきたけど、markdownからhtmlに変換がうまくできなかったり、コードを書く際に予測補完が微妙に使いづらい部分があったのでメインのエディタを変えようと思い、VScodeを導入してみました。VScodeのインストールから追加した拡張機能などをメモとして残しておきます。
環境： Ubuntu18.04
3. VScodeのインストール
VScode (Visual Studio Code) は、マイクロソフトにより開発されたソースコードエディタで、Windows、Linux、macOS上で動作します。これまで利用してきたAtom同様、拡張機能を追加することで使いやすくカスタマイズすることができます。ちょっと使ってみてAtomより全然使いやすいですね〜。
まず、下記リンクからUbuntu用の.debファイルをダウンロードします。
ダウンロード先（default）：
~/Download/code_1.41.1-1576681836_amd64.deb
ターミナルからaptでインストール
$ cd ~/Download $ sudo apt install ./code_1.41.1-1576681836_amd64.deb # インストールできたか確認 $ code --version 1.41.1 26076a4de974ead31f97692a0d32f90d735645c0 x64
4. VScodeのアンインストール
合わなくて必要なくなったら以下のコマンドでアンインストールできます。
$ sudo apt remove code
5. 追加した拡張機能
.shを利用した拡張機能の一括インストール方法
.shファイルを作成しておけば、追加したい拡張機能を一括インストールできます。 以下を参考にさせていただきました。
任意のディレクトリにvdcode-extension.shなどの名前で.shファイルを作成します。
中身は以下のコードをコピペして活用してください。
#!/bin/bash
pkglist=(
ms-vscode.cpptools
ms-python.python
julialang.language-julia
mushan.vscode-paste-image
shd101wyy.markdown-preview-enhanced
yzhang.markdown-all-in-one
)
for i in ${pkglist[@]}; do
code --install-extension $i
done
pkglist部分に、自分の追加したい拡張機能のIDを記載してください。
下記超機能のIDは以下に記載があります。
インストール方法
$ chmod 755 vscode-extension.sh $ ./ vscode-extension.sh
これでpkglistに記載した拡張機能は一括インストールされます。
すでにインストールされているものが含まれている場合は、すでにインストール済みですと表示がでて飛ばされるので問題ありません。
5.1. Paste Image
クリップボードから markdown/asciidoc などに直接画像を貼れる便利な拡張機能です。なお、。Ubuntu環境の場合xclipもインストールする必要があるようです。
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
ext install mushan.vscode-paste-image
Ubuntuの場合：下記コマンドでxclipをインストール。
$ sudo apt install -y xclip
Tips
デフォルトではカレントディレクトリに画像が保存されてしまい、整理されません。
<Current derectory>
∟img
∟hogehoge.png
の様に任意のディレクトリに画像を保存したいとき、以下の設定をするとで対応できます。
[Setting]->[Paste Image: Base Path]
${currentFileDir}
[Setting]->[Paste Image: Name Prefix]
img/
5.2. Markdown All in One
Markdownに特化した便利な拡張機能で、以下の機能が利用できます。
- ショートカットキーでMarkdownのタグを入力可能（ctrl+bで太字、ctrl+shift+]でインデントの追加など）
- 画像の挿入時に画像パスの入力を補完
- Markdownのアウトライン表示が可能
- mdファイルを開いた際に自動的にプレビューを起動（デフォルトでは無効）
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
ext install yzhang.markdown-all-in-one
5.3. Markdown TOC
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
ext install markdown-toc
こちらのプラグイン、自動で目次生成してくれて便利なんですが、「auto」が勝手に入力されてしまいうまく使えません。GitHubのissuesに記載されています。 なので、上記issuesに記載されている対処方法を行います。
5.4. Markdownlint
Markdownの構文チェックを行ってくれる拡張機能です。チェック内容は設定ファイルで変更できるため、用途にあわせてルールを設定可能です。
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
ext install DavidAnson.vscode-markdownlint
5.5. Markdown PDF
MarkdownからPDFやHTMLに変換できるプラグイン.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
ext install yzane.markdown-pdf
5.6. Pyhton
Installation
ext install ms-python.python
5.7. C/C++
Installation
ext install ms-vscode.cpptools
5.8.Markdown Preview Enhanced
mermaidを利用してMarkdownでシーケンス図、ガンチャートを記述できるようにするためのプラグインです。mermaid形式を表示させれだけならばMarkdown Preview Mermaid Support を利用することもできます。
Installation
ext install shd101wyy.markdown-preview-enhanced
mermaidのプレビューが黒くなってしまう場合の対処
File>Preferences>Setting から
に変更してください。
Markdown Preview Enhanced で 図 の プレビュー がうまくいかない 時の 対処法 - Qiita
6. ローカルファイルから拡張機能の追加
例として、「Markdown All in One」をローカルファイルから追加する方法を説明します。 まず、こちらのサイトから、右側にある「Download Extension」から.vsixファイルをダウンロードします。
ダウンロードした「yzhang.markdown-all-in-one-2.6.1.vsix」を利用して、拡張機能をインストールします。 VScodeで、[View] → [Command Palette] (Ctrl+Shift+P) でコマンドパレットを表示し、
> install vsix
を実行します。ファイル選択のダイアログが表示されるので、先ほどのファイル「yzhang.markdown-all-in-one-2.6.1.vsix」を選択すると拡張機能がインストールされます。
7. 参考サイト
- UbuntuにVSCodeをインストールする3つの方法 - Qiita
- VS Codeを極める！ MarkdownやGitにもオススメの拡張機能9選 - ICS MEDIA
- MarkDownで画像コピペ！PDFドキュメントを高速で作成する。 - Qiita
- 作者:本間咲来
- 発売日: 2019/09/27
- メディア: 単行本
