---
url: /awesome-notes/pages/extensions.md
---
# โ Extensions
[VS Code](https://code.visualstudio.com/) [extensions](https://marketplace.visualstudio.com/vscode) are that help you manage your project's and your [development experience](https://github.blog/enterprise-software/collaboration/developer-experience-what-is-it-and-why-should-you-care/). This page will guide you through the process of installing and using them.
> Also, you can suggest your own extensions in [extensions.json](/pages/vs-code#๐-vscodeextensionsjson).
## ๐ Linters
* **[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)** is a linter that helps you find and fix problems in your JavaScript code.
* **[LintLens](https://marketplace.visualstudio.com/items?itemName=ghmcadams.lintlens)** is a Visual Studio Code extension that allows you to see and fix your project's linting errors.
* **[markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)** is a linter that helps you find and fix problems in your Markdown files.
* **[SonarLint](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode)** is a linter that helps you find and fix problems in your code.
## โ Formatters
* **[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)** is a code formatter that helps you format your code automatically.
## โก Misc
* **[Terminals Manager](https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-terminals)** is a terminal manager. It allows you to create, manage, and run terminals in the editor with `.vscode/terminals.json` config. When you open containing folder, it will automatically start the terminals.
## ๐ Styling
* **[Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)** is a Visual Studio Code extension that subtly changes the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which. Run `Peacock: random color or enter color` command with `F1` (*`Cmd+Shift+P` on macOS*) to change the color of the workspace.
---
---
url: /awesome-notes/pages/vs-code.md
---
# ๐ป VS Code
[VS Code](https://code.visualstudio.com/) is a free code editor developed by Microsoft. It is available for Windows, macOS, and Linux. It includes support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.
## ๐ .vscode/extensions.json
This file is used to define the recommended extensions for a project. It is a JSON file that contains an array of extension identifiers. When a user opens the project in VS Code, they will be prompted to install the recommended extensions if they are not already installed.
First create `.vscode/extensions.json` file in the root of your project. Then add the following content to it:
```json
{
"recommendations": [
"yzhang.markdown-all-in-one",
"davidanson.vscode-markdownlint",
"fabiospampinato.vscode-terminals"
]
}
```
---
---
url: /awesome-notes/pages/folder-structure.md
---
# ๐ Folder Structure
---
---
url: /awesome-notes/documentation/vitepress.md
---
# ๐ Vitepress
## Installation
```bash
pnpm install vitepress
```
## Usage
```bash
pnpm dlx vitepress dev
```
## Plugins
* [vitepress-mermaid-renderer](https://github.com/sametcn99/vitepress-mermaid-renderer): A VitePress plugin for rendering Mermaid diagrams.
* [vitepress-plugin-llms](https://github.com/okineadev/vitepress-plugin-llms): A VitePress plugin for generating LLM-friendly documentation
---
---
url: /awesome-notes/pages/update.md
---
# ๐ Update Dependencies
All templates are designed to be updated easily. This page will guide you through the process of updating your project.
## ๐๏ธ Bulk Update
**[npm-check-updates](https://github.com/raineorshine/npm-check-updates)** is a tool that allows you to automatically update your project's dependencies. To use it, run the following command in your project's root directory:
```bash
npx --yes npm-check-updates --packageManager npm --target minor -u
```
## ๐ Manual
**[Version Lens](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens)** is a Visual Studio Code extension that allows you to see and update your project's dependencies. It's very useful for refactoring and updating your project.
## ๐ References
* [How to Update NPM Dependencies](https://www.freecodecamp.org/news/how-to-update-npm-dependencies/)
---
---
url: /awesome-notes/pages/ports.md
---
# ๐ข Ports
Suggestions for the ports to use for the different apps.
| App | Port |
| --- | --- |
| Angular | 4200 |
| React | 3000 |
| Vue | 3100 |
| Svelte | 3200 |
| Docs | 5173 |
---
---
url: /awesome-notes/pages/serve.md
---
# ๐น๏ธ Serve
Test your application locally before deploying it to the server/cloud.
## ๐ Serving Static Files
### ๐ Serve
**[serve](https://github.com/vercel/serve)** is a static file server for single-page applications, designed to be used with the [Vercel](https://vercel.com) platform but can be used anywhere. It is a simple and lightweight solution to serve static files from a directory.
Install `serve` globally:
```bash
pnpm i --global serve
```
Then serve target directory as a static file server:
```bash
serve dist
```
### ๐ PM2
**[PM2](https://pm2.keymetrics.io/)** is a daemon process manager that will help you manage and keep your application online 24/7. It is particularly useful for Node.js applications, allowing you to run your app in the background and manage it easily.
Install `pm2` globally:
```bash
pnpm install pm2 -g
```
Then start your application with `pm2`:
```bash
pm2 start dist
```
---
---
url: /awesome-notes/pages/act.md
---
# ๐ค Act
[Act](https://github.com/nektos/act) is a tool that allows you to run your GitHub Actions locally. It simulates the GitHub Actions environment on your local machine, enabling you to test and debug your workflows before pushing them to GitHub.
---
---
url: /awesome-notes/pages/libraries.md
---
# ๐งฌ Libraries
## ๐ฆ Package Manager
### ๐ PNPM
**[PNPM](https://pnpm.io/)** is a fast, disk space efficient package manager. It's a great alternative to NPM and Yarn. PNPM uses a **[content-addressable](https://pnpm.io/motivation)** store to keep dependencies. It's a great choice for monorepo projects.
## ๐ฅ Bundler/Compiler
### ๐ Vite
**[Vite](https://vite.dev/)** is a build tool that aims to provide a **faster** and leaner development experience for **modern** web projects. If there is no any bottleneck in your project, Vite is the best choice for starter templates.
### ๐ SWC
[SWC](https://swc.rs/) is a super-fast **JavaScript/TypeScript** compiler written in **Rust**. It's a faster alternative to Babel and TypeScript compiler. Also, we can use SWC with Vite to speed up the development process.
Supported tools:
* [WASM](https://swc.rs/docs/usage/wasm)
* [React](https://github.com/vitejs/vite-plugin-react-swc)
> Currently, SWC is not supported by Vue. See issue [#12356](https://github.com/vitejs/vite/issues/12356).
## ๐งช Testing
### ๐ Vitest
**[Vitest](https://vitest.dev/)** is a Vite powered **fast**, **lightweight**, and **minimal** testing framework. It's a great alternative to *Jest* and Mocha.
## โ Linter/Fomatter
### ๐ ESLint
**[ESLint](https://eslint.org/)** is a static code analysis tool for identifying problematic patterns found in JavaScript code. It's a great choice for modern web projects.
---
---
url: /awesome-notes/pages/tools.md
---
# ๐งฐ Tools
## ๐ fav.farm
[fav.farm](https://fav.farm/) is a emoji based favicon generator. We can use in starter templates as favicon etc.
```html
```
## ๐ Devicon
[Devicon](https://devicon.dev/) is popular icon set provider. We can use in starter templates as tech stack icons etc.
```html
```
```