#vscode#extension
* Hãy chắc chắn là bạn đã tải Visual Studio Code nhé (link tải).
- Bước 1: Các bạn mở Visual Studio Code lên. Sau đó ở thanh Sidebar bên trái chọn cho mình Extensions (hoặc nhấn tổ hợp phím Ctrl+Shift+X).
- Bước 2: Tiếp theo ở thanh Search Extensions các bạn tìm kiếm từ này cho mình 'Custom Css and JS Loader' , sau đó tải nó về nhé.
- Bước 3: Sau khi tải xong, các bạn hãy copy đoạn mã này:
"vscode_custom_css.imports": ["file:///"]
- Bước 4: Tiếp theo để nhanh các bạn nhấn tổ hợp phím 'Ctrl+Shift+P' cho mình. Sau đó nhập, tìm và mở file 'settings.json' (User) lên nhé.
- Bước 5: Sau khi mở file lên dán đoạn mã ở 'Bước 3' mà bạn copy vào nhé.
{
/* Các setting khác của bạn */
"vscode_custom_css.imports": ["file:///"]
/* Các setting khác của bạn */
}
* Wait... chờ chút, đừng vội tắt nó nhé. Vì còn phải cập nhật thêm mã đấy!
- Bước 6: Các bạn tìm đến Folder này cho mình nhé 'C:\Users\<username của bạn>\.vscode\extensions'. Sau đó, các bạn tạo thêm 1 Folder mới với tên là 'custom' (tùy các bạn đặt nhé).
- Bước 7: Sau đó đứng ở Folder bạn vừa tạo, mở VSCode lên nhé (phải đúng theo đường dẫn mà bạn đã setup 'C:\Users\<username của bạn>\.vscode\extensions\custom').
- Bước 8: Tiếp theo các bạn tạo cho mình 1 File với tên là 'color.css' và copy đoạn mã bên dưới nhé:
/* HelperDev */
.tab-border-top-container {
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: xor;
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 1px;
width: 100% !important;
height: calc(100% - 3px) !important;
background-color: transparent !important;
}
.tab-border-top-container:before {
content: "";
width: 500px;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: spinner 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
background: conic-gradient(
from 0deg at 50% 51.35%,
rgba(185, 215, 243, 0) 0deg,
rgba(185, 215, 243, 0) 289.4deg,
#00ff80 318.05deg, /* Bạn có thể thay đổi màu ở đây tùy thích */
#00ff00 1turn /* Bạn có thể thay đổi màu ở đây tùy thích */
),
conic-gradient(
from 180deg at 50% 51.35%,
rgba(185, 215, 243, 0) 0deg,
rgba(185, 215, 243, 0) 287.46deg,
#20e3b2 325.02deg, /* Bạn có thể thay đổi màu ở đây tùy thích */
#00aefd 1turn /* Bạn có thể thay đổi màu ở đây tùy thích */
);
}
@keyframes spinner {
100% {
transform: translate(-50%, -50%) rotate(1turn);
}
}
* Note: Lưu file lại nhé!
- Bước 9: Bây giờ Folder chính xác của bạn sẽ trông như thế này. Hãy copy nó:
C:\Users\<username của bạn>\.vscode\extensions\custom\color.css /* copy đoạn mã này */
* Note: Folder '..\custom\...' có thể thay đổi do bạn đặt ở Bước 6 (còn các bạn nào đã đặt theo mình thì không cần quan tâm nhé).
- Bước 10: Rồi, bây giờ quay lại Bước 5 nhé, mở lại File 'settings.json' nếu bạn đã tắt nó. Sau đó, dán đoạn mã bạn vừa copy ở trên vào. Nó sẽ trông như thế này:
{
/* Các setting khác của bạn */
"vscode_custom_css.imports": ["file:///C:\Users\<username của bạn>\.vscode\extensions\custom\color.css"]
/* Các setting khác của bạn */
}
+ Sau đó các bạn thay toàn bộ dấu này " \ " thành dấu này cho mình nhé " / ". Và kết quả là:
{
/* Các setting khác của bạn */
"vscode_custom_css.imports": ["file:///C:/Users/<username của bạn>/.vscode/extensions/custom/color.css"]
/* Các setting khác của bạn */
}
- Bước 11: Quay lại File 'color.css' của bạn nhé. Như mình đã hướng dẫn, các bạn có thể tự tùy chỉnh theo màu sắc yêu thích của các bạn. Sau đó, các bạn nhấn tổ hợp phím 'Ctrl+Shift+P' và tìm kiếm với từ khóa 'Enable Custom Css and JS' và nhấn 'Enter', sau đó Restart lại VSCode là đã hoàn thành rồi đó. Chúc các bạn thành công!!
👋 Nếu có bất kỳ thắc mắc hay lỗi gì các bạn có thể comment dưới bài viết này nhé!
