From cc6792e7c6a562a7d28483bd011d4ee0e0809033 Mon Sep 17 00:00:00 2001
From: Thibaut de Saivre <thibaut.de-saivre@polytechnique.edu>
Date: Tue, 17 Oct 2023 13:43:18 +0200
Subject: [PATCH] everything until vscode settings

---
 typescript/.vscode/extensions.json | 11 +++++++
 typescript/.vscode/settings.json   | 25 ++++++++++++++
 typescript/README.md               | 52 +++++++++++++++++++++++++++---
 3 files changed, 83 insertions(+), 5 deletions(-)
 create mode 100644 typescript/.vscode/extensions.json
 create mode 100644 typescript/.vscode/settings.json

diff --git a/typescript/.vscode/extensions.json b/typescript/.vscode/extensions.json
new file mode 100644
index 0000000..51e6d11
--- /dev/null
+++ b/typescript/.vscode/extensions.json
@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint", // LINTER : ESLint
+    "esbenp.prettier-vscode", // FORMATTER : prettier
+
+    "ecmel.vscode-html-css", // HTML / CSS language support
+    "sidthesloth.html5-boilerplate", // Boilerplate HTML5 template
+
+    "ritwickdey.LiveServer" // View HTML files directly in your browser with hot reload
+  ]
+}
diff --git a/typescript/.vscode/settings.json b/typescript/.vscode/settings.json
new file mode 100644
index 0000000..b482fe6
--- /dev/null
+++ b/typescript/.vscode/settings.json
@@ -0,0 +1,25 @@
+{
+  // Generic settings :
+  "editor.formatOnSave": true, // Format files on save
+  "formatFiles.runOrganizeImports": true, // Sort imports when formatting
+  "editor.codeActionsOnSave": {
+    // Organize imports on save
+    "source.organizeImports": true
+  },
+
+  // Web dev
+  "javascript.updateImportsOnFileMove.enabled": "always", // Automatically update imports when moving a file
+
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}
diff --git a/typescript/README.md b/typescript/README.md
index 7fd1ac2..4b9c423 100644
--- a/typescript/README.md
+++ b/typescript/README.md
@@ -1,15 +1,57 @@
 # Template Typescript Project
 
-TODO : package manager, comment initialiser des projets (et ensuite juste copier la config eslint ou prettier, etc...)
+[![Node.js Version](https://img.shields.io/badge/Node.js-20-brightgreen.svg)](https://nodejs.org/)
+[![ESLint](https://img.shields.io/badge/Linter-ESLint-blue.svg)](https://eslint.org/)
+[![Formatter-Prettier](https://img.shields.io/badge/Formatter-Prettier-yellow.svg)](https://prettier.io/)
 
-npm, node, les autres commandes... Rmq : les deps eslint ?
+## Node environment
 
-[![Python Version](https://img.shields.io/badge/python-3.11-blue.svg)](https://www.python.org/downloads/release/python-311/)
-[![Black](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/psf/black)
-[![Ruff](https://img.shields.io/badge/linter-ruff-1a53f0.svg)](https://beta.ruff.rs/docs/)
+Javascript code can run in 2 environments :
+
+- Inside a web browser
+- Using Node js
+
+When developping websites or backend applications, we use Node js. You can download Node js on their [official website](https://nodejs.org/en).
+
+### Package Manager
+
+Node js dependencies are managed using a package manager (npm, yarn, pnpm...). The default package manager is `npm`.
+It comes bundled with Node js.
+
+### Why use (or not) typescript ?
+
+TypeScript is a strongly typed superset of JavaScript. It is recommended to ALWAYS use TypeScript for medium to large projects, especially if multiple developers will be working on it.
+
+However, for small html-css websites, using small JavaScript files may be the better option.
+
+### How to initialize projects
+
+This repo contains an example setup for a node js application. However, if you want to create a website or a node js application using specific frameworks, you may instead initialize your project using one of the following commands :
+
+#### Websites
+
+```bash
+npm create vite@latest my-react-website -- --template react-ts # Create a vanilla React app using Typescript
+npx create-next-app@latest # Create a Next js website. Be sure to use Typescript and ESLint in the given options !
+npm create svelte@latest my-app # Create a Svelte app. Be sure to use Typescript, ESLint and Prettier in the given options !
+```
+
+#### Node js applications
+
+```bash
+npm i -g @nestjs/cli && nest new my-backend-app # Create a Nest js backend application
+npm init adonis-ts-app@latest my-backend-app # Create an Adonis js backend application
+```
+
+#### Final recommendations
+
+- Be sure to set `"strict": true` in your `tsconfig.json` file, else using TypeScript will not be as useful.
+- The frameworks presented in the last 2 sections are recommended (and popular enough).
 
 ## VSCode Project Settings
 
+TODO
+
 In order to ensure that everyone uses the same linting and formatting settings,
 we duplicate the relevant settings in [`.vscode/settings.json`](.vscode/settings.json).
 
-- 
GitLab