VSCode Workspace Extensions

Here are the VSCode extensions that we commonly use at sinProject.

Git

• Git Graph

View a Git Graph of your repository, and perform Git actions from the graph.

• GitHub Pull Request and Issues

Pull Request and Issue Provider for GitHub

• GitHub Actions

GitHub Actions workflows and runs for github.com hosted repositories in VSCode

AI

• ChatGPT - Genie AI

Your best AI pair programmer. Save conversations and continue any time. A Visual Studio Code - ChatGPT Integration. Supports GPT-4, GPT3.5, GPT3 and Codex models. Create new files, view diffs with one click; your copilot to learn code, add tests, find bugs and more.

• Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more

JavaScript, Python, Java, Typescript & all other languages - AI Code completion plugin. Tabnine makes developers more productive by auto-completing their code.

Svelte

• Svelte for VSCode

Svelte language support for VSCode

• Svelte 3 snippets

Svelte 3 Snippets for VSCode

CSS

• Tailwind CSS IntelliSense

Intelligent Tailwind CSS tooling for VSCode

• CSS Peek

Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.

• Color Highlight

Highlight web colors in your editor

HTML

• Auto Rename Tag

Auto rename paired HTML/XML tag

• Highlight Matching Tag

Highlights matching closing and opening tags

• HTML Preview

Provides ability to preview HTML documents.

Code Style

• ESLint

Integrates ESLint JavaScript into VSCode.

• Prettier - Code formatter

Code formatter using prettier

• Trailing Spaces

Highlight trailing spaces and delete them in a flash!

• Code Spell Checker

Spelling checker for source code

{
	"cSpell.words": [
		"autocompletes",
		"autoincrement",
		"codegen",
		...
	],
	"cSpell.ignorePaths": [
		"**/settings.json",
		"**/extensions.json",
		"**/package.json",
		"**/package-lock.json",
		"**/yarn.lock",
		"**/locales/**.json"
	]
}

• Stylelint

Official Stylelint extension for Visual Studio Code

Intellisense

• Path Intellisense

Visual Studio Code plugin that autocompletes filenames

Errors

• Error Lens

Improve highlighting of errors, warnings and other language diagnostics.

• Pretty TypeScript Errors

Make TypeScript errors prettier and more human-readable in VSCode

• Error Gutters

Show error gutters to the right from line numbers

Testing

• Vitest

Run and debug Vitest test cases

{
	"vitest.include": ["src/**/*.{test}.ts"]
}

• Playwright Test for VSCode

Run Playwright Test tests in Visual Studio Code.

Database Management

• Prisma

Adds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files.

Networking

• REST Client

REST Client for Visual Studio Code

{
	"rest-client.previewResponseInUntitledDocument": true
}

• Remote - SSH

Open any folder on a remote machine using SSH and take advantage of VS Code’s full feature set.

Code Execution

• Code Runner

Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim,

{
	"code-runner.executorMap": {
		"typescript": "npx tsx"
	}
}

• Turbo Console Log

Automating the process of writing meaningful log messages.

Code Quality

• SonarLint

Linter to detect & fix coding issues locally in JS/TS, Python, PHP, Java, C, C++, Go, IaC. Use with SonarQube & SonarCloud for optimal team performance.

• CodeMetrics

Computes complexity in TypeScript / JavaScript files.

• Import Cost

Display import/require package size in the editor

Markdown

• Markdown All in One

All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)

Theme

• Material Icon Theme

Material Design Icons for Visual Studio Code

Team Collaboration

• Live Share

Real-time collaborative development from the comfort of your favorite tools.

Highlighting

• Indented Block Highlighting

Highlights everything covered by the currently selected line’s indentation level.

• Indenticator

Highlights your current indent depth

Localization

• i18n Ally

🌍 All in one i18n extension for VSCode

{
	"i18n-ally.localesPaths": ["src/locales", "src/routes/api/languages", "src/routes/api/locales"],
	"i18n-ally.keystyle": "nested",
	"i18n-ally.displayLanguage": "en-US",
	"i18n-ally.sourceLanguage": "en-US"
}

Other

• ToDo Tree

Show TODO, FIXME, etc. comment tags in a tree view

• Bookmarks

Mark lines and jump to them

• PostCSS Language Support

Syntax highlighting for modern and experimental CSS in VSCode