きゃらりこ日誌
VisualStudio Code（通称 VSCode）を使い始めて半年ぐらいたって、いろいろ慣れてきたので、自分なりのカスタマイズをまとめておきます。
スペースを分かりやすくする
全角・半角スペースについては、ハイライト表示で対処する拡張機能を使用している人が多いのですが、ハイライトだと主張しすぎで見た目が気に入らないので、別の方法を採用しました。
全角スペースについては、HackGenもしくはRicty Diminishedというフォントを使用すると、かつてワープロ専用機で全角スペースを入力すると表示される空白記号⬚（点線四角）っぽく表示されます。
半角スペースについては、editor.renderWhitespaceで設定できるビュレットでは視認性に難があるので、秀丸エディタのように␣（空白記号）に置き換えたかったのですが、ビュレットの文字を変更する方法は見つけられませんでした。
本来は専用の拡張機能を作って解決したほうがいいと思うのですが、そんなスキルはないので既存の拡張機能Whitespace+のconfig.jsonを書き換えて、半角スペースの下に︶（縦書きの閉じ括弧）を付加して解決しました。
なお、本文に挿入するタイプのツールチップを追加する拡張機能を使っている場合は、ツールチップの部分まで︶でくくられてしまいますが、それは許容することにしました。
コマンドパレットでwhitespace+ configを入力すると、whitespace+のconfig.jsonを以下の内容に書き換えることができます。
ちなみに書き換え前に戻したくなった場合は、ここにあるオリジナルのconfig.jsonに戻してください。
{
"mode": "all",
"autoStart": true,
"refreshRate": 100,
"elements":
[{
"name": "control",
"enabled": true,
"pattern": "[\\cA-\\cH\\cK-\\cL\\cN-\\c_\\u007F]+",
"style": {
"borderWidth": "5px",
"borderRadius": "0px",
"borderStyle": "solid",
"light": {
"backgroundColor": "rgba(58, 70, 101, 0.3)",
"borderColor": "rgba(58, 70, 101, 0.4)"
},
"dark": {
"backgroundColor": "rgba(255, 0, 0, 0.9)",
"borderColor": "rgba(117, 141, 203, 0.4)"
}
},{
"name": "newline",
"enabled": true,
"pattern": "\\n",
"style": {
"borderWidth": "1px",
"borderRadius": "2px",
"borderStyle": "solid",
"light": {
"borderColor": "rgba(38, 150, 38, 0.3)"
},
"dark": {
"borderColor": "rgba(85, 215, 85, 0.4)"
}
}
},{
"name": "trailing",
"enabled": "unlessCursorAtEndOfPattern",
"pattern": "[^\\S\\r\\n]+$",
"style": {
"borderWidth": "1px",
"borderRadius": "2px",
"borderStyle": "solid",
"light": {
"backgroundColor": "rgba(58, 70, 101, 0.3)",
"borderColor": "rgba(58, 70, 101, 0.4)"
},
"dark": {
"backgroundColor": "rgba(117, 141, 203, 0.3)",
"borderColor": "rgba(117, 141, 203, 0.4)"
}
}
}]
}
その他
細かく説明するのが面倒なので、setteing.jsonの中身をそのまま載せておきます。
{
// ======== システム ========
// Gitを有効化
"git.enabled": false,
// Git が見つからない場合の警告を無視
"git.ignoreMissingGitWarning": true,
// ウィンドウのタイトル
"window.title": "${dirty}${activeEditorLong}${separator}${rootName}${separator}${appName}",
// ファイル一覧の表示ファイル数
"explorer.openEditors.visible": 24,
// 文字コードの自動判別
"files.autoGuessEncoding": true,
// スムーズスクロール
"editor.smoothScrolling": false,
// クラッシュ レポートを送信する
"telemetry.enableCrashReporter": false,
// 利用状況データとエラーを送信する。
"telemetry.enableTelemetry": false,
// ステータスバーでフィードバック (スマイルマーク) を表示
"workbench.statusBar.feedback.visible": false,
// ウィンドウサイズで折り返し
"editor.wordWrap": "on",
// 単語の区切り文字に全角記号、空白を追加
"editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?、。「」『』（）〈〉《》【】“”〝〟〔〕；：・？＜＞＋－＊／｛｝｜～＆％＄＃”！’ を",
// 空白文字列の表示
"editor.renderWhitespace": "all",
// 制御文字を表示する
"editor.renderControlCharacters": true,
// フォント・サイズ
"editor.fontFamily": "HackGen",
"editor.fontSize": 16,
// カーソル行の強調
"editor.renderLineHighlight": "all",
// TAB設定
"editor.tabSize": 4,
"editor.insertSpaces": false,
"editor.detectIndentation": false,
// インデントの目印の縦棒
"editor.renderIndentGuides": false,
// 自動リンク
"editor.links": false,
// 1行の文字数
"editor.wordWrapColumn": 100,
// 折り返し行のインデント
"editor.wrappingIndent": "none",
// 縦ルーラーの位置（文字数）
"editor.rulers": [100],
// ======== 整形 ========
// headタグとbodyタグをインデント ※Beautify側の設定(indent_inner_html)が優先される
"html.format.indentInnerHtml": false,
// 最終行の改行
"editor.trimAutoWhitespace": false,
// 直前に改行を1つ入れるタグ
"html.format.extraLiners": null,
// 整形してはいけないタグ(nullはインラインタグすべて)
"html.format.unformatted": "a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, link, map, mark, MathML, math, meter, noscript, object, output, picture, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, rb, rt, rp",
// 中身を整形してはいけないタグ
"html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, span, ul, li, ol, ruby, rb, rt, rp",
// ======== 入力補助 ========
// ドキュメント内から入力候補を抽出
"editor.wordBasedSuggestions": true,
// minimap
"editor.minimap.enabled": false,
// 入力時に自動整形
"editor.formatOnType": true,
// デフォルトの改行コード
"files.eol": "\n",
// 閉じカッコを自動入力
"editor.autoClosingBrackets": "never",
// 閉じタグを自動入力
"html.autoClosingTags": false,
// ======== 拡張機能「beautify」 ========
"beautify.config": {
"html": {
// 改行コード
"eol": "\n",
// インデントのサイズ ※indent_with_tabsが優先
"indent_size": 4,
// タブでインデント
"indent_with_tabs": true,
// 最終行に改行を挿入
"end_with_newline": true,
// 空行を許可
"preserve_newlines": true,
// 空行の最大値
"max_preserve_newlines": 3,
// <head>と<body>をインデント
"indent_inner_html": false,
// JavaScriptの{}の字下げ collapse-preserve-inline, collapse, expand, end-expand, none
"brace_style": "collapse",
// JavaScriptのインデントスタイル
"indent_scripts": "normal",
// １行の文字数(0は無設定)
"wrap_line_length": 0,
// 属性値のあとで強制改行
"wrap_attributes": "auto",
// 閉じタグの後に強制改行するタグ
"extra_liners": null,
},
"css": {
// 改行コード
"eol": "\n",
// インデントのサイズ ※indent_with_tabsが優先
"indent_size": 4,
// タブでインデント
"indent_with_tabs": true,
// 最終行に改行を挿入
"end_with_newline": false,
// 空行を許可
"preserve_newlines": true,
// 空行の最大値
"max_preserve_newlines": 3,
// セレクタの間で改行
"selector_separator_newline": false,
// ルール(CSS属性の設定)を１行にまとめない
"newline_between_rules": true,
},
"js": {
// 改行コード
"eol": "\n",
// インデントのサイズ ※indent_with_tabsが優先
"indent_size": 4,
// タブでインデント
"indent_with_tabs": true,
// 最終行に改行を挿入
"end_with_newline": false,
// 空行を許可
"preserve_newlines": true,
// 空行の最大値
"max_preserve_newlines": 3,
// if (foo == 0)を、if (␣foo == 0␣)nにする ※括弧の前後にスペースを入れる
"space_in_paren": true,
// function(){}を、function␣(){}にする。 ※functionの後にスペースを入れる
"space_after_anon_function": false,
// J{}の字下げ collapse-preserve-inline, collapse, expand, end-expand, none
"brace_style": "collapse",
// 配列を展開
"keep_array_indentation": true,
// ？
"keep_function_indentation": false,
// if(foo == 0)を、if␣(foo == 0)にする ※括弧の前後にスペースを入れる
"space_before_conditional": true,
// チェーンメソッドを改行 ※abc().def().ghi()を、ドットの前で改行
"break_chained_methods": false,
// ？
"eval_code": false,
// \x23などを、エスケープしない
"unescape_strings": false,
// １行の文字数(0は無設定)
"wrap_line_length": 0,
// 属性値のあとで強制改行
"wrap_attributes": "auto",
// 配列などのとき、カンマ前で改行
"comma_first": false,
},
},
"japanese-proofreading.textlint.読点の数": false,
"japanese-proofreading.textlint.かっこ類と隣接する文字の間のスペースの有無": false,
"japanese-proofreading.textlint.外来語カタカナ表記": false,
"japanese-proofreading.textlint.全角文字と半角文字の間": false,
"markdownlint": {
"//": "MD004 : リストの記号をハイフンにする",
"ul-style": {
"style": "dash",
},
"//": "MD007 リストのインデントに使用するスペースの数",
"MD007": false,
"//": "MD009 : 改行のための2スペースを除いて、行末の不要なスペースを検知する",
"no-trailing-spaces": {
"br_spaces": 2,
},
"//": "MD010 Tab によるインデントを禁止する",
"no-hard-tabs": false,
"//": "MD012 連続する空行を最大〇つまでにする",
"no-multiple-blanks": {
"maximum": 3,
},
"//": "MD013 1行の長さを制限",
"line-length": {
"line_length": 120,
"headers": false,
"code_blocks":false,
"tables": false,
},
},
"workbench.colorTheme": "Default Light+",
// テーマ「Default Light+」のカスタマイズ
"workbench.colorCustomizations": {
"statusBar.background": "#DDD",
"statusBar.foreground": "#000",
"statusBar.debuggingBackground": "#DDD",
"statusBar.debuggingForeground": "#000",
"statusBar.noFolderBackground": "#DDD",
"statusBar.noFolderForeground": "#000",
},
// Markdown用CSSカスタマイズ（markdown.cssは、ワークスペース内に設置する）
"markdown.styles": [
".vscode/markdown.css"
],
}