ちょっとカッコつけて楽にPC触りたいとかいう不純な動機で2か月ほどVS Codeを触ってみました。
たまにショートカットキーが反応しないような気はするものの、色分けや入力支援のおかげで感触は上々です。
<2019/05/14追記>
（→「IME」をオフにして「英文入力モード」にしたら使えるようになりました!!）
本来はプログラミングに使うためのエディタですが、Markdownのおかげで現状ほぼ只のテキストエディタと化している私の設定内容を公開してみたいと思います。
拡張機能（プラグイン）の追加
VS Codeの設定
Japanese Language Pack for Visual Studio Code
初期設定は全編英語です。日本人なので、まずは何も考えず日本語化します。
インストール後、言語の設定変更が必要です。
詳しい手順はページ下方のリンク先をご参照頂ければと思います。
Settings Sync
GitHubのアカウントを使ってほかの端末とVSCodeの設定を同期できます。
設定ファイルの中身（settings.jsonなど）をGistにアップロード/ダウンロードすることで、データを管理します。
詳しい手順は、ページ下方のリンク先をご参照ください。
※同期完了後のメッセージ。
Material Theme
配色テーマとアイコンテーマがいっぱい。
インストール後、テーマの選択が必要です。
直接setting.jsonで設定する場合は、ページ下方をご参照ください。
現在は以下の設定で使っています。
配色テーマ
Material Theme Palenight High Contrast
ファイルアイコンのテーマ
VSCode Icons
入力支援
Bracket Pair Colorizer
カッコ（Bracket）を階層ごとに色分けしてくれます。
Path Intellisense
ファイルのパスを入力補完してくれるようになります。
Trailing Spaces
行末にある余計なスペースを強調表示します。
設定の変更（settings.json）
配色テーマ・ファイルアイコン
前述のMaterial Themeを適用させます。
"workbench.colorTheme": "Material Theme Palenight High Contrast", "materialTheme.accent": "Pink", "workbench.iconTheme" : "vscode-icons"
2行目の"materialTheme.accent": "Pink"は反映されてない気がする…
VSCode全体の表示
タイトルバー
プロジェクトルートからの相対パスを表示してもらいます。
"window.title": "${dirty}${appName}${separator}${rootName}${separator}${activeEditorMedium}",
※${dirty}で、ファイルの変更を保存していないときに●記号がつきます。
例
Visual Studio Code - 02_Documents - 03_Languages\Javascript\test1.js
ミニマップ
"editor.minimap.enabled": false,
サイドバーの位置
"workbench.sideBar.location": "left",
エクスプローラー
バッジの有無
機能が分からないのでとりあえずコメントアウトで解除しています…
// Controls if file decorations should use badges. // "explorer.decorations.badges": false,
ファイルの並び順
"explorer.sortOrder" : "filesFirst", // 検索欄 "search.showLineNumbers": true, "search.sortOrder": "fileNames",
エディタ・ウィンドウ
カーソル
カーソル（縦棒|タイプ）の太さを調整します。
"editor.cursorWidth": 2,
フォント
<2020/09/23追記>
フォントNoto Sansは只今試用中…
Roboto MonoとMotoyaLMaru W3 monoに変更しました。
"editor.fontFamily" : "'Roboto Mono', 'MotoyaLMaru W3 mono', 'HackGen', 'Consolas', 'Meiryo UI'", "editor.fontSize" : 16, // Enables font ligatures（合字、記号の結合） "editor.fontLigatures": true,
文字の間隔
letterSpacingで横方向、lineHeightで縦方向です。
"editor.letterSpacing": 0.5, "editor.lineHeight" : 20,
インデント
スペース派です。
"editor.renderIndentGuides": true, "editor.tabSize" : 2, "editor.tabCompletion" : "on",
目安線
「●●文字目」を配列で指定します。
"editor.rulers": [60, 70, 80],
ファイルの最終行
最終行に改行の追加を強制
- 言語ごとの改行コードと合わせて設定します。
- Windowsの場合は、何かとトラブルの元なので
falseでも良いかもしれません…
"files.insertFinalNewline": true,
Markdown
プレビュー
本当は自動で左側に置けるともっと嬉しいな。
"markdown.preview.breaks" : true, "markdown.preview.fontFamily": "'Roboto Mono', 'MotoyaLMaru W3 mono', 'Meiryo UI', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'Droid Sans', 'Ubuntu'", "markdown.preview.fontSize" : 16, "markdown.preview.lineHeight": 1.3,
HTML
タグの自動フォーマット関連です。
あんまり理解してなくて長くなってしまうので、詳しくはページ下方のリンク先をご参照ください。
<2020/09/23追記>
その後、設定を色々変更したので、以下は新しい情報に修正してあります。
フォーマッタの選択
既定のHTMLフォーマッタを有効/無効にします
"html.format.enable": true,
Prettierはうまく使えなかったので、VSCode純正のもので…
再フォーマット禁止
タグ
- カンマ区切りで指定します。
nullと設定した場合は、リンク先にあるものが既定値になります。
"html.format.unformatted": "span, img",
コンテンツ（本文など）
- カンマ区切りで指定します。
nullと設定した場合は、既定値の<pre>タグを表します。
"html.format.contentUnformatted": "p, span, a, pre, code, textarea",
セクションごとの区切り
直前に改行を1つ入れるタグを指定します。
- カンマ区切りで指定します。
nullと設定した場合は、既定値の"head, body, /html"を表します。
"html.format.extraLiners": "html, body, header, footer, script, style, title, h1, h2, h3, h4, h5, h6, form, table, /div",
インデント
<head>セクションと<body>セクションをインデントします。
"html.format.indentInnerHtml" : true, "html.format.indentHandlebars": true, // 書式設定とインデント{{###foo}}および{{/foo}}。
属性の折り返し
タグの属性ごとに区切って折り返しするか等を設定します。
"html.format.wrapLineLength": 70, // 上限 "html.format.wrapAttributes": "auto", // 上限を超えたら折返し
改行
要素の前にある既存の改行を保持するか
- タグの内側やテキストに対しては機能しません。
"html.format.preserveNewLines": true,
連続する改行をいくつまで保持するか
- 無制限にするには、
nullを指定します。
- 無制限にするには、
"html.format.maxPreserveNewLines": 1,
Gitまわり
"git.defaultCloneDirectory": "D:\\02_Documents", "git.branchSortOrder" : "committerdate", "sync.gist" : "xxxxxxxxxx",
参照
以下のページを参考にさせて頂きました。
日本語化
配色関連
設定の保存、同期
拡張機能、設定
後記
Web開発等はやっていないとは言え、現状ほとんどブログかプログラミング問題の下書きにしか使っていないので宝の持ち腐れ感もりもりです。
ただのテキストエディタとして使うなら、わざわざ選択するメリットは「画面を暗く出来て目に優しい！」くらいかもしれませんが、難しいことナシに好みに合わせて色々カスタマイズ出来るのが楽しいですね。
あと、プログラマーさん達による「初心者向け」の情報が多いのもポイント高し。
また、Node.jsが使えると自分でも拡張機能を作れるみたいです。
機能本体はどの言語でもOKのようで、JavaScriptでも出来るそうなのでノンプログラマーでもチャンスはあるかもしれません。
私はまだアイディアや技術力が無いので実際やるかどうかは別ですが…いつか出来たら楽しいかも。
先延ばしっぱなしですが、ノンプログラマーとしてはVBAやGASも近々試してみたいと思います。
