- vừa được xem lúc

Tối ưu Visual Studio Code - Tại sao không ?

0 0 38

Người đăng: Hoàn Kì

Theo Viblo Asia

1. Mở đầu

  • Có thể Visual Studio Code đang là sự lựa chọn của nhiều anh em lập trình.
  • Em ấy đứng đầu trong Stack Overflow Developer Servey 2019, bỏ xa Sublime Text hay anh em họ nhà Jetbrains.

  • Còn ở Stack Overflow Developer Servey 2020 thì mình kiếm hoài mà không có thấy thông tin.
  • Chắc chắn rằng thao tác hằng ngày của lập trình viên với editor là không hề nhỏ.
  • Nếu như hiểu rõtối ưu chúng thì sẽ giúp tiết kiệm khá nhiều thời gian, công sức cũng như đâu đó cảm thấy thư thái hơn trong quá trình làm việc.
  • OK cùng tìm hiểu nhé !

2. Note

  • Cơ mà có một chút cần lưu ý đã:

  • Đôi khi, nhiều bạn hay bị nhầm giữa IDEEditor

    • IDE là viết tắt của Integrated development environment :

      • Tạm dịch là môi trường phát triển tích hợp.

      • Ngoài viết mã code thì còn là một công cụ có thể biên dịchdebug.

      • IDE thường chú trọng vào ngôn ngữ cụ thể nào đó.

      • Ví dụ như có thể dùng Dev C++, compile file .cpp để tạo ra file .exe rồi chạy trên Windows.

    • Editor chỉ là các trình soạn thảo văn bản:

      • Thường không làm điều được đó, có xu hướng tiếp cận rộng hơn.

      • Có thể chỉnh sửa tất cả các loại tệp, thay vì chuyên về một loại hoặc ngôn ngữ cụ thể.

  • Các tools lập trình của Microsoft có đủ cả 02 món ăn chơi này

    • Visual Studio: Full-featured IDE to code, debug, test, and deploy to any platform.

    • Visual Studio Code: Editing and debugging on any OS. (Và đây, hôm nay chúng ta sẽ tìm hiểu em này)

  • Có quan điểm cho rằng những đội đã làm hệ điều hành (OS) rồi đi làm phần mềm thì phần mềm đó khá xịn, vì họ hiểu sâu sắc về hệ thống hơn và tùy biến phù hợp với OS đó hơn, mình cũng không chắc lắm.

  • Và khi nhắc tới Microsoft thì hay nhắc tới bản quyền, nhưng đây là lần đầu nghe thấy có món free và open source.

3. Cài đặt

  • Cài đặt phần mềm nào cũng thế, ta nên tham khảo ở trang chủ.

    • Mac

    • Windows

    • Ubuntu

      • Cài từ file

        sudo apt install ./<file>.deb
        
      • Cài từ câu lệnh

        wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
        sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
        sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list' sudo apt install apt-transport-https
        sudo apt update
        sudo apt install code # or code-insiders
        
      • Gỡ cài đặt

        sudo apt-get purge code # Remove settings
        cd ~ && rm -rf .vscode && rm -rf .config/Code
        
  • Thật hay là trang docs của VS Code khá dễ đọc

    • Nhưng có vẻ tốc độ cập nhật docs hơi thấp hơn so với tốc độ phát triển tính năng.

    • Chúng ta cứ tiêu hóa hết chỗ này đi thì sẽ trở thành master VS code sớm thoai, hehe ? ?

  • Giới thiệu vầy cũng sương sương rồi !

    • Bây giờ chúng ta sẽ cùng tìm hiểu một số tips, tricks cho editor được mệnh danh là quốc dân này nhé !

    • Bên cạnh đó là một số phím tắt, extentionskinh nghiệm cá nhân của tác giả, hi vọng sẽ giúp các bạn cảm thấy thư tháitiện lợi hơn khi lập trình !

    • Okie, let go ^_^

4. Giao diện

  • Giao diện tổng quan trông như này

  • Phím tắt đóng mở Side BarCtrl + B.

  • Phím tắt đóng mở Terminal trong PanelCtrl + `.

  • Ba phần đầu

    • A: Activity Bar
    • B: Side Bar
    • C: Editor

    cũng khá cơ bản, không có gì đặc biệt lắm ???

D. Panels

  • Hiển thị các tabs khác nhau như

    • Problems:
      • Các warning, errors , ...
    • Output:
      • Logs của ESLint chẳng hạn.
    • Terminal:
      • Đây là Terminal ảo.
      • Có thể load được các shell như bash, zsh ... Cũng có thể mở nhiều Terminal ...
      • Nhưng đã có lần cái Terminal ảo này cũng gặp lỗi kiểu không load được env ...
      • Thường thì mình thấy anh em hay mở Terminal thật của Ubuntu để npm install, run project ...
      • Còn Terminal này thì dùng để commit code, trong quá trình code cứ thi thoảng lại:
        • Ctrl + `
        • git add .
        • gcn!
        • Ctrl + `
    • Debug Console

E. Status Bar

  • Thông tin về tệp bạn đang chỉnh sửa.

  • Ví dụ:

    • Ln 23, Col 27: Con trỏ chuột đang ở dòng 23, cột 27
    • Spaces: 2: Một tab đang được định nghĩa có độ dài bằng 2 spaces
    • UTF-8: Encoding đang được sử dụng
      • UTF-16 LE
      • UTF-16 BE
      • ...
    • LF : Quy định một hoặc một chuỗi các ký tự điều khiển biểu thị sự kết thúc của một dòng và bắt đầu một dòng mới.
      • LF: Tên đầy đủ: Line Feed, sử dụn kí tự: \n

      • CR: Tên đầy đủ: Carriage Return, sử dụng kí tự: \r

      • CRLF: Cái này thì sài cả hai

      • Ví dụ:

        • Để biểu thị đã tới lúc kết thúc dòng, chuyển qua dòng mới thì:
        • Linux sẽ dùng LF với \n
        • Windows sẽ dùng CRLF với \r\n
      • Lưu ý:

        • Khi làm việc với Docker thì bạn cần để Dockerfileentrypoint.sh sử dụng LF nhé.
        • Bằng không, Docker sẽ báo lỗi not found, việc này hay xảy ra khi commit, push file trên Windows rồi pull về ở Ubuntu
    • YAML : Language mode cho file đang mở.
      • Nên chọn cụ thể để tiện làm việc hơn.
      • Phím tắt: Ctrl + K M

5. Cấu hình

  • Phần này quan trọng phết

  • Mở dưới dạng UI thì phím tắt là Ctrl + ,

    • Có thể search settings nào mình muốn chỉnh, bên dưới sẽ hiện giá trị cho ta lựa chọn.

    • Có 3 khu vực áp dụng là:

      • User: Cấu hình này được áp dụng cho tất cả. (Dùng mình thằng này là được rồi)*
      • Workspace : Chỉ áp dụng cho workspace được chỉ định.
      • Folder: Áp dụng cho thư mục.
  • Mở dưới dạng JSON

    • Dạng UI thì giao diện đẹp và có chú thích nhưng chỉnh từng cái cũng mất thời gian nên sinh thêm cách này cho nhanh gọn nhẹ.
    • Ấn vào Open Settings (JSON) ở góc trên bên phải màn hình của dạng UI.

    • Đây là một mẫu:

      { "files.autoSave": "off", "files.insertFinalNewline": true, "files.trimTrailingWhitespace": true, "editor.tabSize": 4, "editor.formatOnSave": true, // Hai config formatOn*** này khá là tiện, ở phần sau chúng ta sẽ tìm hiểu thêm "editor.formatOnPaste": true, "editor.suggestSelection": "first", "editor.codeActionsOnSave": { "source.fixAll.eslint": true // Config này cho ESLint, cũng rất tiện lợi }, "eslint.validate": [ "javascript" ], "javascript.format.semicolons": "insert", "workbench.iconTheme": "vscode-icons", // Config này cho extensions vscode-icons "workbench.colorTheme": "Dracula Soft", // Theme Dracula khá được anh em đề nghị, phần sau sẽ giới thiệu thêm. "workbench.startupEditor": "none", "tabnine.experimentalAutoImports": true, "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", // Search in modules // "search.useIgnoreFiles": false, // "search.exclude": { // "**/node_modules": false, // }
      }
      

      Có một số config sẽ giải thích chi tiết ở phần sau.

  • Turning on Settings Sync

    • Tính năng này cho phép đồng bộ cài đặt của bạn với tài khoản Github hoặc Microsoft.
    • Khá tiện lợi, sau khi gỡ hoặc cài VS Code ở máy mới, mất hết config, có thể đồng bộ lại tất cả nhanh chóng.

6. Phím tắt

  • Nếu ta đã quen dùng các phím tắt trên các editor khác rồi thì

    • VS code có hỗ trợ Keymap extention để đưa các phím tắt từ editor ưa thích của bạn sạng VS code.
    • Có cả Vim, Sublime Text, Atom, ...
  • Tuy nhiên thì vẫn khuyến khích sử dụng bộ phím tắt của VS Code hơn, có hình ảnh tổng hợp trên MacOS, Windows, Linux

  • Ấn Ctrl+K Ctrl+S để liệt kê danh sách tất cả phím tắt

  • Và trong thực tế, ta cũng chỉ cần nắm một số phím tắt hay sử dụng:

    • Tab

      Ctrl + P: Mở nhanh một file
      Ví dụ: Copy api.js:20:25 từ màn hình logs error Ctrl + P Ctrl + V Enter Thì VS-Code sẽ mở file api.js và con trỏ chuột sẽ trỏ luôn tới line 20, col 25
      
      Ctrl + Tab:
      Ctrl + Shift + Tab: Chuyển giữa các file mà bạn đang mở
      
      Alt + number: Chuyển đến tab theo số thứ tự
      
      Ctrl + W: Đóng tab đang xem / Thoát VSC
      
      Ctrl + Shift + T: Mở lại file vừa đóng
      
    • Coding

      Alt + Up:
      Alt + Down: Di chuyển dòng lên / xuống
      
      Ctrl + Shift + Left:
      Ctrl + Shift + Right: Bôi đen từ theo từng cụm cho đến khi gặp dấu câu.
      
      Ctrl + Shift + Up:
      Ctrl + Shift + Down: Chọn nhiều con trỏ chuột theo hướng dần dần đi lên / xuống.
      Nếu muốn thêm con trỏ chuột vào các vị trí tùy ý thì chọn các vị trí bằng chuột và sử dụng Alt+Click
      

      Ctrl+Shift+L: Thêm con trỏ tới tất cả các vị trí lặp lại của từ hiện tại
      

      Ctrl + D: Thay vì chọn tất cả thì sẽ lần lượt chọn từng vị trí trùng khớp.
      

      Ctrl + Shift + I: Formart lại toàn bộ code cho đúng định dạng
      
      Ctrl + Shift + A: Tạo chú thích mẫu
      
      Ctrl + Shift + [ / ]: Đóng mở cặp ngoặc gần nhất.
      

      Ctrl + Shift + Alt + Up/Down: Copy dòng lên trên hoặc xuống dưới.
      Hơi buồn xíu là trên Ubuntu thì key này bị trùng với key hệ thống.
      Ta có thể tự setup riêng thông qua editor.action.copyLinesUpAction and editor.action.copyLinesDownAction
      Như Super + Alt + Up / Down chẳng hạn.
      Hoặc disable key này của hệ thông đi.
      

      Ctrl + L: Bôi đen cả dòng
      
      Ctrl + C: Nếu trước đó có bôi đen thì copy text đã bôi đen vào bộ nhớ đệm
      Còn chưa bôi đen copy cả dòng.
      
      Ctrl + Up:
      Ctrl + Down: Scroll file lên / xuống (Giữ nguyên vị trí con trỏ chuột)
      
    • Điều hướng

      Ctrl + G: Di chuyển đến dòng 
      F12: Go to definition
      
    • Theme

      Ctrl+K Ctrl+T: Di chuyển chọn giữa các theme để preview và chọn theme ưng ý.
      
    • Snipet

      • Tính năng này giảm việc bạn phải viết những đoạn code lặp nhau
      • Ví dụ:
        • Thi thoảng bạn lại viết: console.log();
        • Thì thay vào đó, chỉ cần gõ log rồi ấn phím tab
        • Hãy
          Ubuntu / Windows: File > Preferences > User Snippets MacOS: Code > Preferences > User Snippets
          
        • Rồi chọn ngôn ngữ bạn muốn, nhưng thông thường cứ chọn luôn New Global ... rồi đặt tên file là common luôn.
        • Đây là một ví dụ:
          "Print to console": { "scope": "javascript,typescript", "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console"
          }
          
        • Tab lần đầu thì con trỏ chuột ở vị trí $1, lần 2 thì ở vị trí $2.

7. Extensions

Sau đây là một số Extensions nên tham khảo:

  • GitLents

    • Git hiện đã trở thành sự lựa chọn hàng đầu được dùng để quản lý phiên bản source code.

    • GitLents là trợ thủ đắc lực của Git, sau khi cài xong:

    • Ở tab Activity Bar sẽ hiển thị thêm một tab GitLens.

    • PhầnStatus Bar sẽ hiển thị thêm.

      • Thông tin về tên tác giả của commit.
      • Thời gian commit cách đây bao lâu.
    • Còn ở phần Editor sẽ hiển thi thêm chữ mờ

      • Hover chuột qua phần chữ mờ sẽ có khá nhiều lựa chọn.
      • Điểm cộng lớn nhất là có thể mở thẳng pull request hoặc commit trên GitHub.
  • code-icons

    • Thay đổi file icon mặc định của VSCode
    • Trông thích mắt hơn nhèo.
  • Bracket Pair Colorizer

    • Hiển thị màu sắc giống nhau cho cặp ngoặc.
    • Chứ lắm khi căng mắt lên nhìn ko biết mở ngoặc này ăn kèm đóng ngoặc nào ?
    • Kết hợp với phím tắt Ctrl + Shift + [ / ] cũng khá hợp.
  • Code spell checker

    • Kiểm tra chính tả trong code
    • Nhiều khi anh em mình viết sai chính tả mà không nhận ra, về sau đọc lại code cũng thấy kì kì.
  • BookMark

    • Cái tên nói lên tất cả, nhiều khi đang code mà đi tìm lại vị trí trước đó mà mắc mệt hà.
    • Ctrl + Alt + K: Tạo / bỏ bookmark cho dòng hiện tại
    • Ctrl + Alt + L / J: Di chuyển đến vị trí bookmark
  • Docker

    • Khi cài thì màn hình giới thiệu Extensions cũng đã đề cập tính năng khá chi tiết.
  • Markdown All in One

    • Cái tên cũng nói lên tất cả rồi heng.
    • Có tính năng nổi bật là live preview markdown
  • Code Runner

    Cũng khá là tiện

  • For auto suggestion

    Hai bác bên dưới đều bảo có dùng AI để để recommend code.

    Ta có thể thử từng cái xem ưng cái nào hơn nhé.

    Nhưng Tabnine sẽ ngốn khá nhiều tài nguyên hệ thống để hoạt động.

    • Visual Studio IntelliCode

    • Tabnine Autocomplete AI

  • For HTML, CSS

    • Colorize

      • Hiển thị màu sắc cho CSS
    • CSS Peek

      • Go to definition

    • Auto Rename Tag

      • Tự động thay đổi tên tag tương ứng
  • For Javascript

    Không thể bỏ qua bộ đôi ESLintPrettier

    • ESLint

      • Hiện này các dự án có đụng tới javascript thường sài Lint để thống nhất coding conventions.
      • ESLint là một trong những công cụ dùng để Lint được ưa chuộng.
      • Trong config những dòng thêm sau để tối ưu hiệu quả của ESLint
        "editor.codeActionsOnSave": { "source.fixAll.eslint": true
        },
        "eslint.validate": [ "javascript"
        ],
        
      • Còn file package.json thì sẽ có thêm
         "scripts": { "lint": "eslint .", "lint-fix": "eslint . --fix", }
        
    • Prettier - Code formatter

    • Khi nào đó sẽ một bài riêng để nói về bộ đôi này và những extensions hay dùng cho các dự án javascript như npmJavaScript (ES6) code snippets ...

9. Tiện ích

Ta cũng có thể sử dụng Visual Studio Code để giải quyết một số bài toán:

  • Format json file

    • Câu chuyện đặt ra là bạn có json như thế này hoặc phức tạp hơn nữa:

      {"name": ["John", "Alex"],"subject": ["match", "physic"]}
      
    • Làm sao để hiển thị nó thành dạng JSON, đóng mở các ngoặc để kiểm tra giá trị dễ hơn kiểu như:

      { "name": [ "John", "Alex" ], "subject": [ "match", "physic" ]
      }
      
    • Không cần lên Google search format json online nữa !

      -> Ctrl + N

      -> Ctrl + K M Sau đó, chọn ngôn ngữ cho file là JSON

      -> Paste đoạn json kia vào, lúc này "editor.formatOnPaste": true sẽ hoạt động và done ✌️

  • Tìm kiếm và thay thế

    • VS Code có một điểm cộng nữa là giao diện search trông khá tiện lợi, được đánh giá cao hơn hẳn so với Sublime Text.

    • Kết hợp với regex cũng khá mạnh

    • Bài toán đặt ra là biến từ

      (QA, 800)
      (Dev, 1000)
      (PM, 15000)
      

      thành

      insert into salaries (position, amount) values ((QA, 800))
      ...
      
    • Câu trả lời là:

Nguồn:

  1. https://www.google.com/
  2. https://code.visualstudio.com/docs

Bình luận

Bài viết tương tự

- vừa được xem lúc

Học Regular Expression và cuộc đời bạn sẽ bớt khổ (Updated v2.2)

. Regular Expression (RegEx) à? Nghe quen quen. . Bạn cần xử lý validate (kiểm tra tính hợp lệ) các trường dữ liệu nhập vào ô Text. .

0 0 93

- vừa được xem lúc

Cải thiện tốc độ code với các phím tắt thông dụng trong VS Code

. Lời mở đầu. . . Không biết các bạn có giống mình không, nhưng mà ngày xưa khi xem mấy film hành động có 1 anh IT "siêu ngầu" thì hay có mấy cảnh như thế này.

0 0 56

- vừa được xem lúc

Live Server - Làm gì khi cái VS Code extension thân yêu trở chứng?

. Hôm nay là một ngày Chủ Nhật cuối tuần đẹp trời để... code. Như bao ngày cuối tuần, mình lại ngồi vào máy, bật VS Code để vọc vạch những thứ linh tinh về web, JS các kiểu. Lâu ngày mở lại cái pet pr

0 0 66

- vừa được xem lúc

Những Tính Năng Hay Trong Visual Studio Code (VSCode)

Giới thiệu. Visual Studio Code là một trong những công cụ soạn thảo văn bản lập trình tốt nhất.

0 0 35

- vừa được xem lúc

Những plugin cần thiết cho Visual Studio Code

. . Visual Studio Code(VSCode) là một text editor cross-flatform miễn phí, được phát triển bởi Microsoft.

0 0 35

- vừa được xem lúc

Cài những extensions này vào VS Code đi rồi đời bạn sẽ bớt "khổ"

Lời mở đầu. . . XIn chào tất cả các bạn và mình đã quay trở lại rồi đây.

0 0 25