{
// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"createRoot 1": {
"prefix": "Lionel React createRoot 1",
"body": [
"import React from 'react';",
"import ReactDOM from 'react-dom/client';",
"import App from './App';",
"import './styles/app.scss';",
"const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);",
"root.render(",
"<React.StrictMode>",
"<App />",
"</React.StrictMode>",
");"
],
"description": "createRoot nhanh chóng 😍"
}
}
{
// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"createApp 1": {
"prefix": "LionelReact createApp 1",
"body": [
"import React from \"react\";",
"import { BrowserRouter, Routes, Route, Link } from \"react-router-dom\";",
"import Home from \"./views/Home\";",
"interface AppProps {}",
"const App = (props: AppProps) => {",
"return (",
"<BrowserRouter>",
"<div className=\"px-5 py-2\">",
"<Link to=\"/\">Home</Link>",
"</div>",
"<Routes>",
"<Route path=\"/\" element={<Home />} />",
"</Routes>",
"</BrowserRouter>",
");",
"}",
"export default App;"
],
"description": "createApp nhanh chóng 😍"
}
}
{
// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"createViewHome 1": {
"prefix": "LionelReact createViewHome 1",
"body": [
"import React from \"react\";",
"interface HomeProps {}",
"const Home = (props: HomeProps) => {",
"return (",
"<main className=\"container mt-5\" >",
"<section className=\"row justify-content-center\">",
"<h1 className=\"text-center text-primary\">Welcome to my Todos Full Stack CRUD App!</h1>",
"</section>",
"</main>",
");",
"}",
"export default Home;"
],
"description": "createViewHome nhanh chóng 😍",
}
}
{
// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"create-esbuild-config-front-end-1": {
"prefix": "LionelReact front-end 1 create-esbuild-config",
"body": [
"Part 1 practice\\package.json",
"{ \"name\": \"todo\", \"version\": \"1.0.0\", \"main\": \"front.js\", \"scripts\": { \"watch:client\": \"node esbuild-config/client.dev.mjs\", \"watch:restart-server\": \"nodemon --config nodemon.json\", \"front\": \"npm-run-all --parallel watch:*\" }, \"keywords\": [], \"author\": \"\", \"license\": \"ISC\", \"description\": \"\", \"dependencies\": { \"@types/bootstrap\": \"^5.2.10\", \"bootstrap\": \"^5.3.3\", \"cors\": \"^2.8.5\", \"express\": \"^4.21.1\", \"mysql2\": \"^3.11.5\", \"react\": \"^18.3.1\", \"react-dom\": \"^18.3.1\", \"react-router-dom\": \"^7.0.2\" }, \"devDependencies\": { \"@types/cors\": \"^2.8.17\", \"@types/express\": \"^5.0.0\", \"@types/node\": \"^22.10.1\", \"@types/react\": \"^18.3.13\", \"@types/react-dom\": \"^18.3.1\", \"@types/typescript\": \"^2.0.0\", \"esbuild\": \"^0.24.0\", \"esbuild-sass-plugin\": \"^3.3.1\", \"nodemon\": \"^3.1.7\", \"npm-run-all\": \"^4.1.5\", \"sass\": \"^1.82.0\", \"ts-node\": \"^10.9.2\", \"typescript\": \"^5.7.2\" } }",
"Part 2 practice\\esbuild-config\\client.dev.mjs",
"import * as esbuild from 'esbuild'; import * as sass from 'sass'; import { sassPlugin } from 'esbuild-sass-plugin'; let ctx; try { ctx = await esbuild.context({ entryPoints: ['src/client/index.tsx'], bundle: true, minify: false, sourcemap: true, outfile: 'public/static/bundle.js', plugins: [sassPlugin({ type: 'style', logger: sass.Logger.silent, quietDeps: true })], define: { 'process.env.NODE_ENV': \"'development'\" } }); await ctx.watch(); const { host, port } = await ctx.serve({ servedir: 'public', fallback: 'public/index.html', port: 9000 }); var hostct = \"localhost\"; console.info(`Hot refresh at http://\\${hostct\\}:\\${port\\}`); } catch (error) { console.error('An error occurred:', error); process.exit(1); }",
"Part 3 practice\\tsconfig.json",
"{ \"compilerOptions\": { \"sourceMap\": true, \"target\": \"es2022\", \"module\": \"commonjs\", \"strict\": true, \"esModuleInterop\": true, \"skipLibCheck\": true, \"forceConsistentCasingInFileNames\": true, \"rootDir\": \"./src\", \"moduleResolution\": \"node\", \"resolveJsonModule\": true }, \"exclude\": [\"node_modules\"] }",
"Part 4 practice\\src\\client\\tsconfig.json",
"{ \"extends\": \"../../tsconfig.json\", \"compilerOptions\": { \"jsx\": \"react\", \"outDir\": \"../../public/static\", \"rootDir\": \".\" }, \"include\": [ \"./**/*\" ] }",
"Part 5 src\\client\\index.tsx",
"Part 6 src\\client\\App.tsx",
"Part 7 src\\client\\views\\Home.tsx",
"Part 8 practice\\public\\index.html",
"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"utf-8\" /> <link rel=\"icon\" href=\"favicon.ico\" /> <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" /> <meta name=\"theme-color\" content=\"#ff6ad5\" /> <title>Todos App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id=\"root\"></div> <script src=\"/static/bundle.js\"></script> </body> </html>",
"Part 9 practice\\src\\client\\styles\\app.scss",
"\\$body-bg: #0091ea; \\$primary: #ff6ad5; \\$secondary: #ffdb58; \\$success: #00f764; \\$info: #01cdfe; \\$warning: #ff61a6; \\$danger: #ff2965; \\$light: #9A83D4; \\$dark: #260e37; \\$link-color: #01cdfe; @import '~bootstrap/scss/bootstrap.scss';"
],
"description": "create-esbuild-config front-end 1 😍",
}
}
{
// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"create-esbuild-config-back-end-1": {
"prefix": "LionelReact back-end 1 db & router create-esbuild-config",
"body": [
"Part 1 package.json",
"{ \"name\": \"todo\", \"version\": \"1.0.0\", \"main\": \"dist/server.js\", \"scripts\": { \"watch:server\": \"node esbuild-config/server.dev.mjs\", \"watch:restart-server\": \"nodemon --config nodemon.json\", \"back\": \"npm-run-all --parallel watch:*\" }, \"keywords\": [], \"author\": \"\", \"license\": \"ISC\", \"description\": \"\", \"dependencies\": { \"bootstrap\": \"^5.3.3\", \"cors\": \"^2.8.5\", \"express\": \"^4.21.1\", \"mysql2\": \"^3.11.5\", \"react\": \"^18.3.1\", \"react-dom\": \"^18.3.1\", \"react-router-dom\": \"^7.0.2\" }, \"devDependencies\": { \"@types/cors\": \"^2.8.17\", \"@types/express\": \"^5.0.0\", \"@types/node\": \"^22.10.1\", \"@types/react\": \"^18.3.13\", \"@types/react-dom\": \"^18.3.1\", \"@types/typescript\": \"^2.0.0\", \"esbuild\": \"^0.24.0\", \"esbuild-sass-plugin\": \"^3.3.1\", \"nodemon\": \"^3.1.7\", \"npm-run-all\": \"^4.1.5\", \"sass\": \"^1.82.0\", \"typescript\": \"^5.7.2\" } }",
"Part 2 tsconfig.json",
"{ \"compilerOptions\": { \"sourceMap\": true, \"target\": \"es2022\", \"module\": \"commonjs\", \"strict\": true, \"esModuleInterop\": true, \"skipLibCheck\": true, \"forceConsistentCasingInFileNames\": true, \"rootDir\": \"./src\", \"moduleResolution\": \"node\", \"resolveJsonModule\": true }, \"exclude\": [\"node_modules\"] }",
"Part 3 nodemon.json",
"{ \"watch\": [\"src/server\", \".env\"], \"ignore\": [\"src/**/*.test.ts\", \"src/client/\", \"public/\"], \"ext\": \"ts,mjs,js,json\", \"exec\": \"node ./dist/server.js\", \"legacyWatch\": true }",
"Part 4 src\\server\\tsconfig.json",
"{ \"extends\": \"../../tsconfig.json\", \"compilerOptions\": { \"outDir\": \"../../dist\", \"rootDir\": \".\", \"types\": [\"node\"] }, \"include\": [\"./**/*\"] }",
"Part 5 src\\server\\server.ts",
"import express from 'express'; import cors from 'cors'; import apiRouter from './routes'; import db from './db'; const isProduction = process.env.NODE_ENV === 'production'; const isDevelopment = process.env.NODE_ENV === 'development'; const app = express(); if (isDevelopment) { app.use(cors()); } db.todos.getAll().then(todos => console.log(todos)); app.use(express.json()); app.use('/api', apiRouter); if (isProduction) { app.use(express.static('public')); } if (isProduction) { app.get('*', (req: any, res: any) => { res.sendFile('index.html', { root: 'public' }); }); } const port = process.env.PORT || 3000; var hostct = 'localhost'; app.listen(port, () => console.log(`Server running on port http://\\${hostct}:\\${port}`));",
"Part 6 src\\server\\routes\\index.ts",
"import { Router } from 'express'; import todosRouter from './todos'; const router = Router(); router.use('/todos', todosRouter); export default router;",
"Part 7 src\\server\\routes\\todos.ts",
"import { Router } from 'express'; import db from '../db'; const router = Router(); router.get('/', async (req, res) => { try { const todos = await db.todos.getAll(); res.json(todos); } catch (error) { console.log(error); res.status(500).json({ message: 'Internal Server Error', error }); } }); router.get('/:id', async (req, res) => { try { const id = parseInt(req.params.id, 10); const [todo] = await db.todos.getOne(id); res.json(todo); } catch (error) { console.log(error); res.status(500).json({ message: 'Internal Server Error', error }); } }); router.post('/', async (req, res) => { try { const newTodo = req.body; const result = await db.todos.insert(newTodo.description); res.json({ message: 'Todo created', id: result.insertId }) } catch (error) { console.log(error); res.status(500).json({ message: 'Internal Server Error', error }); } }); router.put('/', async (req, res) => { try { const newTodo = req.body; console.log(newTodo); const result = await db.todos.update(newTodo.id, newTodo.description, newTodo.isCompleted); res.json({ message: 'Update created', id: result }) } catch (error) { console.log(error); res.status(500).json({ message: 'Internal Server Error', error }); } }); export default router;",
"Part 8 src\\server\\db\\index.ts",
"import * as todos from './tables/todos'; export default { todos }",
"Part 9 src\\server\\db\\connection.ts",
"import mysql from 'mysql2/promise'; const pool = mysql.createPool({ host: 'localhost', user: 'root', password: '', database: 'todo_app' }); export default pool;",
"Part 10 src\\server\\db\\queryUtils.ts",
"import pool from './connection'; import type { ResultSetHeader } from 'mysql2'; export async function SelectQuery<T>(queryString: string, params?: any) { const [results] = await pool.execute(queryString, params); return results as T[]; } export async function ModifyQuery(queryString: string, params?: any) { const [results] = await pool.query(queryString, params); return results as ResultSetHeader; }",
"Part 11 src\\server\\db\\tables\\todos.ts",
"import { SelectQuery, ModifyQuery } from '../queryUtils'; export interface ITodosRow { id: number; description: string; isCompleted: 0 | 1; } export function getAll() { return SelectQuery<ITodosRow>('SELECT * FROM todos;'); } export function getOne(id: number) { return SelectQuery<ITodosRow>('SELECT * FROM todos WHERE id = ?;', [id]); } export function insert(todoItem: string) { return ModifyQuery('INSERT INTO todos (description) VALUE (?);', [todoItem]) } export function update(id:number,description: string, isCompleted:number) { return ModifyQuery('UPDATE todos SET description=?,isCompleted=? WHERE id=?;', [description,isCompleted,id]); }",
"Part 12 esbuild-config\\server.dev.mjs",
"import * as esbuild from 'esbuild'; let ctx; try { ctx = await esbuild.context({ entryPoints: ['src/server/server.ts'], bundle: true, sourcemap: true, minify: false, platform: 'node', target: ['node18.6'], packages: 'external', define: { 'process.env.NODE_ENV': \"'development'\" }, outfile: 'dist/server.js' }); await ctx.watch(); console.log('Watching server...'); } catch (error) { console.error('An error occurred:', error); process.exit(1); }",
"Part 13 todo_app.sql",
"CREATE TABLE `todos` ( `id` int (50) NOT NULL, `description` varchar(255) NOT NULL, `isCompleted` tinyint (4) NOT NULL ) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_general_ci; INSERT INTO `todos` (`id`, `description`, `isCompleted`) VALUES (1, 'Todo 1', 1), (2, 'Todo 2', 0), (3, 'Todo 3', 0), (4, 'Todo 4', 0); ALTER TABLE `todos` ADD PRIMARY KEY (`id`); ALTER TABLE `todos` MODIFY `id` int (50) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT = 5;"
],
"description": "LionelReact back-end 1 db & router create-esbuild-config 😍",
}
}
{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
"eslint-disable any": {
"prefix": "eslint-disable any",
"body": [
"/* eslint-disable @typescript-eslint/no-explicit-any */"
],
"description": "eslint-disable any"
}
}
