GoKwik Linting & Formatting - VS Code Extension

One-click setup for standardized linting and formatting in NestJS + TypeScript projects at GoKwik.

Features

🚀 One-Click Setup

Run a single command to configure your entire project with:

• ESLint with TypeScript support
• Prettier for code formatting
• EditorConfig for consistent editor settings
• Husky pre-commit hooks
• VSCode settings optimized for development

📊 Status Bar Integration

See your project's linting status at a glance in the VS Code status bar.

⚡ Quick Actions

Access common linting tasks directly from the Command Palette:

• Format all files
• Lint and auto-fix issues
• Check configuration status
• Update configurations

🔄 Auto-Detection

Optionally prompt to setup linting when opening TypeScript projects without configuration.

Installation

From VS Code Marketplace

1. Open VS Code
2. Press Ctrl+P / Cmd+P
3. Type: ext install gokwik.gokwik-linting-vscode
4. Press Enter

From VSIX File

1. Download the .vsix file
2. Open VS Code
3. Go to Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
4. Click ... menu → Install from VSIX...
5. Select the downloaded file

Usage

Initial Setup

1. Open your TypeScript/NestJS project in VS Code
2. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
3. Type: GoKwik: Setup Linting & Formatting
4. Press Enter and wait for completion
5. Reload VS Code when prompted

That's it! Your project is now configured with standardized linting and formatting.

Available Commands

Open the Command Palette and search for "GoKwik" to see all available commands:

Command	Description
GoKwik: Setup Linting & Formatting	Complete setup for a new project
GoKwik: Update Configuration	Update config files to latest version
GoKwik: Format All Files	Run Prettier on all files
GoKwik: Lint & Fix Issues	Run ESLint with auto-fix
GoKwik: Check Linting Status	Display current configuration status

Status Bar

The status bar shows your current linting status:

• ✓ GoKwik - Linting is properly configured
• ⚠ GoKwik Setup - Linting not configured (click to setup)
• No workspace - No workspace folder open

Click the status bar item to check detailed configuration status.

What Gets Configured

Configuration Files

The extension creates/updates these files in your project:

• .prettierrc - Prettier formatting rules
• .editorconfig - Editor configuration
• .eslintrc.cjs - ESLint rules for TypeScript/NestJS
• .node-version - Node.js version specification
• .vscode/settings.json - VS Code workspace settings

Package.json Scripts

Adds these npm scripts to your package.json:

{
  "scripts": {
    "prepare": "husky install",
    "format": "prettier --write .",
    "lint": "eslint 'src/**/*.{ts,js}' --max-warnings=0",
    "lint:fix": "eslint 'src/**/*.{ts,js}' --fix",
    "typecheck": "tsc -p tsconfig.json --noEmit",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.{ts,js,json,md}": ["prettier --write"],
    "src/**/*.{ts,js}": ["eslint --fix"]
  }
}

Dependencies

Automatically installs these dev dependencies:

• prettier - Code formatter
• eslint - Linter
• @typescript-eslint/parser - TypeScript parser
• @typescript-eslint/eslint-plugin - TypeScript rules
• eslint-config-prettier - Prettier integration
• eslint-plugin-prettier - Prettier as ESLint rule
• eslint-plugin-import - Import/export linting
• eslint-plugin-unused-imports - Remove unused imports
• husky - Git hooks
• lint-staged - Lint staged files

VS Code Settings

Updates .vscode/settings.json with:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Configuration

Extension Settings

Configure the extension via VS Code settings:

Setting	Default	Description
gokwik.autoSetup	false	Auto-prompt for setup in unconfigured TypeScript projects
gokwik.showStatusBar	true	Show linting status in status bar
gokwik.autoInstallDependencies	true	Automatically install required dependencies

To access settings:

1. Open Settings (Ctrl+, / Cmd+,)
2. Search for "GoKwik"

Recommended VS Code Extensions

The extension works best with these installed:

• Prettier - Code formatter (esbenp.prettier-vscode)
• ESLint (dbaeumer.vscode-eslint)
• EditorConfig for VS Code (editorconfig.editorconfig)

The extension will automatically recommend these if not installed.

Workflow

Daily Development

1. Write code normally
2. Files auto-format on save (thanks to VS Code settings)
3. ESLint auto-fixes issues on save
4. No manual formatting needed!

Before Committing

Pre-commit hooks automatically:

1. Format staged files with Prettier
2. Fix ESLint issues in staged files
3. Block commit if unfixable errors exist

Running Manually

# Format all files
npm run format

# Lint with auto-fix
npm run lint:fix

# Lint without fixing (for CI)
npm run lint

# Type checking
npm run typecheck

Troubleshooting

Setup Fails

Problem: Setup command fails or hangs

Solutions:

• Ensure you have package.json in your project root
• Check internet connection (downloads dependencies)
• Try running npm install manually first
• Check the Output panel (View → Output → "GoKwik Linting")

Status Bar Not Showing

Problem: Status bar item doesn't appear

Solutions:

• Check setting: gokwik.showStatusBar is true
• Ensure workspace folder is open
• Reload VS Code window

Format On Save Not Working

Problem: Files don't format when saved

Solutions:

• Install "Prettier - Code formatter" extension
• Check .vscode/settings.json exists
• Verify editor.formatOnSave is true
• Reload VS Code window

ESLint Not Auto-Fixing

Problem: ESLint doesn't fix on save

Solutions:

• Install "ESLint" extension
• Check .eslintrc.cjs exists
• Verify ESLint extension is enabled
• Check Output panel for errors

Pre-commit Hooks Not Running

Problem: Hooks don't run on git commit

Solutions:

• Run npm run prepare to install hooks
• Check .husky/pre-commit exists
• Ensure Husky is installed: npm ls husky
• Try git commit from terminal (not VS Code)

Support

Getting Help

1. Check the Troubleshooting section
2. View logs in Output panel (View → Output → "GoKwik Linting")
3. Create an issue on Bitbucket

Development

Building from Source

# Clone the repository
git clone https://bitbucket.org/gokwik/linting-typescript-vscode.git
cd linting-typescript-vscode

# Install dependencies
npm install

# Open in VS Code
code .

# Press F5 to run in debug mode

Testing

# Run linter
npm run lint

# Run tests
npm test

Packaging

# Create VSIX package
npm run package

# This creates gokwik-linting-vscode-1.0.0.vsix

Publishing

# Publish to VS Code Marketplace
npm run publish

Changelog

Version 1.0.0

• Initial release
• One-click setup command
• Status bar integration
• Auto-detection for TypeScript projects
• Format and lint commands
• Configuration update command
• Comprehensive error handling

License

MIT License - see LICENSE file for details.

Credits

Developed and maintained by the GoKwik development team.

---

Enjoy standardized linting and formatting! 🎉