DevLens

Instant, searchable cheat sheets for every language — right inside VS Code.

What is DevLens?

Stop alt-tabbing to docs. DevLens opens a smart cheat sheet panel beside your code with 300+ ready-to-use snippets across Python, HTML, CSS, Tailwind, and more.

It auto-detects which library you're using from your imports, switches instantly, and lets you insert any snippet directly at your cursor with one click — no copy-pasting, no context switching.

Think of it as having a senior dev sitting next to you who just knows every API off the top of their head.

Features

Libraries

🐍 Python

🌐 Web Dev

Total: 410+ snippets across 8 libraries

Keyboard Shortcut

Or open via the Command Palette → DevLens: Open DevLens

Or right-click anywhere in a source file → Open DevLens

Getting Started

# 1. Install from the VS Code Marketplace
#    Search "DevLens" or use the button at the top of this README

# 2. Open any Python or web file
# 3. Press Cmd+Ctrl+D (macOS) or Ctrl+Ctrl+D (Windows/Linux)
# 4. DevLens opens beside your code — already on the right library

Development Setup

# Clone the repo
git clone https://github.com/Ali-Aldahmani/devlens.git
cd devlens

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Launch Extension Development Host
# Open the project in VS Code, then press F5
code .

For live recompilation while developing:

npm run watch
# Then press F5 once — changes rebuild automatically

Contributing

Adding a New Library

1. Create src/data/<group>/<library>.ts:

export const mylib = {
  name: "MyLib",
  import: "import mylib",
  categories: [
    {
      title: "Category Name",
      items: [
        { snippet: "mylib.method()", desc: "What it does" },
      ],
    },
  ],
};

2. Register it in src/data/index.ts:

import { mylib } from "./<group>/mylib";

export const libraries = {
  // ...existing
  mylib,
};

export const languageGroups = [
  { label: "My Group", icon: "🔧", libraries: ["mylib"] },
];

export const importDetectionMap = {
  // ...existing
  "import mylib": "mylib",
};

3. Run npm run compile — it appears in the panel automatically.

Adding a New Language Group

In src/data/index.ts, add an entry to languageGroups:

{ label: "Backend", icon: "⚙️", libraries: ["go", "rust"] }

It shows up in the language picker immediately — no other changes needed.

Adding a New Command

1. Declare it in package.json:

{
  "command": "devLens.myCommand",
  "title": "DevLens: My Command"
}

2. Handle it in src/extension.ts:

const myCommand = vscode.commands.registerCommand("devLens.myCommand", () => {
  CheatSheetPanel.createOrShow(context.extensionUri, "mylib");
});
context.subscriptions.push(myCommand);

Packaging & Publishing

# Install the VS Code packaging tool
npm install -g @vscode/vsce

# Package locally as .vsix (for testing)
npm run package

# Publish to the Marketplace
npm run publish

Roadmap

Done

• [x] NumPy, Pandas, Matplotlib, Seaborn, Scikit-learn
• [x] HTML, CSS, Tailwind CSS
• [x] Auto-detection from file imports
• [x] Insert at cursor + copy to clipboard
• [x] Snippet search and category tabs
• [x] Multi-language picker with search
• [x] Markdown reference view mode

Upcoming

• [ ] JavaScript & TypeScript
• [ ] Git commands
• [ ] Python stdlib — os, re, datetime, json, itertools
• [ ] Favorites / pinned snippets
• [ ] Recently used snippets
• [ ] User-defined custom snippet packs
• [ ] Rust, Go

Contributing Guidelines

Contributions are welcome — new libraries, bug fixes, or feature ideas.

1. Fork the repo
2. Create a branch: git checkout -b feat/my-feature
3. Commit your changes: git commit -m "feat: add my feature"
4. Push and open a Pull Request

License

MIT © Ali Aldahmani