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. 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 go to https://dotnet.microsoft.com/en-us/download/dotnet and download the latest version of .NET for your operating system (Windows, Mac or Linux). Please go to https://nodejs.org/en-us/download/ and download the latest version of Node.js for your operating system. 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. 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 timeThis 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. 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: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. 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 StudioIf 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 (https://visualstudio.microsoft.com/ for Windows, https://visualstudio.microsoft.com/fr/vs/mac/ for Mac and IDK for 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 of https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner. 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:
C# Code Runner:To run a C# console app, follow these steps:
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. 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. 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 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. 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. 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 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. 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: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 / WAMP: port 80, MAMP: port 8888). 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, XAMP, and MAMP (ports 80 for WAMP/XAMP, 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: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. 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. 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. 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 ;) |