# Extension should use in Vscode

Hi, mình là Gia Huy do tên hay trùng, nên mình có biệt danh là ==Gafe== 🥲

Tổng hợp các extenstion nên có khi code.

## I. Extension

### 1. [Auto close tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag )

### 2. [Auto rename tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

### 3. [Auto Complete Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag)

### 4. [Code spell checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

### 5. [Beautify css/sass/scss/less](https://marketplace.visualstudio.com/items?itemName=michelemelluso.code-beautifier)

### 6. [SCSS Formatter](https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter)

### 7. [SCSS intellisense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss)

### 8. [SCSS Everywhere](https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion)

### 9. [Bracket Pair Colorization Toggler](https://marketplace.visualstudio.com/items?itemName=dzhavat.bracket-pair-toggler)

### 10 [Console Ninja](https://marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja)

### 11. [**ES7+ React/Redux/React-Native snippets**](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
> Dùng thằng này có cái gõ `clg` --> `console.log()` khá nhanh 😤
Ngoài ra có `rfc` `rafce` để tạo component nhanh

### 11. [**ReactSnippet**](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets)

### 12. [Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

### 10 [Fira Code and Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=aleleba.fira-code-material-icon-theme)

>Fact: `Fira code` sẽ gây xung đột với `Material icon theme`.
Nên ta sẽ cài `Fira Code and Material Icon Theme` này để khắc phục, 1 mũi tên trúng 2 con chim 🤌.

>`Mac : command + shift + P` or `Window : ctrl + shift + P`
--> Open User Setting (JSON)
rồi paste đống settings bên dưới này vào là OK 🥸

    "workbench.iconTheme": "fira-code-material-icon-theme",
    "editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",
    "editor.fontLigatures": true,

### 11 [Disable ligatures](https://marketplace.visualstudio.com/items?itemName=CoenraadS.disableligatures)
>Đi chung bộ với extenstion phía trên, khi có 3 dấu === ligatures ( chữ ghép ),ta trỏ dấu nháy vào nó sẽ tự tách ra làm 3 dấu === lại

### 12 [Color highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

### 13 [Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets](https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode)

### 14 Theme cho vscode
> Lên google gõ `vscode theme` bấm vào trang đầu tiên

[--> Theme vscode](https://vscodethemes.com/)
> Chọn theme bạn thích rồi click tải về Vscode thôi 😎
> Phổ biến : Monokai pro / one dark pro / Dracula Official / 2077 theme..

### 15 [Tailwind shade](https://marketplace.visualstudio.com/items?itemName=bourhaouta.tailwindshades)

### 16 [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
Suggest class của tailwind

### 17 SVG preview, pdf preview, Markdown Preview Enhanced
Gõ tên là ra nhé

### 18 [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)
> Thằng này nó console.log kết quả ngay bên trong vscode mình luôn khỏi ra browser check

### 19 [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
> Format code -> Mac: `Cmd + Shift + F` || Win:`Control + Shift + F`
Mình thì setting `Cmd + S` là format cả code.

### 20 [File size](https://marketplace.visualstudio.com/items?itemName=zh9528.file-size)
> Biết được kích cỡ file mình import vào

### 21 [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
> Open source control - git, branch

### 22 Auto import*

### 23 Tabnine
Khá nặng, xài máy cùi thì đừng cài :)))
AI nhắc code

### 24 [CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)
Dùng để chụp code đẹp

>Sau khi install xong, bôi đen 1 đoạn code.
Gõ `cmd + shift + P` -> Gõ `CodeSnap` -> `Enter` là xong

## 25 [Colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize)

$bg-primary: #eaff00

----> ==#eaff00== || ==$bg-primary==

Nó sẽ bôi sáng text, ko chỉ mã `HEX`, `biến` mà còn `rgba`, `hsl`, `hwb`,... cũng tương tự

## 26 [Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)
Dùng để parse `json` sang `type` khi code `Typescript`

>Sau khi install xong. Đi đến file json cần convert.
Gõ `cmd + shift + P` -> Gõ `Open quick type for JSON` -> `Enter` là xong

Hoặc [JSON to Typescript](https://transform.tools/json-to-typescript)

## 27 [Turbo Console log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)
Console log rất chi tiết, từng dòng, hàng, biến

> Bôi đen `variable` cần console data
> **win:** `ctrl + alt + L` hoặc **mac:** `ctrl + option + L`

## 28 [Project manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)
Dùng để switch sang các project khác 1 cách nhanh chóng

## 29 [WakaTime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)
Thống kê xem thời gian qua bạn dành bao nhiêu thời gian code.
Dùngg ngôn ngữ gì.

Truy cập link dưới để cài, login github --> free
https://wakatime.com/vs-code

## 30 Github copilot
20$/month
Xịn hơn con chatGPT v4 :))

### 1.? Docker

### 1.? Prisma

## 2. Git

### 1 Download các folder từ github
>Tải các repo trên github, chỉ cần paste link và enter

[Download directory github](https://download-directory.github.io/)