ゆるおたノート

Tomorrow is another day.

【Visual Studio Code】ほぼテキストエディタとして使っている私の設定を晒してみます。

ちょっとカッコつけて楽にPC触りたいとかいう不純な動機で
2か月ほどVS Codeを触ってみました。

たまにショートカットキーが反応しないような気はするものの、
<2019/05/14追記>
(→IMEをオフ(英文入力モード)にしたら使えるようになりました!!)
色分けや入力支援のおかげで感触は上々です。

本来はプログラミングに使うためのエディタですが、Markdownのおかげで
現状ほぼ只のテキストエディタと化している私の設定内容を
公開してみたいと思います。

プラグイン

VS Codeの設定

Japanese Language Pack for Visual Studio Code

初期設定は全編英語。日本人なので、まずは何も考えず日本語化します。

インストール後、言語設定の変更が必要です。
詳しい手順はページ下方のリンク先をご参照頂ければと思います。

Settings Sync

GitHubのアカウントで、ほかの端末とVSCodeの設定を同期できます。
Gistを使ってVSCodeの設定データ(settings.json)を管理します。

※送信後のメッセージ。

Material Theme

配色テーマとアイコンテーマがいっぱい。

現在は以下の設定で使っています。

  • 配色テーマ
    Material Theme Palenight High Contrast

  • ファイルアイコンのテーマ
    VSCode Icons

入力支援

Bracket Pair Colorizer

カッコを階層ごとに色分けしてくれます。

Path Intellisense

ファイルのパスを入力補完してくれるようになります。

Trailing Spaces

行末のスペースを強調表示します。

Settings.json

配色テーマ・ファイルアイコン

前述のMaterial Themeを適用します。
"materialTheme.accent": "Pink"は反映できていない気がする…

   "workbench.colorTheme": "Material Theme Palenight High Contrast",
   "materialTheme.accent": "Pink",
   "workbench.iconTheme" : "vscode-icons"

VSCode全体の表示

   // タイトルバーにプロジェクトルートからの相対パスを表示
   /* 例) Visual Studio Code - 02_Documents - 03_Languages\Javascript\test1.js */
   "window.title":
      "${dirty}${appName}${separator}${rootName}${separator}${activeEditorMedium}",

   "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,

エディタ・ウィンドウ

フォントNoto Sansは只今試用中…

   "editor.cursorWidth"  : 2,
   "editor.fontFamily"   :
      "'Noto Sans Mono CJK JP Bold', 'Consolas', 'Meiryo UI', 'MS ゴシック', 'Operator Mono', 'Courier New', 'monospace'",
   "editor.fontSize"     : 13.5,
   "editor.letterSpacing": 0.5,
   // Controls the line height.
   // Use 0 to compute the lineHeight from the fontSize.
   "editor.lineHeight"   : 17,
   // Enables font ligatures(合字、記号の結合)
   "editor.fontLigatures": true,

   //Tabの設定
   "editor.renderIndentGuides": true,
   "editor.tabSize"           : 2,
   "editor.tabCompletion"     : "on",

   // ●●文字目に目安線を入れる
   "editor.rulers"           : [60, 70],

   // 最終行に改行の追加を強制
   "files.insertFinalNewline": true,

Markdown

本当は自動で左側にプレビューを置けるともっと嬉しい…

   "markdown.preview.breaks"    : true,
   "markdown.preview.fontFamily":
      "'Noto Sans CJK JP Bold', 'Meiryo UI', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'Droid Sans', 'Ubuntu'",
   "markdown.preview.fontSize"  : 14,
   "markdown.preview.lineHeight": 1.05,

HTML

タグの自動フォーマット関連です。
長くなってしまうので、詳しくはページ下方のリンク先をご参照ください。

   // 既定のHTMLフォーマッタを有効/無効にします
   "html.format.enable"          : true,

   // コンテンツを再フォーマットしてはならないタグをコンマで区切ってリストにします。
   // 'null' は、既定値の'pre' タグを表します。
   "html.format.contentUnformatted": "pre,code,textarea",

   // 再フォーマットしてはならないタグの、コンマ区切りの一覧。'
   // null'の場合、既定で https://www.w3.org/TR/html5/dom.html###phrasing-content に
   // リストされているすべてのタグになります。
   "html.format.unformatted"     : "wbr", // pタグ内のspanタグ等も改行する

   // 直前に改行を1つ入れるタグの、コンマで区切られたリストです。
   // 'null'は、既定値の"head, body, /html" を表します。
   "html.format.extraLiners"     : "",

   // <head>セクションと<body>セクションをインデントします。
   "html.format.indentInnerHtml" : true,

   // 書式設定とインデント{{###foo}}および{{/foo}}。
   "html.format.indentHandlebars": true,

   // 属性を折り返します。
   "html.format.wrapAttributes"  : "force-aligned", // 2つ目の属性から折り返し、属性の並びを揃える

   // 要素の前にある既存の改行を保持するかどうか。
   // 要素の前でのみ機能し、タグの内側やテキストに対しては機能しません。
   "html.format.preserveNewLines": true,

   // 1つのチャンク内に保持できる改行の最大数。
   // 無制限にするには、'null'を使います。
   "html.format.maxPreserveNewLines": null,

Gitまわり

   "git.defaultCloneDirectory": "D:\\02_Documents",
   "sync.gist"                : "xxxxxxxxxx",

参照

以下のページを参考にさせて頂きました。

qiita.com

coliss.com

necojackarc.hatenablog.com

necojackarc.hatenablog.com

marketplace.visualstudio.com

qiita.com

後記

Web開発等はやっていないとは言え、現状ほとんどブログかプログラミング問題の
下書きにしか使っていないので宝の持ち腐れ感もりもりです。

ただのテキストエディタとして使うなら、わざわざ選択するメリットは
「画面を暗く出来て目に優しい!」くらいかもしれませんが、
難しいことナシに好みに合わせて色々カスタマイズ出来るのが楽しいですね。

あと、プログラマーさん達による「初心者向け」の情報が多いのもポイント高し。

また、Node.jsが使えると自分でも拡張機能を作れるみたいです。
機能本体はどの言語でもOKのようですが、JavaScriptでも出来るそうなので
ノンプログラマーでもチャンスはあるかもしれません。

私はまだアイディアや技術力が無いので実際やるかどうかは別ですが…
いつか出来たら楽しいかも。

先延ばしっぱなしですが、ノンプログラマーとしてはVBAやGASも
近々試してみたいと思います。