Top 10 Extensions Vscode Tốt Nhất 2020

Vscode được biết đến là một công cụ editor vô cùng đa dụng, với một kho extensions khổng lồ hộ trợ tận răng. Hôm nay mình sẽ giới thiệu cho mọi người một vài extensions có thể nói là tốt nhất hiện nay của thằng Vscode này.



REST Client

Có thể những ai đã từng code Resful API thì hẳn không còn lạ lẫm với Postman, một công cụ giả lập request hữu dụng. Bây giờ bạn có thể biến Vscode của mình thằng Postman bằng cách cài đặt thêm extensions REST Client


Công việc đơn giản chỉ cần tạo một file .http hoặc .rest. Tiếp đến nhập kiểu method và url cần request sau đó send request là ta sẽ nhận được response ở màn hình bên phải.

// request.http
    GET https://example.com/comments/1 HTTP/1.1
    GET https://example.com/comments/1
    https://example.com/comments/1

Query Strings

    GET https://example.com/comments?page=2&pageSize=10

Request Headers

   User-Agent: rest-client
    Accept-Language: en-GB,en-US;q=0.8,en;q=0.6,zh-CN;q=0.4
    Content-Type: application/json

Request Body

POST https://example.com/comments HTTP/1.1
    Content-Type: application/xml
    Authorization: token xxx

    <request>
        <name>sample</name>
        <time>Wed, 21 Oct 2015 18:27:50 GMT</time>
    </request>

 Có thể chỉ định file path để sử dụng như một body, bằng cách sử dụng dấu <

 POST https://example.com/comments HTTP/1.1
    Content-Type: application/xml
    Authorization: token xxx
    < C:\Users\Default\Desktop\demo.xml
    POST https://example.com/comments HTTP/1.1
    Content-Type: application/xml
    Authorization: token xxx
    < ./demo.xml

 Một tính năng vô cùng hay ho Generate Code từ request

và có rất nhiều những tính năng tuyệt vời khác anh em có thể đọc docs: https://marketplace.visualstudio.com/items?itemName=humao.rest-client 
Hoặc xem docs trên vscode ở phần details extensions

Live Sass Compiler

Sẽ không còn phải lo lắng về việc mất công sửa code sass và chạy lại phần mềm biên dịch sang css nữa. Giờ chúng ta đã có Live Sass Compiler, chỉ cần save là có file css mới ngay

 Trước hết ta cần config compiler: Ctrl + , nhập Live Sass chọn Live Sass Compiler tiếp đến Edit in settings.json


 "liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/dist/css/"
        }
    ],
   "liveSassCompile.settings.generateMap": false
Config chi tiết hơn tại : https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md 

- Bấm F1 or ctrl+shift+P và nhập Live Sass: Watch Sass để bắt đầu compilation hoặc Live Sass: Stop Watching Sass để dừng compilation
- Bấm F1 or ctrl+shift+P và nhập Live Sass: Compile Sass - Without Watch Mode để biên dịch Sass hoặc Scss một lần.

AutoRename

Tự động sửa cả thẻ đóng và thẻ mở mà không cần phải mất công đì mò thẻ đóng.


 Configuration


Nếu bạn chỉ muốn nó tư động rename ở một vài ngôn ngữ thì hãy thêm vào mục auto-rename-tag.activationOnLanguage để set ngôn ngữ. Còn mặc định nó đang là ["*"] và sẽ hoạt động với tất cả các ngôn ngữ.
{
        "auto-rename-tag.activationOnLanguage": [
            "html",
            "xml",
            "php",
            "javascript"
        ]
    }

Bracket Pair Coloruzer 2

Ngoặc đóng ngoặc mở và indent giờ sẽ dễ dàng kiểm tra khi đã có Bracket Pair Coloruzer



Định nghĩa các màu được sử dụng, cho phép sử dụng tên màu, mã hex và rgba()
"bracket-pair-colorizer-2.colors": [
        "Gold",
        "Orchid",
        "LightSkyBlue"
    ]
"bracket-pair-colorizer-2.forceUniqueOpeningColor"

 "bracket-pair-colorizer-2.forceIterationColorCycle"

Quick-start:

{
        "key": "shift+alt+right",
        "command": "bracket-pair-colorizer-2.expandBracketSelection",
        "when": "editorTextFocus"
    },
    {
        "key": "shift+alt+left",
        "command": "bracket-pair-colorizer-2.undoBracketSelection",
        "when": "editorTextFocus"
    }
 Để xem chi tiết hơn về thiết lập mọi người có thể xem tại detail extensions

CSS Peek

Giúp bạn tìm đến file nguồn định nghĩa css của class hoặc id một cách nhanh chóng. Không cần phải ctrl + shift + f tìm toàn bộ project để xem phần định nghĩa của css nữa.


- Peek: load phần định nghĩa và sửa ngay tại chỗ không cần chuyển đến file định nghĩa(Ctrl+Shift+F12)
- Go To: Nhảy đến phần định nghĩa css và tùy chỉnh (F12)
- Hover: Hiển thị nội dung định nghĩa (Ctrl+hover)

HTML CSS Support


Tính Năng


Hỗ trợ Zen Coding với class và id một cách nhanh chóng
Hỗ trợ kết nối file css remote
Có sử dụng vscode-css-languageservice
Ngôn ngữ hỗ trợ

html
laravel-blade
razor
vue
pug
jade
handlebars
php
twig
md
nunjucks
javascript
javascriptreact
typescript
typescriptreact

Remote Style Sheet


Không cần thiết phải có file ở local mà có thể kết nối với file remote
"css.remoteStyleSheets": [
      "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
    ]
Sử Dụng

ctrl + space để xem danh sách các attributes

Prettier

Một extension format code tuyệt vời không thể thiếu

Sử Dụng

(CMD/CTRL + Shift + P)
// format tất cả file
   1. CMD + Shift + P -> Format Document
   OR
   // format phần được chọn
   2. CMD + Shift + P -> Format Selection

 Thiết lập Format On Save

 "editor.formatOnSave": true,
    // Enable per-language
    "[javascript]": {
        "editor.formatOnSave": true
    }

Live Server

Thường thì đối với những file satics như .html khi chạy sau đó sửa đổi code nếu muốn xem sự thay đổi thì ta cần reload lại browser. Live Server sẽ hỗ trợ điều đó.

Shortcuts để bật/tắt Server

Bật/Tắt Go Live

Chuôt phải vào một file html và chọn Open with live server.
Hoặc khi đang ở một file html thì chuột phải và chọn `Open with Live Server


Indent Rainbow

Đây là một extension hỗ trợ cho việc format indent

Configuration

   // Có thể chỉ định những ngôn nhữ nào được áp dụng với extension (Nếu để trống là áp dụng cho tất cả các ngôn ngữ).
      "indentRainbow.includedLanguages": [] // for example ["nim", "nims", "python"]

      // Hoặc vô hiệu hóa với những ngôn ngữ nào (để trống là không có ngôn ngữ nào).
      "indentRainbow.excludedLanguages": ["plaintext"]

      // Delay đến khi trình soạn thảo update (ms).
      "indentRainbow.updateDelay": 100
   
      // Định nghĩa màu của indent
      "indentRainbow.colors": [
        "rgba(255,255,64,0.07)",
        "rgba(127,255,127,0.07)",
        "rgba(255,127,255,0.07)",
        "rgba(79,236,236,0.07)"
      ]
và còn rất nhiều tùy chỉnh khác mọi người có thể tham khảo tại detail extension Indent-Rainbow

Theme Material 


Theme Material Với rất nhiều theme đẹp vừa mắt. Ngoài thì chúng ta cũng có thể config một vài thông số cơ bản như sau

Ví dụ cơ bản
  "editor.tokenColorCustomizations": {
        "[Material Theme]": {
            "comments": "#229977"
        }
    },
Ví dụ nâng cao

  "editor.tokenColorCustomizations": {
        "[Material Theme VARIANT]": {
            "textMateRules": [
                {
                    "scope": [
                        "punctuation.definition.comment",
                        "comment.block",
                        "comment.line",
                        "comment.block.documentation"
                    ],
                    "settings": {
                        "foreground": "#FF0000"
                    }
                }
            ]
        },
    },

    "workbench.colorCustomizations": {
        "[Material Theme VARIANT]": {
            "sideBar.background": "#ff0000",
        }
    },

Tổng Kết

Trên đây là 10 extensions rất hữu ích của Vscode và hiện cũng đang được rất nhiều người sử dụng. Mong là chia sẻ này có thể giúp các bạn có thêm cho mình được những lựa chọn tốt nhất về các extensions vscode

Nguồn: https://www.youtube.com/watch?v=c5GAS_PMXDs&feature=youtu.be

                                                                                                                TruongSOFM Via Viblo

Viết bình luận (0)
Xếp theo