This is a starter project for a frontend app that uses the following packages:
- React
- Tailwind
- Vite
- ESLint
- Prettier
"editor.defaultFormatter": "esbenp.prettier-vscode"
-
Maintain CSS intellisense with Tailwind intellisense in .css files
"files.associations": { "*.css": "tailwindcss" }
-
This allows Tailwind intellisense within variables named like 'myClassName'
"tailwindCSS.classAttributes": [ ".*ClassName" ]
- ESLint
- Prettier
- Tailwind CSS IntelliSense
Launch new browser window. Convenient, but then no browser Devtools
"configurations": [
{
"type": "chrome",
"name": "Debug in new browser",
"request": "launch",
"url": "http://localhost:5173"
}
]
Attach to existing browser window. Requires browser to be in debug mode, but then offers access to DevTools
"configurations": [
{
"type": "chrome",
"name": "Attach to browser",
"request": "attach",
"port": 9222
}
]
Command to start Chrome in debug mode
chrome.exe --remote-debugging-port=9222
npm run dev