vscode settings

doc.md

vscode settings & extensions

settings.json for singleton or monorepo projects (these can get messy & unreadable so adding comments helps remember what each one does :))

recommended extensions.json for projects with React, TypeScript, Prettier, Eslint, Tailwind, Git etc.

extensions.json

{
	"recommendations": [
		"esbenp.prettier-vscode",
		"dbaeumer.vscode-eslint",
		"bradlc.vscode-tailwindcss",
		"ms-playwright.playwright",
		"yoavbls.pretty-ts-errors",
		"eamodio.gitlens"
	]
}

monorepo-settings.json

{
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.formatOnSave": true,
	"[mdx]": {
		"editor.formatOnSave": false //do not format mdx
	},
	"editor.tabSize": 2,
	"editor.detectIndentation": false,
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": "explicit"
	},
	"emmet.includeLanguages": {
		"javascript": "javascriptreact"
	},
	"prettier.requireConfig": true,
	"editor.quickSuggestions": {
		"strings": true
	},
	"editor.inlineSuggest.enabled": true,
	"eslint.workingDirectories": [{ "pattern": "./packages/*/" }, { "pattern": "./apps/*/" }],
	//exclude sources/files/patterns from automatic import suggestions
	"typescript.preferences.autoImportFileExcludePatterns": [
		"**/dist/",
		"**/build/",
		"@radix-ui/*",
		"react-aria-components"
	],
	//fixes warning squiggly on @tailwind, @apply, @import etc in .css files
	"files.associations": {
		"*.css": "tailwindcss"
	},
	//enable TW suggestions in text consts named somethingStyles or styles
	"tailwindCSS.classAttributes": ["className", ".*Styles", ".*styles"],
	//enable TW suggestions in cva and cn
	"tailwindCSS.emmetCompletions": true,
	"tailwindCSS.experimental.classRegex": [
		["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
		["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
	]
}

settings.json

{
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.formatOnSave": true,
	"editor.tabSize": 2,
	"editor.detectIndentation": false,
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": "explicit"
	},
	"emmet.includeLanguages": {
		"javascript": "javascriptreact"
	},
	"prettier.requireConfig": true,
	"editor.quickSuggestions": {
		"strings": true
	},
	"editor.inlineSuggest.enabled": true,
	//exclude sources/files/patterns from automatic import suggestions
	"typescript.preferences.autoImportFileExcludePatterns": [".next"],
	//fixes warning squiggly on @tailwind, @apply, @import etc in .css files
	"files.associations": {
		"*.css": "tailwindcss"
	},
	//enable TW suggestions in text consts named somethingStyles or styles
	"tailwindCSS.classAttributes": ["className", ".*Styles", ".*styles"],
	//enable TW suggestions in cva and cn
	"tailwindCSS.emmetCompletions": true,
	"tailwindCSS.experimental.classRegex": [
		["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
		["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
	]
}