---
created: 2024-07-18T15:17:52.557Z
type: note
updated: 2024-07-18T15:44:33.208Z
---

# Kanban in VSCode

## Extensions

- [bierner.markdown-checkbox](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-checkbox)
- [gordonlarrigan.vscode-kanbn](https://marketplace.visualstudio.com/items?itemName=gordonlarrigan.vscode-kanbn)
- [redhat.vscode-yaml](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml)
- ifx.type-script-helper

## Syntax

- [basic-syntax](https://www.markdownguide.org/basic-syntax/)
- \# H1 (file name and H1 must match param case)
- \#\# H2
- Frontmatter is in yaml ifx.type-script-helper *View: Show Kanban* can be used to update dates
- [ ] sub-task
- [x] sub-task completed

## Usage

- gordonlarrigan.vscode-kanbn extension create index file h1 must be in param case (see ifx.type-script-helper Helper: *Transform to Param Case*)
- Features are cards
- User stories are sub-tasks
- Tasks are sub-tasks under user-story
- Feature can have sub-kanban
- Override created date and workload being displayed using board.css
- Tags are used to highlight a topic (ei EAF)
- gordonlarrigan.vscode-kanbn extension displays sub-tasks progress and tags on each card
- ifx.type-script-helper extension is used to update feature from sub-kanban
- Can sort cards descending updated
- Can link to other documents vscode best supports referenced links example [EDA](eda.md)

## Extras

- Use [jackyzha0-quartz](https://github.com/jackyzha0/quartz) to generate a static site from markdown files also supports referenced links
- Use [tamasruss.kanbandown](https://marketplace.visualstudio.com/items?itemName=TamasRuss.kanbandown) to create a single file Kanban but it has bugs
- Use [fcrespo82.markdown-table-formatter](https://marketplace.visualstudio.com/items?itemName=fcrespo82.markdown-table-formatter) to add table functions to markdown files
- Use [catbraaain.mermaid-language](https://marketplace.visualstudio.com/items?itemName=CatBraaain.mermaid-language) and [bierner.markdown-mermaid](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid) to support [mermaid-diagrams](https://mermaid.live)

## CSS Example

```css Thu Jul 18 2024 08:37:24 GMT-0700 (Mountain Standard Time)
.kanbn-task-data-created {
  display: none;
}

.kanbn-task-data-workload {
  display: none;
}

.kanbn-task-tag {
  background-color: #262626;
  color: #198038;
  font-style: italic;
  font-weight: medium;
  margin: 1px 8px 1px 0;
}
```