Các mẹo hay và tool tiện lời dành cho Visual Studio Code
Theme Vì tôi dạy mọi người cách viết mã chuyên nghiệp nên việc có một theme dễ nhìn dễ đọc là rất quan trọng . Ngoài ra tôi cũng thích những theme có màu sắc nhẹ nhàng. Với những tiêu chí trên, hai theme yêu thích nhất của tôi là Fairy Floss và Dracula. Fairy Floss ...
Theme
Vì tôi dạy mọi người cách viết mã chuyên nghiệp nên việc có một theme dễ nhìn dễ đọc là rất quan trọng. Ngoài ra tôi cũng thích những theme có màu sắc nhẹ nhàng.
Với những tiêu chí trên, hai theme yêu thích nhất của tôi là Fairy Floss và Dracula.
Fairy Floss
Dracula
Font
Bản thân là một fan trung thành với FiraCode (ngay cả trước khi học về VS Code!); tôi thích các chữ ghép làm cho mã của mình dễ đọc hơn trong nháy mắt. Nó cũng khá dễ dàng để cái đặt quá, đó là điều thực sự tốt!
Save Configuration
Một phần quan trọng khác trong setup này là save configuration. Điều đầu tiên là tính năng autosave, bạn có thể sử dụng nó thông qua file. Ngoài ra tôi còn tinh chỉnh thêm để mỗi khi ngừng viết code thì nó sẽ tự động save lại. Đây là một điều cực kì hữu ích và tiện lợi cho live coding cũng như là người mới bắt đầu học về coding.
|
1 2 3 4 5 6 |
<span class="c1">// in settings.json</span> <span class="s2">"files.autoSave"</span><span class="p">:</span> <span class="s2">"afterDelay"</span><span class="p">,</span> <span class="s2">"files.autoSaveDelay"</span><span class="p">:</span> <span class="mi">100</span><span class="p">,</span> |
Tương tự, tôi cũng có cách set up riêng cho format của code mình trên cmd + s.
|
1 2 3 4 5 |
<span class="c1">// in settings.json</span> <span class="s2">"editor.formatOnSave"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> |
Ngoài ra, tôi dùng 2 lần space để phân biệt các ngôn ngữ, ngoài trừ Python, vốn sẽ dùng tới 4 space.
|
1 2 3 4 5 6 7 8 |
<span class="c1">// in settings.json</span> <span class="s2">"[python]"</span><span class="p">:</span> <span class="p">{</span> <span class="s2">"editor.insertSpaces"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="s2">"editor.tabSize"</span><span class="p">:</span> <span class="mi">4</span> <span class="p">},</span> |
Emmet
Tôi thật sự rất phụ thuộc vào Emmet, vì thế mà việc nó được tích hợp vào VS Code là một điều tuyệt vời. Ngoài ra, tôi còn set up nó không chỉ để làm với html files thôi:
|
1 2 3 4 5 6 7 8 9 10 11 |
<span class="c1">// in settings.json</span> <span class="s2">"emmet.includeLanguages"</span><span class="p">:</span> <span class="p">{</span> <span class="s2">"html"</span><span class="p">:</span> <span class="s2">"html"</span><span class="p">,</span> <span class="s2">"erb"</span><span class="p">:</span> <span class="s2">"erb"</span><span class="p">,</span> <span class="s2">"javascript"</span><span class="p">:</span> <span class="s2">"javascriptreact"</span><span class="p">,</span> <span class="s2">"vue"</span><span class="p">:</span> <span class="s2">"html"</span><span class="p">,</span> <span class="s2">"ejs"</span><span class="p">:</span> <span class="s2">"html"</span> <span class="p">},</span> |
Integrated Terminal
Tôi dùng iTerm với Zsh trên Mac, vì vậy mà tôi cũng dùng VS Code’s integrated terminal set up
|
1 2 3 4 5 6 |
<span class="c1">// in settings.json</span> <span class="s2">"terminal.external.osxExec"</span><span class="p">:</span> <span class="s2">"iTerm.app"</span><span class="p">,</span> <span class="s2">"terminal.integrated.shell.osx"</span><span class="p">:</span> <span class="s2">"zsh"</span><span class="p">,</span> |
Extension
Tôi có rất nhiều tiện ích mở rộng ngôn ngữ và framework, vì vậy tôi sẽ chỉ tập trung nêu ra một số tiện ích mở rộng đa năng yêu thích của mình.
- VS Live Share – tiện ích mở rộng này có thể gọi là “phép màu”, và tôi tin rằng nó sẽ thay đổi cả hệ thống giáo dục và học lập trình trong tương lai gần. Nó cho phép các developer hợp tác theo phong cách Google Doc trên cùng một file giữa nhiều máy tính khác nhau. Thậm chí, bạn còn có thể cho phép truy cập cho localhost port giữa các máy và chia sẻ terminal session.
- Code Spell Checker – Tôi viết rất nhiều Markdown và nội dung khác ngay lên text editor, nên tất nhiên sẽ xuất hiện rất nhiều lỗi chính tả. Tôi yêu tiện ích mở rộng này để phát hiện các lỗi sai và đưa ra cách giải quyết, ngay cả khi đang offline.
- Import Cost – tiện ích này dù không bắt buộc nhưng nó vẫn rất là tiện khi cho xem kích cỡ của npm package mà bạn đưa vào trong project.
- HTMLHint – Tôi dùng nó cho live HTML validation trên editor. Và bạn sẽ không cần phải lo về W3C validator với mỗi lần thay đổi!
- GitLens – GitLens hiển thị chú thích Git và highlight các phần quan trọng trong tài liệu. Nó thực sự hữu ích để làm việc trên các dự án nhóm nhiều người!
- CodeRunner – phần mở rộng này cho phép bạn nhấn nút phát để chạy code của mình trực tiếp trong VSCode mà không cần tương tác terminal! Đây là điều đặc biệt hữu ích cho các lập trình viên mới.
- EmojiSense – Tôi luôn yêu tính năng emoji-autofill post : của Slack, và tiện ích mở rộng này sẽ cho phép bạn làm điều tương tự trong VSCode!
Techtalk via Dev.to
