Hướng dẫn chèn icon trong visual studio năm 2024
|
Trong bài viết này mình sẽ chia sẻ cách setup VS Code của mình. Nó sẽ bao gồm theme, icon, font chữ cũng như là các extension mà mình dùng Show
🥇ThemeMình sử dụng Dracula Official làm theme chính cho VS Code Thi thoảng đổi sang Palenight Theme cho đỡ căng mắt, vì Dracula Official có độ tương phản khá cao 🥇IconVới icon, mình dùng Material Icon Theme 🥇Font lập trìnhMình dùng font Cascadia Code, đây là font free của Microsoft, hỗ trợ tiếng Việt, coding ligature, stylistic. Nói chung là quá ngon cho con hàng Free này. Mọi người cứ lên Github chính của Cascadia Code rồi tải bản release mới nhất về là được. Cách cài đặt cũng đơn giản thôi, mọi người giải nén ra. Vào folder 🥇ExtensionNgoài cái extension Dracular Official cho theme và Material Icon Theme cho icon thì mình còn dùng các extension dưới đây 🥈Auto Rename TagMột thẻ HTML hay trong jsx thì thường có thẻ mở và thẻ đóng, khi chúng ta sửa tên thẻ mở thẻ thì đóng nó cũng sửa tên theo 🥈Editorconfig for VS CodeMục đích của cái này là giúp cho VS Code đọc và kích hoạt được các setting trong file 🥈ES7+ React/Redux/React-Native snippetsBộ snippet cho anh em code React, code Vue hay Angular thì cài mấy cái khác nhé 🥈ESLintExtension này giúp VS Code hiểu và kích hoạt được tính năng check lỗi trên editor khi source code của bạn có file config eslint 🥈Excel ViewerĐọc file 🥈file-tree-generatorGenerate cấu trúc thư mục trong một dự án, ví dụ như thế này txt 📦rss ┣ 📜atom.xml ┣ 📜feed.json ┗ 📜feed.xml 🥈filesizeChỉ đơn giản là xem kích thước 1 file thôi, nó khá hữu dụng khi mình xem nhanh kích thước file bundle khi build ra chẳng hạn 🥈GitLens — Git superchargedGiúp hiển thị lịch sử file trong quá khứ, thông tin người commit, rebase bằng UI trực quan,... Nói chung là nhiều lắm, nên cài khi làm việc với Git nhé mọi người. 🥈Git GraphHiển thị sơ đồ các nhánh khi làm việc với Git, cái tính năng Git Graph này nó có ở GitLens — Git supercharged phiên bản trả phí. Việc gì chúng ta phải trả phí khi mà có một extension Git Graph free mà ngon không kém, đúng không! "Đúng nhận, sai cãi 🤣" 🥈html to JSXĐúng như cái tên của nó, giúp convert nhanh code html sang jsx, rất hữu ích khi làm việc với ReactJs 🥈Live ServerCái này là huyền thoại rồi, giúp chúng ta thay đổi code html, css, js thì trình duyệt sẽ tự động refresh lại, đỡ tốn thời gian rất nhiều. 🥈Markdown Preview EnhancedMình thường xuyên làm việc với file markdown, extension này giúp mình xem file markdown một cách trực quan như xem pdf vậy. Nó còn hỗ trợ xuất file markdown sang pdf nữa. Mình viết CV bằng file markdown và xuất pdf bằng extension này đây 💓 🥈markdownlintGiúp chúng ta kiểm tra các lỗi khi viết markdown 🥈MDXHỗ trợ VS Code đọc được file 🥈open in browserChỉ đơn giản là click chuột phải vào file html và mở bằng trình duyệt. Nhưng nó rất hữu ích trong VS Code, mình cũng không hiểu sao VS không implement luôn cái này vào luôn cho khỏe, đỡ phải cài extension 🥈Prettier - Code formatterFormat code cho VS Code. Hỗ trợ đọc, hiểu và áp dụng file config prettier cho editor. 🥈Tailwind CSS IntelliSenseGợi ý class cho những ai dùng Tailwindcss 🥈vscode-pdfXem file pdf trên VS Code 🥈vscode-styled-componentsHighlight thuộc tính khi viết styled components 🥈YAMLGiúp VS Code đọc các file yaml 🥇Setting cho VS CodeCác bạn có thể chèn đoạn json này vào file "workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Palenight Operator", "editor.fontFamily": "Cascadia Code, monospace", "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'", "editor.fontSize": 18, "editor.fontWeight": "370", "editor.lineHeight": 1.75, "editor.linkedEditing": true, "terminal.integrated.fontWeight": "370", "terminal.integrated.lineHeight": 1.1, "terminal.integrated.letterSpacing": 1, "terminal.integrated.fontWeightBold": "600" 1 của VS Code để tiết kiệm thời gian json "workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Palenight Operator", "editor.fontFamily": "Cascadia Code, monospace", "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'", "editor.fontSize": 18, "editor.fontWeight": "370", "editor.lineHeight": 1.75, "editor.linkedEditing": true, "terminal.integrated.fontWeight": "370", "terminal.integrated.lineHeight": 1.1, "terminal.integrated.letterSpacing": 1, "terminal.integrated.fontWeightBold": "600" Hoặc làm từng bước như dưới đây 🥈Chọn file icon theme mặc địnhCác bạn làm theo như hình là được nhé 🥈Chọn color theme mặc địnhChọn color theme cũng tương tự với file icon theme 🥈Cài đặt font chữMở "workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Palenight Operator", "editor.fontFamily": "Cascadia Code, monospace", "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'", "editor.fontSize": 18, "editor.fontWeight": "370", "editor.lineHeight": 1.75, "editor.linkedEditing": true, "terminal.integrated.fontWeight": "370", "terminal.integrated.lineHeight": 1.1, "terminal.integrated.letterSpacing": 1, "terminal.integrated.fontWeightBold": "600" 1 trong VS Code lên và thêm những đoạn cấu hình dưới vào cho nhanh nha, đỡ phải mò mò trong setting UI làm gì cho lâu. Cái "workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Palenight Operator", "editor.fontFamily": "Cascadia Code, monospace", "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'", "editor.fontSize": 18, "editor.fontWeight": "370", "editor.lineHeight": 1.75, "editor.linkedEditing": true, "terminal.integrated.fontWeight": "370", "terminal.integrated.lineHeight": 1.1, "terminal.integrated.letterSpacing": 1, "terminal.integrated.fontWeightBold": "600" 3 nó sẽ giúp kích hoạt bộ stylistic của font CascadiaCode json "editor.fontFamily": "Cascadia Code, monospace", "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'", "editor.fontSize": 18, "editor.fontWeight": "370", "editor.lineHeight": 1.75, "editor.linkedEditing": true, "terminal.integrated.fontWeight": "370", "terminal.integrated.lineHeight": 1.1, "terminal.integrated.letterSpacing": 1, "terminal.integrated.fontWeightBold": "600" "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "tailwindCSS.experimental.classRegex": ["[a-zA-Z]class[a-zA-Z]='([^']+)'"] 🥈Chọn Prettier làm formatter mặc địnhMở setting lên và chọn như hình dưới là được 🥈Bật format on saveKhi lưu file thì tự động format lại, rất nhanh và tiện lợi 🥈Bonus một số setting🥉Giúp tailwindcss gợi ý class ở những prop không có tên là"workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Palenight Operator", "editor.fontFamily": "Cascadia Code, monospace", "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'", "editor.fontSize": 18, "editor.fontWeight": "370", "editor.lineHeight": 1.75, "editor.linkedEditing": true, "terminal.integrated.fontWeight": "370", "terminal.integrated.lineHeight": 1.1, "terminal.integrated.letterSpacing": 1, "terminal.integrated.fontWeightBold": "600" 4 Thêm đoạn này vào "workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Palenight Operator", "editor.fontFamily": "Cascadia Code, monospace", "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'", "editor.fontSize": 18, "editor.fontWeight": "370", "editor.lineHeight": 1.75, "editor.linkedEditing": true, "terminal.integrated.fontWeight": "370", "terminal.integrated.lineHeight": 1.1, "terminal.integrated.letterSpacing": 1, "terminal.integrated.fontWeightBold": "600" 1 là được: "workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Palenight Operator", "editor.fontFamily": "Cascadia Code, monospace", "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'", "editor.fontSize": 18, "editor.fontWeight": "370", "editor.lineHeight": 1.75, "editor.linkedEditing": true, "terminal.integrated.fontWeight": "370", "terminal.integrated.lineHeight": 1.1, "terminal.integrated.letterSpacing": 1, "terminal.integrated.fontWeightBold": "600" 6. Từ giờ, những thuộc tính (prop) có tên bắt đầu bằng class thì tailwindcss sẽ tự động gợi ý class Nào có gì hay thì mình sẽ update thêm tại bài viết này nhé 😉, còn bây giờ thì hết rồi... Phew! Cuối cùng bạn cũng đã đọc xong. Bài viết này có hơi dài một tí vì mình muốn nó đầy đủ nhất có thể 😅 Chúng ta đều hiểu rằng Javascript và React không hề dễ, chúng có quá nhiều concept cần phải học. Mình cũng cảm thấy nó khó! Nay lại có thể Typescript nữa 🥲, thật sự khó nuốt. Nhưng đừng lo: Bạn có thể nắm vững các kiến thức trên chỉ trong một khóa học Mình đã bắt đầu code React vào năm 2019, và nó đã trở thành thư viện ưa thích của mình để xây dựng UI và web app. Mình cũng đã làm việc với nhiều framework khác như Angular, Vue nhưng thực sự chỉ có React là đem lại cho mình cảm xúc và sự hiệu quả. 💓 Nếu bạn đang gặp khó khăn với React, mình ở đây để giúp bạn! Mình đã dành hơn 6 tháng để phát triển khóa học . Trong khóa này bạn sẽ được học mọi thứ về thư viện ReactJs, các kiến thức từ cơ bản cho đến nâng cao nhất, mục đích của mình là giúp bạn chinh phục Nếu bạn cảm thấy bài viết này của mình hữu ích, mình nghĩ bạn sẽ thích hợp với phong cách dạy của mình. Không như bài viết này, khóa học là sự kết hợp giữa các bài viết, video, quizz, bài tập nhỏ và dự án lớn có thể xin việc được ngay. Học xong mình đảm bảo bạn sẽ lên tay ngay. 💪🏻 |
