-vscode tips.md

• get current theme styles

// https://stackoverflow.com/questions/47117621/how-to-get-the-vscode-theme-color-in-vscode-extensions
const color = new vscode.ThemeColor('badge.background');

• commands icons can use vscode builtin

"commands": [
    // ... ,
    {
        "command": "...",
        "title": "...",
        "icon": "$(add)"
    },
]

• u can hide command from command palet using when

"commandPalette": [
    {
        "command": "...",
        "when": "false"
    },
]

• to get keystrokes
  • https://github.com/microsoft/vscode-extension-samples/blob/master/vim-sample/src/extension.ts
  • https://stackoverflow.com/questions/57561242/vscode-extension-how-to-log-keystrokes/57566871#57566871

// keyDown
context.subscriptions.push(
    vscode.commands.registerCommand('type', (e) => {
        console.log(e.text)
        vscode.commands.executeCommand('default:type', { text: e.text })
    })
)

// use debounce
// keyUp
vscode.workspace.onDidChangeTextDocument((e) => ...)

• auto update tree provider, add any event listener to the class constructor

private _onDidChangeTreeData = new vscode.EventEmitter();
readonly onDidChangeTreeData = this._onDidChangeTreeData.event;

constructor() {
    vscode.workspace.onDidChangeConfiguration((e) => {
        if (e.affectsConfiguration('config.name')) {
            this._onDidChangeTreeData.fire();
        }
    })
}

• to get any data for the command "when" param u can use workbench.action.inspectContextKeys and check the console

• to type something, use

commands.executeCommand('type', { text: '\n' });

// or
commands.executeCommand('default:type', { text: '\n' });

• cursor movment

let selection = editor.selection.active
let newPosition = selection.with(selection.line, offset) // offset == char new offset

// move only
editor.selection = new vscode.Selection(newPosition, newPosition)
// with select
// anchor == the start of the selection
// active == the current possition of the cursor "the end of selection"
editor.selection = new vscode.Selection(editor.selection.anchor, newPosition)

• to fire custom event

const someEvent = new vscode.EventEmitter()
someEvent.fire() // anywhere in code
someEvent.event((e) => {
    // do stuff
})

// at the end
function deactivate() {
    someEvent.dispose()
}

• to set custom when for commands

vscode.commands.executeCommand('setContext', 'the_when_value', true)

// later
vscode.commands.executeCommand('setContext', 'the_when_value', false)

• for notifications with timeout
  • to show without progress, use progress.report({ increment: 0})

return vscode.window.withProgress({
    location: vscode.ProgressLocation.Notification,
    title: 'some msg',
    cancellable: true
}, async (progress, token) => {
    for (let i = 1; i <= 11; i++) {
        await new Promise((resolve) => {
            setTimeout(() => {
                progress.report({ increment: 10 })
                resolve()
            }, 1000)
        })
    }

    return new Promise((resolve) => resolve())
})

• to effectivly track the doc close, save a list of opened ones

let visibleTextEditors = []

// on start
for (const editor of vscode.window.visibleTextEditors) {
    visibleTextEditors.push(editor.document.fileName)
}

// on new document
vscode.window.onDidChangeVisibleTextEditors((editors) => {
    for (const editor of editors) {
        visibleTextEditors.push(editor.document.fileName)
    }
})

// on close
vscode.workspace.onDidCloseTextDocument((doc) => {
    if (doc && doc.isClosed && visibleTextEditors.includes(doc.fileName)) {
        visibleTextEditors.splice(visibleTextEditors.indexOf(doc.fileName), 1)
    }
})

• get selected text

let editor = vscode.window.activeTextEditor
let { document, selection } = editor
let text = document.getText(selection)

• to open settings page frome extension

vscode.commands.executeCommand('workbench.action.openSettings', $QUERY)

override.md

Border Reset

"activityBar.border": "#00000000",
"diffEditor.border": "#00000000",
"diffEditor.insertedTextBorder": "#00000000",
"diffEditor.removedTextBorder": "#00000000",
"dropdown.border": "#00000000",
"editor.findMatchBorder": "#00000000",
"editor.findMatchHighlightBorder": "#00000000",
"editor.findRangeHighlightBorder": "#00000000",
"editor.rangeHighlightBorder": "#00000000",
"editor.selectionHighlightBorder": "#00000000",
"editor.snippetFinalTabstopHighlightBorder": "#00000000",
"editor.snippetTabstopHighlightBorder": "#00000000",
"editor.wordHighlightBorder": "#00000000",
"editor.wordHighlightStrongBorder": "#00000000",
"editorBracketMatch.border": "#00000000",
"editorError.border": "#00000000",
"editorError.foreground": "#00000000",
"editorGroupHeader.focusedEmptyBorder": "#00000000",
"editorGroupHeader.tabsBorder": "#00000000",
"editorHint.border": "#00000000",
"editorHint.foreground": "#00000000",
"editorHoverWidget.border": "#00000000",
"editorInfo.border": "#00000000",
"editorInfo.foreground": "#00000000",
"editorSuggestWidget.border": "#00000000",
"editorUnnecessaryCode.border": "#00000000",
"editorWarning.border": "#00000000",
"editorWarning.foreground": "#00000000",
"focusBorder": "#00000000",
"input.border": "#00000000",
"inputOption.activeBorder": "#00000000",
"inputValidation.infoBorder": "#00000000",
"menu.selectionBorder": "#00000000",
"menubar.selectionBorder": "#00000000",
"notificationCenter.border": "#00000000",
"notificationToast.border": "#00000000",
"notifications.border": "#00000000",
"panel.border": "#00000000",
"peekViewEditor.matchHighlightBorder": "#00000000",
"pickerGroup.border": "#00000000",
"settings.checkboxBorder": "#00000000",
"settings.dropdownBorder": "#00000000",
"settings.dropdownListBorder": "#00000000",
"settings.numberInputBorder": "#00000000",
"settings.textInputBorder": "#00000000",
"sideBar.border": "#00000000",
"sideBarSectionHeader.border": "#00000000",
"statusBar.border": "#00000000",
"tab.activeBorderTop": "#00000000",
"tab.border": "#00000000",
"titleBar.border": "#00000000",
"widget.shadow": "#00000000",
"tab.activeBorder": "#00000000",
"editorOverviewRuler.border": "#00000000",
"editor.lineHighlightBorder": "#00000000",
"tab.hoverBorder": "#00000000",
"imagePreview.border": "#00000000",

squiggles remove

• https://stackoverflow.com/questions/43935303/show-gutters-for-errors-in-vscode
• https://stackoverflow.com/questions/43454967/disable-wavy-underline-in-vs-code/48610661#48610661

"editorError.foreground": "#00000000",
"editorWarning.foreground": "#00000000",
"editorInfo.foreground": "#00000000"

TreeProvider.ts

import { TreeItem, TreeDataProvider, EventEmitter, workspace, Command, ThemeIcon } from 'vscode'

// show a flat list
export default class TreeProvider implements TreeDataProvider<TreeFile> {

    _onDidChangeTreeData = new EventEmitter()
    onDidChangeTreeData = this._onDidChangeTreeData.event

    constructor() {
        workspace.onDidChangeConfiguration((e: any) => {
            if (e.affectsConfiguration('config.name')) {
                this._onDidChangeTreeData.fire()
            }
        })
    }

    async getChildren() {
        // let files = await getFilestList()

        // return files.map((file) => {
        //     let name = getFileName(file)

        //     return new TreeFile(file, name, {
        //         command: 'fileShortcut.openFile',
        //         title: 'Execute',
        //         arguments: [file]
        //     })
        // })
    }

    getTreeItem(file) {
        return file
    }
}

class TreeFile extends TreeItem {
    constructor(
        path,
        label,
        command?: Command
    ) {
        super(label)
        this.id = path
        this.command = command
        this.tooltip = `open file "${path}"`
        this.iconPath = ThemeIcon.File
    }
}

https://github.com/moalamri/vscode-inline-fold/issues/135