Format, lint, and enforce coding conventions for TypeScript/JavaScript across the entire team — powered by Prettier + ESLint rules, zero config required.
✨ Features
| Feature |
Description |
| 🎨 Format on Save |
Auto-formats every .ts, .js, .tsx, .jsx file using Prettier |
| 📦 Import Sorting |
Groups imports: Node built-ins → External → Internal/Relative |
| 🔍 Lint Rules |
Flags var, ==, console.log, unused imports, any type, and more |
| 🔧 Auto-fix |
One command fixes all auto-fixable issues (var → const, == → ===) |
| 📋 Show Config |
View the active team config at any time |
| ⚙️ Team Shared Config |
Commit .vscode/settings.json to enforce rules for everyone |
🚀 Quick Setup for the Team
1. Install the extension
From the VSCode Marketplace:
ext install your-publisher-id.team-formatter
Or install the .vsix file manually:
code --install-extension team-formatter-1.0.0.vsix
2. Commit shared settings to your repo
Copy .vscode/team-config.jsonc content into your project's .vscode/settings.json:
{
"teamFormatter.enable": true,
"teamFormatter.formatOnSave": true,
"teamFormatter.prettier.printWidth": 100,
"teamFormatter.prettier.singleQuote": true,
"teamFormatter.prettier.semi": true,
"teamFormatter.prettier.trailingComma": "all",
"[typescript]": {
"editor.defaultFormatter": "your-publisher-id.team-formatter",
"editor.formatOnSave": true
}
}
3. Recommend the extension to teammates
Add to .vscode/extensions.json:
{
"recommendations": ["your-publisher-id.team-formatter"]
}
When teammates open the project, VSCode will prompt them to install the extension automatically.
| Rule |
Default |
Description |
printWidth |
100 |
Max line length |
tabWidth |
2 |
Indent with 2 spaces |
singleQuote |
true |
Use ' not " |
semi |
true |
Semicolons required |
trailingComma |
"all" |
Trailing commas everywhere |
bracketSpacing |
true |
{ foo } not {foo} |
arrowParens |
"always" |
(x) => x not x => x |
🔍 Lint Rules
| Rule |
Severity |
Description |
no-console |
⚠️ Warning |
No console.log in production code |
no-var |
🔴 Error |
Use const/let not var |
prefer-const |
💡 Hint |
Use const when variable isn't reassigned |
eqeqeq |
⚠️ Warning |
Use === not == |
no-unused-vars |
⚠️ Warning |
Remove unused imports |
no-explicit-any |
⚠️ Warning |
Avoid TypeScript any type |
sort-imports |
🔵 Info |
Imports sorted and grouped |
🖱️ Commands
Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
| Command |
Description |
Team Formatter: Format File |
Format the active file |
Team Formatter: Fix All Auto-fixable Lint Issues |
Auto-fix var, ==, etc. |
Team Formatter: Show Active Config |
Preview current config as JSON |
🏗️ Publishing to VSCode Marketplace
# Install vsce
npm install -g @vscode/vsce
# Login with your publisher account
vsce login your-publisher-id
# Package as .vsix (for internal distribution)
npm run package
# Publish to Marketplace
npm run publish
First time? Create a publisher account at https://marketplace.visualstudio.com/manage
🗂️ Project Structure
team-formatter/
├── src/
│ ├── extension.ts # Entry point
│ ├── formatter/
│ │ ├── TeamFormatter.ts # Prettier integration
│ │ └── ImportSorter.ts # Import grouping & sorting
│ ├── linter/
│ │ └── TeamLinter.ts # Lint rules engine
│ └── commands/
│ └── registerCommands.ts # VS Code commands
├── .vscode/
│ └── team-config.jsonc # Shared team config (commit this!)
├── package.json # Extension manifest
└── tsconfig.json
