Full VSCode Clone With Electron JS, React JS, Monaco Editor Library & CSS Grid – Part 1
In this tutorial we are going to be cloning VSCode using Electron JS, React JS, React hooks, TypeScript and Monaco editor library
The tutorial is divided into 2 parts: this video is the part 1, the link to the second part is https://www.youtube.com/watch?v=mIaB8PdkOjo
Please don’t forget to subscribe, it motivates me to do more tutorials like this
What you’ll gain from this tutorial
– Using React JS in Electron JS
– CSS Grid
– Interprocess communication with IPC
– Creating context menu and top menu
– Creating files in electron js
– Editing files in electron js
– Loading and displaying the content of a directory in electron js
– Integrating monaco text-editor library
00:00:00 – 00:14:20 – introduction and demo
00:14:20 – 00:39:21 – Project setup and configuration
00:39:21 – 00:53:19 – Initialisation, brief introduction and routing setup
00:53:19 – 01:07:32 – UI Layout setup with CSS grid
01:07:32 – 01:56:43 – UI development
01:56:43 – 04:27:16 – Interprocess connection using IPC, preload file setup, selecting and loading directory content into the project, and additional UI development
04:27:16 – 05:54:00 – Setting up Monaco editor library, displaying file contents in Monaco editor and editing files
05:54:00 – 06:33:38 – Footer content UI development and implementing line and column number with Monaco editor event
06:33:38 – 07:39:01 – Designing the file tab
07:39:01 – 08:01:56 – Saving Files
08:01:56 – 09:01:52 – App Menu and context menu for folder and files implementation
09:01:52 – 09:31:33 – header design
09:31:33 – End – Creating files, Selecting New Folder and other things
Links
Link to the lesson files on my github repository – Please star and fork the repository
https://github.com/paulosabayomi/vscode-clone-with-electron-js-react-js-and-monaco-library
OR clone it on the CLI with
git clone https://github.com/paulosabayomi/vscode-clone-with-electron-js-react-js-and-monaco-library.git
Electron JS documentation
https://www.electronjs.org/docs/latest/
Electron Menu
https://www.electronjs.org/docs/latest/api/menu#render-process
Electron Forge
https://www.electronforge.io/guides/framework-integration/react-with-typescript
Electron Forge React
https://www.electronforge.io/guides/framework-integration/react-with-typescript
Monaco Editor GitHub repo
https://github.com/microsoft/monaco-editor?tab=readme-ov-file
Short Doc
https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md
Monaco editor webpack plugin
https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin
Electron Store
https://www.npmjs.com/package/electron-store
SVGR
https://www.npmjs.com/package/@svgr/webpack
React Perfect Scrollbar
https://www.npmjs.com/package/react-perfect-scrollbar
Redux toolkit
https://redux-toolkit.js.org/tutorials/typescript
React Navigation
https://reactrouter.com/en/main/start/tutorial
React router Hash router
https://reactrouter.com/en/main/routers/create-hash-router
URL loader
https://github.com/webpack-contrib/url-loader
VSCode Figma
https://www.figma.com/design/k8Z1DvF03b44yC29dpk2As/Visual-Studio-Code-Toolkit-(Community)?node-id=1-2&t=K63zAqd5UYfuvkyg-0
Seti UI icon
https://github.com/jesseweed/seti-ui
Codicon repo
https://microsoft.github.io/vscode-codicons/dist/codicon.html
Codicon on iconify
https://icon-sets.iconify.design/codicon/
VSCode Icon themes
https://code.visualstudio.com/blogs/2016/09/08/icon-themes
#vscode #monaco #texteditor #electronjs
