This extension pack will take time to be installed. Please be patient. You won't regret it!

Before Starting:

• First, I strongly recommend installing only this extension pack. If you have other extensions, they may interfere with the extensions of this pack.
• I also strongly recommend you to uninstall all extensions before updating this extension pack.
• In fact, sometimes, I delete some extensions of this extension pack but they are still there after updating because they're installed in your VSCode.
• Also, to make all things work, you have to open your project in Visual Studio Code by going to File at the top left of VS Code and Open Folder in Visual Studio Code and selecting your project.

Logins and Pre-requisites:

Codeium login:

• Typically, Codeium will ask you to sign in. Do it!

VSCode Default Format Application:

• Additionally, inside any file, you will see a message to allow the default format application at the bottom right of your screen.
• Please accept this request.

Downloads:

• Please download the latest version of Node.js for your operating system.
• Please download the latest version of .NET for your operating system (Windows, Mac or Linux).

Custom Themes:

• Go to the settings icon at the bottom left of your VSCode and go to Themes and Color Theme.
• You will be able to change the theme of your VSCode.
• I added a few themes to have a more customized experience.

Better VSCode Icons:

• Go to the settings icon at the bottom left of your VSCode and go to File Icon Theme.
• Select VSCode Icons as your file icon theme.
• This choice greatly enhances your VSCode icons and makes them 100 times better.

Elements of the Sidebar:

• Normally, you'll see in the sidebar of VS Code at the left of the screen new icons.
• However, some elements of the sidebar may not be visible.
• In this case, click on the three horizontal dots (...) at the top of the sidebar to access the remaining elements.

Word Wrap:

• To see all your code without an horizontal overflow, when inside a file, go to the top left of your code in View and enable Word Wrap.
• Alternatively, press Alt + Z (or Option + Z for Mac).

Visual Features:

Rainbow Indentation:

• Rainbow Indentation enhances readability by coloring each level of indentation.
• Instead of thinking about it, this extension explicitly shows the indenting levels.

Markdown Preview:

• This extension pack will automatically preview Markdown files in real time.

Excel / CSV Preview:

• This extension pack will automatically preview Excel / CSV files in real time.

Rainbow CSV:

• This extension pack will automatically colorize CSV files by each column, making it easier to read and understand the data.

See Errors / Warnings in real time

• This extension pack will display errors and warnings in real time, allowing you to see them without needing to hover over the code.

See Images in real time:

• While importing images in your code, this extension pack will display them in real time to the left of your code.
• Also, while hovering over the import, it will display the image itself.

See SVG in real time:

• Inside your SVG file, you'll see a loop icon at the top right of your code.
• Click on it and see your SVG in real time.

Database Schemas inside VSCODE (Draw.io):

• If you create a .drawio file inside your project, you will be able to modify it directly inside VSCode to create your own schemas of your database.

VSCode Transparency:

• Press Ctrl + Alt + Z (or Cmd + Option + Z for Mac) to increase the transparency of your VSCode!
• Press Ctrl + Alt + C (or Cmd + Option + C for Mac) to decrease the transparency of your VSCode!

Hightlight Matching Tags in HTML / PHP / XML and more:

• You can now see which tags are matching with your code.
• Even in PHP (e.g. inside echo), it's possible to see which tags are matching with your code.

CSS Peaks:

• Please notice that the CSS Peaks extension only works with HTML files. If you use PUG files or other languages to convert into HTML, it won't work.
• You'll need to use the CSS Peaks extension in the HTML files. While pressing Ctrl and hovering a class in CSS, if written inside different CSS or SCSS/SASS files, clicking on it will automatically point to the class inside your CSS file.
• If the class is in different CSS files (e.g., a CSS file after compiling SCSS/SASS), clicking on it will display different file choices. Choose the one you want by clicking on it in the dropdown list, and click on its content to select it, and click on its name at the top left of the CSS peek.
• Note that the name at the top left does sometimes not change even if you have clicked on the correct file (for example, it remains style.css even if you clicked on style.scss). This is not a problem, the redirection will still happen.
• For example, if you have a class like .button in style.scss and style.css, by clicking on it, it will display a dropdown list with the two files (style.scss and style.css). You just have to click on the one you want, then click on its content to select it, and click on its name at the top left of the CSS peaks window.
• You can also modify the content of the class in the CSS peaks window, directly inside the interface on the left, but it is recommended to modify the code in the file itself since some features are not available in the CSS peaks window.

Codeium AI:

• If you have Continue AI installed, uninstall it to enhance Codeium to not interfere with it.
• Additionally, with certain languages, when you're inside a file with this specific language, Codeium will be orange at the bottom right of your code.
• Click on it and it'll propose you to be used in this language at the bottom right of your code. Allow it to make it work for that one.

Auto-fill Code:

• After typing the beginning of your code, you'll see the next part of it automatically: that's the auto-fill!
• Don't worry, you must press Tab to validate it!
• By just hovering your mouse to it, you'll have other suggestions of code, and then you can choose the preferred one.

Prompt Bar:

• To use Codeium easily, you can go directly into your code and press Ctrl + I (or Cmd + I for Mac) to have a prompt bar at the top of your code.
• If it opens a new window, please uninstall and reinstall the extension pack.
• This is due to an extension that I deleted in a newer version of the extension pack.
• Type whatever you want, and it will do it for you.
• You can also do the same by selecting a part of your code and then pressing Ctrl + I (or Cmd + I for Mac).
• In this case, it will only modify the part of the code you selected.

Sidebar Chat:

• You can use Codeium directly with the sidebar icon (with braces and three small dots) called Codeium.
• Type whatever you want, and it will do it for you.

ChatGPT:

• To use ChatGPT, go to the sidebar ChatGPTicon called ChatGPT.
• Type whatever you want, and it will do it for you.

Visual Studio

• If you want to do things in your project inside VSCode but others aren't supported by VSCode inside it (like creating a launcher or compiling / running projects for sure), download Visual Studio (idk for Mac and Linux) and specify its path in the settings of VSCode.
• To do this, go to the Settings icon at the bottom left of VSCode and click on Settings, search for Path to VS, and paste under Path to VS the path to the executable of Visual Studio.
• The default path of Visual Studio is usually C:\Program Files (x86)\Microsoft Visual Studio\2022\Community\Common7\IDE\devenv.exe for Windows and /Applications/Visual Studio.app (I guess) for Mac and IDK for Linux. This path is for the Community Edition.
• Now, if you right click on a folder / file in VSCode, Open in Visual Studio will appear. If you click on it, it will open the folder / file inside Visual Studio.
• Also, in Visual Studio, click on Extensions at the top of Visual Studio.
• Then click on Manage Extensions.
• In the search bar at the top, type Codeium and click on the button to download the extension.
• After closing Visual Studio, the extension will appear.
• Click on Modify, wait for it to load, and then click on Close.
• Now, when you reopen Visual Studio and open a file, Codeium will suggest that you log in / sign in.
• Click on it to complete the login process.
• Codeium should now work!
• However, you'll only able to press Alt + C (or Option + C for Mac) to open Codeium chat inside Visual Studio.
• Finally, if the explorer display doesn't show inside Visual Studio, click on View and View the Explorer or something like that to show it.

Code Runner:

• You can directly execute your code without having to compile it.
• Click on the play icon in the top right corner of VSCode, and it will display the result of the code execution in the terminal.
• If the language is not compatible: it will display an error it's becaise you canot run it like this.
• Maybe you need to have an entire project to be able to run your code like C# or you need to install the language inside your machine.
• For more informations, go to the README.
• Some languages are not compatible with this feature. You'll need to use Visual Studio or find a way to execute them by yourself.

C / C++ Code Runner (Run, Debug, Compile, etc.):

• First of all, you need to install GCC/G++.
• For instructions on how to do this, you can refer to this video: https://www.youtube.com/watch?v=oC69vlWofJQ for Windows, https://www.youtube.com/watch?v=wY24ehH6mC0 for Mac and https://www.youtube.com/watch?v=4e7pa6Pf3VQ for Linux.
• Then, while clicking on the arrow to the right of the play icon, it will display more things. Choose whatever you want: running the code, compiling it, etc.
• If some open source projects make errors while compiling, it is recommended to folow the instructions at the bottom about Visual Studio and follow these steps:

1. Right click on the .sln file inside VSCode.
2. Choose Open in Visual Studio.
3. Click at the top left of Visual Studio Build -> Build Solution. This should resolve the issue.

C# Code Runner:

• To run a C# console app, follow these steps:

1. Open a terminal in VSCode.
2. Run the command dotnet new console. This will create a new C# console app with a basic Hello World program.
3. Run dotnet run. This will compile and execute your C# code. The output will be displayed in the terminal.

• You might have to install the .NET Core SDK if you haven't already.

Formatting for many languages (like HTML, XML, CSS, JS, TS, PHP, C, C++, C#, Java, etc.) (except Ruby and maybe others, sorry):

• To format properly, press Alt + Shift + F (or Option + Shift + F for Mac).
• If you want to have it while saving, click on the settings icon at the bottom right of your VS Code, then go to Settings, type format on save in the settings search bar, and enable Format on Save.
• Take notice that Python will format/indent correctly if you make a space before your line of code. If not, it will not work.
• If it's not formatting, press Alt + Shift + F (or Option + Shift + F for Mac) and normally, you'll see a popup about the format.

There will be two possibilities:

Configure format:

• If it's the Configure button, click on it and choose the one that appears on the list at the top of the screen. Congratulations, it will work for you.

Install format:

• If it's Install format instead, it could be because I haven't implemented it for your specific language, and I'm sorry.
• Uninstall the extension and install it again (which can be a glitch) or click on Install format and try to have the format yourself.

Columns while saving in Javascript and TypeScript:

• To add semicolons while saving, go to the settings icon at the bottom right of your VS Code, then go to Settings. Type format semicolons in the settings search bar, and click on ignore below JavaScript > Format: Semicolons, then change it to insert.
• Do the same for TypeScript > Format: Semicolons.

Live Previews for Webpages:

When you're on your HTML page, you'll have two options:

Go Live:

• Click on Go Live at the bottom right of your page, and it will open your HTML on a webpage.
• After saving your code, it will automatically reload your page with the modifications!

Go Live Loop:

• You'll see a new icon at the top right of the page (the window with a loop).
• Just click on it, and you'll have a new page opened.
• This is the preview of the page.
• It will automatically reload the page after any modifications, even if you didn't save (SAVE ANYWAY!).
• You can also access to the console at the top right of the preview and Open DevTools Pane.

When you're on your PHP page:

• First of all, for it to work, you must not open your website in any pages of your browser.
• With your server, you must set the same default web browser as VSCode's.
• Then, install the Web Live Server extension to your browser.
• Click on it, and type http://localhost/ if you're using a local server (or the IP or the path of your local server) or the address of your server where your website or folders and files are (e.g., http(s)://(ServerIP)/) in Actual Server Address and http://127.0.0.1:5500/ in Live Server Address.http://127.0.0.1:5500/ is the default IP address of Live Server.
• If you modified it in the parameters of Live Server, use the new one that you implemented. Don't mess it up!
• Turn on Live Reload. After that, to have a PHP Live Server, click on Go Live at the bottom right of your page.
• A page will appear.
• Then, open the PHP file to your web browser using your local server (e.g., WAMP, XAMPP or MAMP for Mac) or using your server or by copying and pasting the path to go to your page (ex: localhost).
• Finally, you will see your page!
• If you edit your PHP file and save in VSCode, it will auto reload in your web browser. GGS!
• If at any time the auto reload doesn't work, refresh the page manually in your browser once, and normally, it will auto-reload again.

SASS and SCSS:

SASS and SCSS Usage:

• If you want to create a CSS file, you can use SASS or SCSS.
• To use it, create a file with the extension .scss or .sass.
• In your code, you must call the .css format because it won't understand other formats other than CSS (e.g., create a style.scss or style.sass and call it in your code/HTML style.css).
• After this, when you're on your .scss or .sass file and click on Watch SASS at the bottom right of your code, it will automatically compile it into CSS (a .css and .css.map file with the exact name of your original CSS file will be created).
• Then, just write your SCSS or SASS, and it will appear as CSS in your .css file.
• But then, if you decide to click on Watching..., it won't update your CSS file automatically again.
• You'll have to click on Watch SASS again.

SCSS/SASS Prefixes:

• Also, if you want to have CSS Prefixes for your SCSS or SASS, go to the Settings icon at the bottom left of your VSCode and go to Settings. Type in the search bar autoprefix and click on Edit in settings.json.
• Then, inside the [] of liveSassCompile.settings.autoprefix, paste "> 0%","last 1000000000000000000000000000000000000000 versions","Firefox ESR" (do not worry about the values LMAO) and save.
• After this, while compiling your SCSS or SASS, it will automatically add the prefixes to your CSS to make compatible with older browsers.

Multi SCSS/SASS Files:

• If you name every .scss or .sass files with a _ at the beginning, and import them in the main style.scss or style.sass file, it will automatically compile them into a single .css file.

PUG:

• You can now use PUG instead of HTML or PHP.
• In fact, you can now use it without typing any code to compile it !
• Once you're in a folder containing .pug files or directly in a .pug file, you'll have two buttons at the bottom right of your code: Start Pug HTML Compiler and Start Pug PHP Compiler.

PUG to HTML:

• If you want to code with PUG instead of HTML, you can click on Start Pug HTML Compiler at the bottom right of your vscode.
• It will compile your .pug file to a .html one. While saving your .pug file, the .html one will also save with the PUG code that you just written.
• But then, if you decide to click on Stop Pug HTML Compiler it won't update your HTML file again.
• You'll have to click on Start Pug HTML Compiler again.

PUG to PHP:

• If you want to code with PUG instead of PHP, you can click on Start Pug PHP Compiler at the bottom right of your vscode.
• It will compile your .pug file to a .php one. While saving your .pug file, the .php one will also save with the PUG code that you just written.
• But then, if you decide to click on Stop Pug PHP Compiler it won't update your PHP file again.
• You'll have to click on Start Pug PHP Compiler again.

PUG to HTML or PHP Live Previews:

• When you use the HTML or PHP Compiler, the .pug file will be understood as .html or .php in your web browser (in function of which format compiler you choose).
• So, if you click on Go Live at the bottom right of your code with the .pug file, it will open the .html or .php one in your web browser.
• Follow the instructions of the HTML or PHP Live Previews.
• But, if you want to use the windows with a loop for HTML, you must first go to the .html file, click on the loop at the top left of the screen and then go back to your .pug file.
• It'll update the preview while saving.
• To have more details about it, please refer to te HTML / PHP Live Previews section.

W3C Validator for Webpages:

• At the bottom right of your VSCode, you'll find a button labeled W3C Validator. Select all your web code and click on it.
• A new panel will appear, and it will validate your code according to the W3C rules.
• It will explain you if you did mistakes about the W3C rules.
• It can only validate HTML files !

Database connections inside VSCODE:

• You can now use VSCode to view and interact with your databases!
• In fact, you won't need to use any other software (almost) to view or interact with your SQL or NoSQL databases anymore.
• If you're using a local server like WAMP, XAMPP, or MAMP (for Mac), you'll need to start the local server in order to access your databases.

Databases Settings:

• Normally, you'll see in the sidebar of VSCode at the left of the screen an icon labeled Database (for SQL databases) or NoSQL (for NoSQL databases).
• Clicking on one of them will open a new panel where you can add, modify, or delete database connections.
• To modify the extension settings, you'll need to click on the gear icon (⚙️) at the top right of the database or NoSQL panel and then click on Settings.
• Now, you can modify the extension settings to have a lot of additional options, such as displaying users for example.

Add a new Database connection:

SQL Databases:

• Normally, you'll see in the sidebar of vscode at the left of the screen a cylindrical icon labeled Database.
• Click on it and a new panel will appear.
• Click on the + to add a connection.
• Then, you have many types of databases.
• Put your connection information and click on the Save button.
• It will create a new connection with your identity.
• With the free version, you can have three different connections (SQL and NoSQL connections combined) at the same time.
• Simply delete a connection if you want to have another one.
• Once you click on your connection, all of your databases with the type you entered will appear.
• You can do the same things as before in vscode: checking databases, tables, columns, entering commands, etc.
• If you want more details about its usage, check some tutorials about it.

NoSQL Databases:

• Normally, you'll see in the sidebar of vscode at the left of the screen a stack of squares icon labeled NoSQL.
• Click on it and a new panel will appear.
• Click on the + to add a connection.
• Then, you have many types of NoSQL databases.
• Put your connection information and click on the Save button.
• It will create a new connection with your identity.
• With the free version, you can have three different connections (SQL and NoSQL connections combined) at the same time.
• Simply delete a NoSQL connection if you want to have another one.
• Once you click on your NoSQL connection, all of your databases with the type of NoSQL you entered will appear.
• You can do the same things as before in vscode: checking databases, tables, columns, entering commands, etc.
• If you want more details about its usage, check some tutorials about it.

SQL Databases Content:

SQL Create a new table:

• After you added your connection, you can go to any database by clicking on it, and you'll be able to click on the Tables section.
• Click on it and you'll see a plus icon at the left of the Tables section.
• Normally, you'll have a new window open.
• This windows will show you a table template to create your table.

SQL See all tables:

• After you added your connection, you can go to any database by clicking on it, and you'll be able to click on the Tables section.
• Click on it and you'll see all the tables in your database.
• You can click on them and you'll see your tables like normal.
• Inside your tables, you can do multiple actions, like insert a new row, select a row, delete a row, etc.

SQL Database Query:

• After you added your connection, you can go to any database by clicking on it, and you'll be able to click on the Query section.
• Click on it and you'll see a plus icon at the left of the Query section.
• Click on it then press Enter.
• You'll see a new window open.
• It allows you to do any queries you want.
• For example, inside, you can create a new database, a table, insert data, etc.
• You can also use the AI inside the query file to help you with your queries.

Live Share:

• You can now share your code with others and join their code.
• In fact, you won't need to use any other software to share your code with others in real time.

Host:

Host Share:

• To start sharing, go to the sidebar and click on the arrow icon called Live Share.
• Choose your option between read-only or read-write access.
• Also, click on the Settings button at the top right of your VSCode and go to Settings.
• Type Allow Guest in the search bar to find the related settings.
• Here you'll be able to allow specific permissions to joiners, such as Allow Guest Debug Control, Allow Guest Task Control, Allow Guest Command Control, and Allow Guest Execute Cells for example.
• The first time, you'll see a sign-in prompt at the top center of your screen. Choose an option to sign in.
• You'll maybe have to host again after signing in.
• After a moment, you'll see a message at the bottom right of your screen with the invitation link.
• Copy the link and share it with others.
• Once they join, you will see a message at the bottom right of your screen to confirm the connection. You can allow them to read only or read-write access.

Share Server:

If you use only HTML files:

• First, you need to setup Live Server for your HTML and click on Go Live at the bottom right of your VSCode, then do the rest of the setup to make your live server works with Live Server with HTML (look at the HTML part of Live Previews for Webpages).
• You'll have to share all the HTML URLs to everyone for them to preview them.
• Once you shared, go to the sidebar and click on the arrow icon called Live Share.
• Then, click on the Share server... button at the top right of your Live Share window.
• Finally, at the top center of your VSCode, type your server port (Windows / Linux: port 80, Mac: port 8888 or 8889).

If you use a server:

• First, you need to setup Live Server for your server / PHP and click on Go Live at the bottom right of your VSCode, then do the rest of the setup to make your live server works with Live Server with PHP / a server (look at the PHP part of Live Previews for Webpages).
• Once you shared, go to the sidebar and click on the arrow icon called Live Share.
• Then, click on the Share server... button at the top right of your Live Share window.
• Finally, at the top center of your VSCode, type your server port (WAMP / XAMPP: port 80, MAMP: port 8888 or 8889).

Stop Share:

• To stop sharing, go to the sidebar and click on the share icon again.
• Then click on the stop collaboration session icon at the top right of your Live Share window.

Join:

Join Share:

• <!>WARNING: If the hoster is hosting a local server, do not have any other local server opened in your device running on the same ports as WAMP, XAMPP, and MAMP (ports 80 for WAMP/XAMPP, 8888, and 8889 for MAMP) or else all things using these ports will stop working.
• If you have other local servers with different ports, do not run them.
• If you have already opened a local server using the same ports and joined the hoster's server (read the 'Join Server' part), it is important to close that local server first.
• Then, close the local server in the background and in the panel controller, and close VSCode.
• Only then can you try to start VSCode and join the shaer and the hoster's server again.
• The person who has to join needs to install the Live Share by Microsoftextension in VSCode.
• If you have this extension pack, you already have it installed.
• Then, paste the invitation link that the hoster sent you.
• The link will be oppened inside online VSCode.
• A pop-up will appear to propose you to open it inside your VSCode.
• Accept it and wait for the connection to establish.
• Click on the allow Live Share to open the URL on your screen.
• The first time, you'll see a sign-in prompt at the top center of your screen. Choose an option to sign in.
• Finally, Restricted Mode will be on by default.
• To turn it off, click on Manage in the Restricted Mode pop-up at the top of your VSCode.
• Then, click on Trust at the center of the page and it will be turned off.
• You can leave the Restricted Mode page and start coding with the others.

Join Server:

If you use / the hoster is using only HTML files:

• Go to the sidebar and click on the arrow icon called Live Share.
• Then, if the hoster shared a server, click on the Shared Servers at the top right of your Live Share window and select the server.
• It'll redirect you to the server.
• After that, the hoster must give you all the urls of the HTML files to have them to preview.
• Notice that you won't have the automatic reload of the page. You'll have to do it manually.

If you use / the hoster is using a server:

• Go to the sidebar and click on the arrow icon called Live Share.
• Then, if the hoster shared a server, click on the Shared Servers at the top right of your Live Share window and select the server.
• It'll redirect you to the server.
• Then, do the rest of the setup like if it was your server (read the PHP part of Live Previews for Webpages except you don't need to Go Live).
• Notice that you won't have the automatic reload of the page. You'll have to do it manually.

Database Sharing:

• If the server/database that is shared by the hoster is on a local server, you just need to be connected with 'localhost' and with the port of your format (SQL = 3306, etc.) to acces to the database.
• The joiner will not be able to use the Database Client in VSCode. It will make an error. The joiner will need to use the old method.
• This is why it is recommended to work with a remote server. If you do so, the hoster will not need to share the server due to the remote address and the port (assumed), and both will be able to use the Database Client in VSCode.

Pictures Sharing:

• Sometimes, joiners can send images but they'll not be deletable.
• In that case, send them to the hoster.
• Then, it'll have to place them into the project.

Leave:

• To leave the shared session, go to the sidebar and click on the share icon again.
• Then click on the stop collaboration session icon at the top right of your Live Share window.

For advanced web developers: Frameworks

• Frameworks are structured tools or libraries that provide reusable code, templates, and components to simplify and standardize the development of software applications.
• They offer pre-built modules, guidelines, and architecture for building and managing functionality, reducing repetitive tasks and allowing developers to focus on application-specific logic and design.

Frontend Frameworks:

React.js:

Installation (Vite + React):

• To install React with Vite, go to the top left of your VSCode, then click on Terminal and New Terminal and type: npm create vite@latest ./.
• Choose React and then your technical options to create a new project.
• Once your project is created, go to the terminal and type: npm i.
• To view your project, go to the terminal and type: npm run dev.
• Inside the terminal, you'll see a link to open your project in your browser. Click on it by pressing Ctrl + click (Cmd + click for Mac).

Server Side Rendrering:

• During the npm create vite@latest ./ step installation, if you choose Others, then create-vite-extra, select your packetname, and then ssr-react, you'll be able to create a Server Side Rendrering project.
• Then, do the rest of the installation. You'll directly get a Server Side Rendrering project.

SASS:

• To install SASS inside your project, go to the top left of your VSCode, then click on Terminal and New Terminal and type: npm i sass.
• Go to App.jsx and replace import './App.css'; by import './App.scss'; / import './App.sass';.
• If use the Dafault React, go to main.jsx and replace import './index.css'; by import './index.scss'; / import './index.sass';.
• If you use SSR, go to entry-client.jsx and replace import './index.css'; by import './index.scss'; / import './index.sass';.
• Finally, rename index.css to index.scss / index.sass in your project.
• Now, you can create SASS files inside your project and import them with import 'location/XXX.scss'; / import 'location/XXX.sass';.

React Error Boundary:

• To install React Error Boundary, go to the top left of your VSCode, then click on Terminal and New Terminal and type: npm i react-error-boundary.
• To use it, add it in your file by importing it: import { ErrorBoundary } from "react-error-boundary";.

React Testing Library:

• To install React Testing Library, go to the top left of your VSCode, then click on Terminal and New Terminal and type: npm i -D vitest jsdom @testing-library/react and then npm i -D @testing-library/user-event.
• Then, modify package.json to add a test (under "dev": "vite",): "test": "vitest",
• Modify vite.config.js and add under plugins[],: test: { environment: 'jsdom', setupFiles: ['./test/setup.js'] },
• To test your hooks, create a folder named test in the root of your project.
• Then, create a file setup.js inside the test folder and add: import { cleanup } from '@testing-library/react'; import { afterEach } from 'vitest'; afterEach(() => cleanup());
• Then, create a test file for your hook (e.g., yourhookname.test.js) inside the test folder, and perform your test.
• Once your test is created, go to the terminal and type: npm run test.

React Router:

• To install React Router, go to the top left of your VSCode, then click on Terminal and New Terminal and type: npm install react-router-dom.
• Inside your App.jsx, import it with: import { createBrowserRouter, createMemoryRouter, RouterProvider } from 'react-router-dom';, and place after the imports:

  const routes = [
    // Your routes here
    ];
  
  const router = typeof window !== 'undefined'
    ? createBrowserRouter(routes)
    : createMemoryRouter(routes);
  

• Inside routes = [];, add your routes.
• Then, replace the App function by:

  function App() {
    return (
      <RouterProvider router={router} />
    );
  }
  

• Now, you can create your routes with React Router.

Upload your app as a website:

• To upload your app as a website, go to the top left of your VSCode, then click on Terminal and New Terminal and type: npm run build.
• Then, the dist file will be created, it is your website.

React.js Snippets:

• rafce: React arrow function component
• rafce: React arrow function export
• rafcp: React arrow function component with prop types
• rfc: React function component
• rfce: React function component export
• rfcp: React function component with prop types

React.js Attribute Splitter:

• To split attributes, select from < to > and press Ctrl + Alt + Shift + A (for Mac: Cmd + Shift + A) to toggle the attribute split.

Vue.js:

Installation (Vite + Vue):

• To install Vue with Vite, go to the top left of your VSCode, then click on Terminal and New Terminal and type: npm create vite@latest ./.
• Choose Vue and then your technical options to create a new project.
• Once your project is created, go to the terminal and type: npm i.
• To view your project, go to the terminal and type: npm run dev.
• Inside the terminal, you'll see a link to open your project in your browser. Click on it by pressing Ctrl + click (Cmd + click for Mac).

Server Side Rendrering:

• During the npm create vite@latest ./ step installation, if you choose Others, then create-vite-extra, select your packetname, and then ssr-vue, you'll be able to create a Server Side Rendrering project.
• Then, do the rest of the installation. You'll directly get a Server Side Rendrering project.

Formatter:

• Inside your vue file, press Alt + Shift + F (for Mac: Cmd + Shift + F) and you'll see a formatter window.
• Click on Configure and choose Vue Official at the top center of your window. You'll be able to format your vue file properly.

SASS:

• To install SASS inside your project, go to the top left of your VSCode, then click on Terminal and New Terminal and type: npm i sass.
• If you use the Dafault Vue, go to main.js and replace import './style.css'; by import './style.scss'; / import './style.sass';.
• If you use SSR, go to entry-client.js and replace import './style.css'; by import './style.scss'; / import './style.sass';.
• Finally, rename style.css to style.scss / style.sass in your project.
• Now, you can create SASS files inside your project and import them with <style lang="sass" src="location/XXX.scss"></style> / <style lang="sass" src="location/XXX.sass"></style>.

Vue Testing Library:

• To install Vue Testing Library, go to the top left of your VSCode, then click on Terminal and New Terminal and type: npm i -D vitest jsdom @vue/test-utils and then ``.
• Modify vite.config.js, at the top of the file, import { defineConfig } from "vitest/config"; and add under plugins[],: test: { environment: 'jsdom', setupFiles: ['./test/setup.js'] },
• To test your composants, create a folder named test in the root of your project.
• Then, create a test file for your compopsant (e.g., yourcomposant.test.js) inside the test folder, and perform your test.
• Once your test is created, go to the terminal and type: npm run test.

Vue Router:

• To install Vue Router, open your VSCode, navigate to Terminal > New Terminal, and type: npm install vue-router.
• In src/main.js, import import { createMemoryHistory, createRouter, createWebHistory } from 'vue-router'; and place after the imports:

  const isServer = typeof window === 'undefined';
  const router = createRouter({
      history: isServer ? createMemoryHistory() : createWebHistory(),
      routes: [
          // Your routes here
      ],
  });
  

• If you use default Vue (not SSR), replace createApp(App).mount('#app'); by:

  const app = createApp(App);
  app.use(router);
  app.mount('#app');
  

• If you use SSR, type app.use(router); before the import of app like:

  app.use(router);
  return { app };
  

• Inside routes[], add your routes.
• Finally, inside App.vue, add <router-view /> inside the <template>.
• Now, you can create your routes with Vue Router.

Upload your app as a website:

• To upload your app as a website, go to the top left of your VSCode, then click on Terminal and New Terminal and type: npm run build.
• Then, the dist file will be created, it is your website.

Vue.js Attribute Splitter:

• To split attributes, select from < to > and press Ctrl + Alt + Shift + A (for Mac: Cmd + Shift + A) to toggle the attribute split.

Angular:

Installation (Vite + Angular):

• To install React with Vite, go to the top left of your VSCode, then click on Terminal and New Terminal and type: npm install -g @angular/cli, then npm create vite@latest.
• It will propose you to create a new folder for your project. Accept it (./ is not recognized as an option).
• Choose Angular and then your technical options to create a new project.
• You can directly choose if you want to use SASS and Server Side Rendrering.
• Once your project is created, go to the top left of your VSCode, then click on File, then Open Folder and open the folder for your project.
• To view your project, go to the terminal and type: npm start.
• Inside the terminal, you'll see a link to open your project in your browser. Click on it by pressing Ctrl + click (Cmd + click for Mac).

Create Angular Component:

• To create a component, go to the top left of your VSCode, then click on Terminal and New Terminal and type: ng g c components/yourcomponentname.
• You'll have a new folder called components with your component file.
• Inside this folder, you'll have the HTML, CSS / SASS / SCSS, TypeScript and Test files.

Create Angular Service:

• To create a service, go to the top left of your VSCode, then click on Terminal and New Terminal and type: ng g s services/yourservicename.
• You'll have a new folder called services with your service file.
• Inside this folder, you'll have the TypeScript and Test files.

Angular Router:

• First, inside src/app/app.component.ts, import it with import { RouterOutlet } from '@angular/router'; at the top .
• place RouterOutlet inside the imports like this:

imports: [RouterOutlet],

• In src/app/app.routes.ts, inside Routes = [];, add your routes.
• Then, inside src/app/app.component.html, add the <router-outlet/>.
• Now, you can create your routes with Angular Router.

Upload your app as a website:

• To upload your app as a website, go to the top left of your VSCode, then click on Terminal and New Terminal and type: npm run build.
• Then, the dist file will be created, it is your website.

Git:

• If you want to share professionally or share complex projects/frameworks, install Git and learn how to use it (because it requires time).

Ask me for help:

• If you have any problem, contact me on Discord at SramX_#2350 or sramx_ or check some tutorials!

Have a good code ;)