- 1. 概要
- 2. インストール
- 3. 有効化
- 4. デフォルトを表示にする
- 5. 枠線のみ表示
- 6. 不要になったのか？
1. 概要
タイトル通り、全角スペースを明示的に表示したいのです。
本項は、「全角スペースを可視化してくれる Visual Studio Code の拡張機能「zenkaku」 | Webrandum」を参考にさせていただきました。
2. インストール
「zenkaku」をキーワードに検索すると、現時点（2020年1月21日）では、最上位に表示されました。
「Install」
3. 有効化
インストールしただけじゃ、表示してくれませんでした。
ソース上を右クリックして
「コマンドパレット」（もしくは Ctrl+Shift+P）
で、「コマンドパレット」なるものを表示して
「enable zenkaku」と入力して Enter
全角スペースが、表示されました。
なんだか中途半端な、灰色の塗りつぶしです。
枠だけにしたいけど、その辺ができるかどうかは、おいおい（おいおい！）。
4. デフォルトを表示にする
前項の設定をしても、新しく開いたワークスペースでは、非表示になってしまうようです。
表示をデフォルトにするには
C:\Users\ユーザ名\.vscode\extensions\mosapride.zenkaku-0.0.3\extension.js
を編集します。
デフォルトは、こんななっております。
（うひひ、「.js」は、「.json」でないので、これ「JavaScript」の形式ですね）
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
var vscode = require('vscode');
var enabled = false;
var appearanceSpace = {
borderWidth: '1px',
borderRadius: '2px',
borderStyle: 'solid',
light: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderColor: 'rgba(200, 200, 200, 0.4)'
},
dark: {
backgroundColor: 'rgba(200, 200, 200, 0.3)',
borderColor: 'rgba(0, 0, 0, 0.4)'
}
};
var whitespaceDecorationSpace;
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
function activate(context) {
EnableZenkaku();
// The command has been defined in the package.json file
// Now provide the implementation of the command with registerCommand
// The commandId parameter must match the command field in package.json
var disposable1 = vscode.commands.registerCommand('extension.enableZenkaku', () => EnableZenkaku());
function EnableZenkaku() {
var activeEditor = vscode.window.activeTextEditor;
if (activeEditor) {
enabled = true;
triggerUpdate();
}
vscode.window.onDidChangeActiveTextEditor(editor => {
activeEditor = editor;
if (editor) {
triggerUpdate();
}
}, null, context.subscriptions);
vscode.workspace.onDidChangeTextDocument(event => {
if (activeEditor && event.document === activeEditor.document) {
triggerUpdate();
}
}, null, context.subscriptions);
var timeout = null;
function triggerUpdate() {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(updateDecorations, 100);
}
function updateDecorations() {
if ((!activeEditor) || (!enabled)) {
return;
}
if (whitespaceDecorationSpace == null) { whitespaceDecorationSpace = vscode.window.createTextEditorDecorationType(appearanceSpace); }
var regExSpace = /\u3000/g;
var text = activeEditor.document.getText();
var whitespaceSpaceChars = [];
var match;
while (match = regExSpace.exec(text)) {
var startPos = activeEditor.document.positionAt(match.index);
var endPos = activeEditor.document.positionAt(match.index + match[0].length);
var decoration = { range: new vscode.Range(startPos, endPos) };
whitespaceSpaceChars.push(decoration);
}
activeEditor.setDecorations(whitespaceDecorationSpace, whitespaceSpaceChars);
}
}
context.subscriptions.push(disposable1);
var disposable2 = vscode.commands.registerCommand('extension.disableZenkaku', function() {
cleanDecorations();
enabled = false;
});
context.subscriptions.push(disposable2);
function cleanDecorations() {
if (whitespaceDecorationSpace != null) {
whitespaceDecorationSpace.dispose();
whitespaceDecorationSpace = null;
}
}
}
exports.activate = activate;
// this method is called when your extension is deactivated
function deactivate() {}
exports.deactivate = deactivate;
下記に、書き換えると、デフォルトで、全角スペース表示になります。
var enabled = true;
5. 枠線のみ表示
先日、「おいおい」と言っていたことが、少しできるようになりました。
var appearanceSpace = {
borderWidth: '1px',
borderRadius: '2px',
borderStyle: 'solid',
light: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderColor: 'rgba(200, 200, 200, 0.4)'
},
dark: {
backgroundColor: 'rgba(200, 200, 200, 0.3)',
borderColor: 'rgba(0, 0, 0, 0.4)'
}
};
の箇所を下記のように（8、9行、16、17行）、書き換えれば
var appearanceSpace = {
borderWidth: '0.5px',
borderRadius: '1px',
borderStyle: 'solid',
light: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderColor: 'rgba(200, 200, 200, 0.4)'
},
dark: {
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(200, 200, 200, 0.5)'
}
};
元々、こういう表示であるものを
枠線のみにできます。
わたしが、使用しているテーマが「Dark」なので、「dark」の箇所を書き換えていますが、テーマが「Light」であれば、「light」の箇所を書き換えるのであると思われます。
もう少し、小さいサイズにしたいのですが、残念ながら、まだ、そこまではできません。
ちなみに
borderStyle: 'groove',
にすると、もうちょいとおしゃれになるかもしれません。
ま、好みの問題かな。
6. 不要になったのか？
2021年12月14日、更新があったので、アップグレードすると、全角表示の色が変わっちゃった。
それだけでなく、「！」も枠付きで表示されておる。
試しに「Zenkaku」を無効にしてみると・・・。
表示が変わらない。
お、デフォルト表示で、全角を表示できるようになったのかしら？
どうも、「VSCode の全角スペースハイライトを特定のファイルで OFF にする」を読むと、バージョン「1.63」から、全角スペースをハイライトする機能が有効になったらしい。
ありがたく、受け入れて、「Zenkaku」をアンインストールすることにします。
|
