Vscode 必装扩展与避坑指南

必装扩展一、Fav

为你喜爱的文件创建快捷方式。

安装后，导航侧栏新增Fav面板入口，可以跨项目收藏常用文件。右击文件面板收藏工作区文件，也可通过指令收藏任意打开的文件，可自定收藏名称。

推荐，暂未发现坑点。

---

必装扩展二、Bookmarks

标记代码行并自由跳转

坑点：标记算法存在BUG，编辑后标记可能消失、错位。Github 上有仓库但核心代码不开源，安装的也只是混淆后的代码。

避坑指南：建议设置“保存书签到项目文件夹”，出错后，可以自行打开修改。建议关闭“实验中的sticky引擎”，该算法导致修改代码后书签丢失、错位BUG，关闭后暂未发现类似错误，不过收藏工作区之外的文件时，似乎有显示更新不及时的BUG。

---

必装扩展三、Custom CSS and JS

自定义CSS与JS代码。Github

相当于DIY vscode的外壳，此乃自定义Visual Studio Code样式终极之解决方案，但是外壳层无法调用vscode指令，所以暂时不能用来实现工具栏。

---

必装扩展四、Adam's Toolbar

vscode没有常规意义上的工具栏，为人所诟病。这个扩展是一个workaround，可以在底部状态栏新增几个功能按钮，主要是代码位置的前后导航、代码折叠与展开、导航至匹配的括号等等。

坑点：未提供自定义入口，且按钮排列过于紧凑，容易误触。

避坑指南：可修改源码，Github。然而由于安装的扩展代码未经混淆，所以其实可以直接修改安装后的代码，位于 C:\Users\Admin.vscode\extensions\adamanand.adamstool-0.1.8\out\src\extension.js，建议将此文件添加到Fav收藏，可以随时修改，但是需要完全重启vscode才能生效。可设置按钮是靠左还是靠右，但是没有居中这一选项。

建议为 Bookmarks 扩展的几个指令添加相关按钮，如切换书签、导航至上一个/下一个书签：

'use strict';
Object.defineProperty(exports, "__esModule", { value: true });
const vscode = require("vscode");
let t = null;
exports.activate = function (context) {
    if (t == null) {
        t = new AdamsTool();
        t.Setup();
        
        let disposable = vscode.commands.registerCommand('ez.toggleWrapTab', () => {
            //vscode.window.showInformationMessage('Hello World!');
            const config = vscode.workspace.getConfiguration();
            var sec='workbench.editor.wrapTabs';
            return config.update(
                sec,
               ! config.get(sec),
                vscode.ConfigurationTarget.Workspace
            );
        });
        context.subscriptions.push(disposable);
    }
    context.subscriptions.push(t);
};
// http://anandganesh2005.blogspot.com/2019/03/visual-studio-code-icon-names.html
// https://code.visualstudio.com/api/references/icons-in-labels
class AdamsTool {
    pushBtn(label, tip, cmd, right, clr, sep){
        if (!this.btns) this.btns={};
        if (!this.btns[cmd]) {
            var e=vscode.window.createStatusBarItem(right?vscode.StatusBarAlignment.Right:vscode.StatusBarAlignment.Left);
            this.btns[cmd]=e;
            e.text = label;
            e.tooltip = tip;
            if(!sep)e.command = cmd;
            e.color = (clr||'yellow');
            e.show();
        }
    }
    pushSep(n){
        this.pushBtn(' ', '', 'sep'+n,0,0,1);
    }
    Setup() {
        var spc=0;
        this.pushBtn('$(word-wrap)', '自动换行', 'workbench.editor.wrapTabs');
        this.pushBtn('$(extensions-view-icon)', '标签页换行', 'ez.toggleWrapTab');

        this.pushBtn('$(bookmark)', '切换书签', 'bookmarks.toggle');
        this.pushSep(spc++);
        this.pushBtn('$(marker-navigation-previous)', '上一书签', 'bookmarks.jumpToPrevious');
        this.pushBtn('$(marker-navigation-next)', '下一书签', 'bookmarks.jumpToNext');

        this.pushSep(spc++);
        this.pushBtn('$(code)', '匹配括号', 'editor.action.jumpToBracket');

        
        this.pushSep(spc++);
        this.pushBtn('$(arrow-left)', '后退', 'workbench.action.navigateBack');
        this.pushBtn('$(arrow-right)', '前进', 'workbench.action.navigateForward');


        this.pushBtn('$(arrow-up)', '上一光标位置', 'workbench.action.navigateLast', true);
        this.pushBtn('$(browser)', '控制台', 'workbench.action.toggleDevTools', true);
        this.pushBtn('$(terminal-view-icon)', '终端', 'workbench.action.terminal.new', true);
        this.pushBtn('$(triangle-right)', '调试', 'workbench.action.debug.start', true);
        this.pushBtn('$(diff-added)', '折叠全部', 'editor.foldAll', true);
        this.pushBtn('$(diff-removed)', '展开全部', 'editor.unfoldAll', true);
    }
    dispose() {
        this.btns.forEach(e => {
            e.dispose();
        });
    }
}
exports.deactivate = function deactivate() {
    t = null;
};
……

按钮通过text属性设置图标，如text = '$(arrow-left)'。目前只能添加vscode内置的图标。

---

必装扩展五、Settings Toggle

在Visual Studio代码中轻松切换设置

stackoverflow.com/questions/6…

---

必装扩展六、你自己的扩展程序

不要被官方的仓库吓到了，其实上手很简单的，推荐其中的“Hello World 的最小示例”，纯JS书写，其中只有两个文件需要注意：逻辑文件extension.js、清单文件pacakage.json，代码下载下来后，直接vscode打开文件夹、F5运行，迭代迅速，还可以放到C:\Users\Admin.vscode\extensions\文件夹，边使用边开发。其他的一般是用TS写的，不过个人不喜欢掌握太多语言，掌握精髓就足够了。

官方DIY指南：

code.visualstudio.com/api/get-sta…

code.visualstudio.com/api/referen…

---