MS Visual Studio Codeを使ってみた
rubyやmarkdownなどをatomで書いていましたが、生協で買ったクソスペノートPCのせいか Atomはもっさりした印象がありました。ちょっとした変更ならviでいいやと思うぐらいに。
こちらの記事にて、VS CodeにAtomのキーマップ拡張があるのを知り、使ってみることにしました。
導入
現時点(2016/11/06)で日本語対応されたものが降ってくるみたいです。
Atom keymap
- Ctrl+Shift+Xで拡張機能パレットを開く
- 検索で「Atom keymap」をインストール
だいたいいつも使っているコマンドは使えるようです。
ユーザ設定について
[ファイル]=>[基本設定]=>[ユーザ設定]にてキーマップの変更が可能なようです。開くと左右にjsonファイルが表示されますが、左のファイルがデフォルトで変更不可、右のファイルで上書きするようです。デフォルトのコメントも日本語で記述されていますし、特にググることもなくカスタマイズできそうです。
試しに設定を上書きしてみます
// エディター
// Ctrl キーを押しながらマウス ホイールを使用してエディターのフォントをズームします
"editor.mouseWheelZoom": true,
Ctrl+マウスホイールでフォントサイズが変更できるようになりました
基本操作
ショートカットの基本操作は以下のサイトを参照。ATOMの基本的なキーマップで上書きされているかもしれないけど。
メニューバー
Atomと違い、プロジェクト構成以外も表示されるようです。
- Ctrl＋Shift＋E：エクスプローラ
- Ctrl＋Shift＋F：フォルダ内検索
- Ctrl＋Shift＋G：Git
- Ctrl＋Shift＋D：デバッグ
- Ctrl＋Shift＋X：拡張機能検索
その他
- Alt：ツールバーの表示/非表示
個人的おすすめプラグイン(そのうち追記します)
MarkdownをPDFで吐き出す
拡張機能をインストールし再起動。Ctrl+Shift+Pで「pdf」とかで検索すると「Convert Markdown to PDF」
以下の設定をしていればとりあえずいい感じに使えた。
// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
//Markdown
// markdown-pdf で使用するスタイルシートのパスを指定します
"markdown-pdf.styles": [
"C:\\Users\\ryota\\Documents\\markdown-pdf.css" // OK
],
// スタイルシートのファイル名を指定します。例: github.css, monokai.css ...
// ファイル名のリスト : https://github.com/isagalaev/highlight.js/tree/master/src/styles
// デモサイト : https://highlightjs.org/static/demo/
"markdown-pdf.highlightStyle": "github.css",
// Syntax highlighting を有効にします
"markdown-pdf.highlight": true,
// 改行を有効にします
"markdown-pdf.breaks": false,
// 出力フォーマット: pdf , html, png, jpeg
"markdown-pdf.type": "pdf"
}
rubyの静的解析ツール「rubocop」
上記リンクを参考に。rubyは2.3.0をインストールしました。
> gem install rubocopでSSLエラーがでたので以下の記事を参考にgemをupdateしてからrubocopをインストールしました。
Clock in status bar
ステータスバーに時刻を表示してくれる。
Color Picker for VS Code
Atomでもおなじみのあれデス
使ってみた感想
まだそんなに拡張機能を導入していないので、今後どうなるかわかりませんが、Atomよりは軽いと思います。(Atomにはプラグインたくさん入れてます...)
気になる点では
- Markdownでソースファイルの改行がpreviewに反映されない
- メニューパネルがやや扱いづらい
ぐらいです。
AtomではUIで各種設定を行えましたが、VS Codeはほぼjsonで記述するようです。
Markdownの改行をpreviewに反映させるjsonコンフィグはないっぽいです。
(追記：2016/11/09)
VS Code 標準Markdown Extensionsで、改行を有効にするを参考に、改行が反映できました。
MDDocumentContentProvider.prototype.createRenderer = function () {
var hljs = require('highlight.js');
var mdnh = require('markdown-it-named-headers');
var md = require('markdown-it')({
html: true,
breaks: true, // <= 追加
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return "<pre class=\"hljs\"><code><div>" + hljs.highlight(lang, str, true).value + "</div></code></pre>";
}
catch (error) { }
}
return "<pre class=\"hljs\"><code><div>" + md.utils.escapeHtml(str) + "</div></code></pre>";
}
}).use(mdnh, {});
return md;
};
メニューパネルに関しても、フォルダ構成を表示させているときはネストも深くないのでそんなに幅を広げなくていいのですが、拡張機能検索も同一パネル上に表示されるため、いちいち手動で広げないといけないのがBadです。拡張ライブラリ名がわかっているならCtrl+Shift+Pで「ext install」とかのワンラインでもいいのですが…