Mời a/e thử dùng IDE Visual Studio Code của thím MS



  • Đang trong thời gian nghỉ lễ, có đọc qua 1 topic "#dùng IDE nào tốt nhất", rảnh rỗi chia sẻ a/e thử dùng Visual Studio Code, 1 IDE thím Microsoft. Mình đã dùng nhiều IDE, nhưng đến giờ đang hài lòng thằng ku em Visual studio code này: Giao diện nhìn clear, sạch đẹp, dễ dùng, nhẹ nhàng, free, powerfull nữa, extensions phong phú....

    Hiện tại em nó cũng 13k star trên github: https://github.com/Microsoft/vscode

    Dạo gần đây cũng thấy thím MS nỗ lực trong việc Opensource cũng như tích hợp opensource vô platform của thím ấy.


    Code focused development. Redefined.
    Build and debug modern web and cloud applications. Code is free and available on your favorite platform - Linux, Mac OSX, and Windows.

    Mới nhìn qua (và nhìn cái trang giới thiệu lúc mới lên hình) thì tôi thấy VS code:

    • được build trên Atom shell (nay đã đổi tên là Electron, vâng, vỏ nguyên tử thì hẳn là ê-lếch-tờ-rông rồi). Cụ thể là atom shell / electron 0.22.3
    • Có tính năng mở file nhanh, giống Ctrl + p của Sublime, tuy nhiên ở đây các anh dùng Ctrl + O
    • Chia đôi màn hình - side by side viewing, có lẽ dùng để so sánh file thì tiện
      Các file nào đang chỉnh sửa được hiện riêng lên trên cùng sidebar, giống brackets
      Bảng mệnh lệnh, Command Pallete, giống sublime (và từ này cũng được công nhận một cách phổ biến là xuất phát từ sublime)

    Ngoài ra nhìn sang hộp công cụ bên phải có thể thấy thêm:

    • Hộp tìm kiếm
    • Hệ thống quản lý mã nguồn với git
    • Công cụ gỡ lỗi.

    Khá đơn giản và trực quan.

    OK. Hãy xem qua các tính năng của VSCode.

    Cài đặt

    Tải VSCode về tại đây ha: https://code.visualstudio.com/Download
    Hiện đã build trên cả 3 nền tảng Windows (tất nhiên), Linux (64-bit only) và MacOS. Cái team này dùng MacOS là nhiều hay sao đó mà các hướng dẫn trên site đều dùng tổ hợp phím của Mac.

    Cơ bản

    Tính năng cơ bản của một trình soạn thảo tất nhiên là soạn thảo rồi. Viết một bài văn tả ông nội em đi. Xong phần cơ bản.

    Truy cập nhanh

    Ctrl + p cho phép bạn mở bảng lệnh - command pallete, Ctrl + O mở bảng truy cập nhanh nói chung. Ở bảng truy cập nhanh ta thấy một lời nhắc rất thú vị: "Ấn ? để xem các hoạt động khả dĩ".
    alt text

    Như vậy command pallete cũng là một bảng con của bảng quick access này. Nếu mở command pallete ra rồi xóa dấu nhắc > đi thì ta cũng quay về bảng quick access này thôi.
    Ở bảng quick access tác vụ thường làm là bay nhảy giữa các file bằng cách gõ tên file, giữa các dòng bằng cách gõ :<số thứ tự>, gõ tênfile:sốdòng để chuyển đến 1 dòng xác định của 1 file, @tên biến đưa ta đến vị trí biến được khai báo. Tương tự sublime.

    # Open symbol by name nghĩa là gì nhỉ? À ở đây thì các anh ấy có một chuẩn là TypeScript type definitions. Với cái này chúng ta sẽ có định nghĩa giao diện các module của javascript rất là đẹp để mang ra gợi ý. Vậy là đã mang được khả năng gợi ý thần thánh của Visual Studio cho các ngôn ngữ có kiểu chặt chẽ lên JS. Rất tuyệt đúng không? Cái này sẽ nói rõ thêm ở phần sau. Quay trở lại với ký hiệu #, lệnh này sẽ đưa các bạn tới chỗ định nghĩa giao diện của cái phương thức hoặc là cái biến đó.

    ! giúp mở bảng thông báo lỗi, rất dễ hiểu
    git chạy các lệnh git
    task chạy các tác vụ, cái này giống build system của sublime. Sẽ cần 1 file tasks.json định nghĩa các tác vụ. Tham khảo thêm.

    Tính năng soạn thảo

    • Mở một cửa sổ mới Ctrl + Shift + n

    • Lưu tự động:
      alt text

    • Ẩn hiện sidebar Ctrl+B

    • Tách đôi/ba cửa sổ soạn thảo, sử dụng nút split ở góc trên bên trái khung soạn thảo. Bạn có cơ hội ấn nó 2 lần. Phím tắt: Ctrl+\
      alt text

    • Nhiều con trỏ (multi cursor)

    Alt + click thực hiện điều này. Bạn cũng có thể vừa giữ Alt vừa quét để chọn nhiều đoạn code.

    Với các bạn dùng kubuntu như tôi thì Alt + click sẽ lôi cả cái cửa sổ di chuyển, hãy tắt tính năng này đi, như sau:
    alt text

    • Format code
      Tổ hợp phím được chọn là Ctrl+Shift+I. Tuy nhiên lại trùng đúng với tổ hợp phím mở Webkit Dev Tool (LOL, sao các bố ấy không disable đi nhỉ?), thế nên tốt nhất là các bạn nên dùng command pallete để làm việc này.

    Vậy tạm xong phần cơ bản.

    Gợi ý code thông minh (intellisense)

    Như trên đã nói, VScode cũng dùng TypeScript type definitions để định nghĩa giao diện cho các module. Nhờ đó chúng ta có các gợi ý như thế này khi code:
    alt text

    Ở đầu file ta có một dòng tham chiếu đến tệp định nghĩa để vscode biết mà gợi ý. Thực ra sublime cũng có plugin SublimeCodeIntel để làm việc này, nhưng không thêm được các tệp giao diện tùy ý vào (hoặc có thể là tại tôi cà dốt không biết dùng, ai biết chỉ nhé).

    Vấn đề là mấy cái tệp định nghĩa này lấy ở đâu đây? Đừng lo lắng, đã có vô số chàng trai và cô gái dễ thương làm việc này cho chúng mình. Chúng ta có một tool dành cho việc nhặt mấy tệp này về dùng là tsd, giống như bowernpm

    npm i -g tsd

    Tại thư mục dự án:

    tsd query node mocha --resolve --action install

    Đây là những gì chúng ta nhận được:

    alt text

    Tuyệt, phải không nào?

    UPDATE 20/03/2016: Công cụ được sử dụng hiện nay là typings, tương tự như tsd nhưng có thể cài đặt được từ tất cả các repo github/npm/bower nếu gói đó có chứa file .d.ts. Không còn phụ thuộc vào repo DefinitelyTyped nữa. Nếu muốn chỉ định cài từ repo DefinitelyTyped, bạn cần thêm tham số --ambient

    typings install react --ambient --save

    Quick fix

    Những chỗ được gạch chân ngoằn nghoèo màu xanh với chiếc bóng đèn màu vàng, là những chỗ VSCode có thể gợi ý cách sửa lỗi. Ví dụ bên dưới ta có thể thêm tham chiếu đến tệp định nghĩa angular, nếu chưa có trong thư mục typings, VSCode sẽ tự tải về hộ chúng mình.

    alt text

    Bay nhảy giữa các khai báo biến

    • Tìm khai báo biến

    Đặt con trỏ vào 1 biến và ấn Ctrl+F12, con trỏ sẽ nhảy đến vị trí biến được khai báo. Nếu ấn tổ hợp phím Ctrl+Shift+F10 một khung nhỏ sẽ xổ ra cho phép xem và chỉnh sửa khai báo tại chỗ mà không phải nhảy đi đâu cả. Tính năng này có tên là Peek Definition.

    Kubuntu lại một lần nữa gặp rắc rối bởi Ctrl+F12 trùng với tổ hợp phím tắt Show Dashboard, vì vậy tôi lại phải tắt nó đi:
    alt text

    • Xem tất cả vị trí xuất hiện của một biến, tổ hợp phím được sử dụng là Shift+F12. Một khung tương tự peek definition được xổ ra liệt kê hết các vị trí biến được sử dụng.

    • Chọn tất cả các lần xuất hiện biến, bằng tổ hợp phím Ctrl+F2. Từ đây có thể đổi tên biến nhanh chóng.
      alt text

    Tạm kết

    Phần debug và tích hợp git tôi xin phép bổ sung sau.

    Sau vài ngày dùng thử, tôi thấy đây là một công cụ rất đáng để thử, nhanh, intellisense mạnh mẽ. Các bạn nào đang làm web với Visual Studio nên ngó qua. Thứ tôi nghĩ nên được bổ sung là khả năng cài cắm phần mở rộng, với nhân atom thì điều đó chắc cũng không phải là việc khó. À, thêm một thứ nữa là các bộ theme vui mắt giúp lập trình viên thêm hào hứng trong công việc.

    (Ngoài ra tôi thắc mắc tại sao nhân atom mang ra làm các ứng dụng đa nền tảng khác thì dùng rất ngon mà sao cái Atom editor lúc nào cũng làm tôi phát ốm.)

    Tóm lại, tôi đánh giá cao nỗ lực gần đây của Microsoft hướng đến cộng đồng nguồn mở. Chúc mừng các bác.

    Nguồn: http://mahpahh.com/visual-studio-code-at-a-glance/

    Mình cũng bổ sung thêm:

    A/e trải nghiệm xong để comments ở dưới nhé.



  • @tung =]] e cũng dùng được 2-3 tuần rồi nhìn giao diện rất sạch sẽ, mỗi tội thằng này không mở được nhiều project trên 1 window như sublime text


  • The one love with javascript

    @way.code ừ đúng rồi em :v hi vọng các version tiếp theo nó upgrade cái nè.



  • ~ (Ngoài ra tôi thắc mắc tại sao nhân atom mang ra làm các ứng dụng đa nền tảng khác thì dùng rất ngon mà sao cái Atom editor lúc nào cũng làm tôi phát ốm.)

    Atom editor ở đây là đang ám chỉ VSCode đó sao ?


  • The one love with javascript

    @phamhongphuc mình cũng có đợt cài thằng ATOM vào. Dùng 5" uninstall luôn. Ngu đừng hỏi...hay là do mình ngu ko biết :v .
    Ám chỉ VSCode thì thực tế nó chạy lại tốt mới chết ^_^ !!!



  • @tung ngoài atom thì còn có thằng node-webkit cũng để tạo app desktop bằng Nodejs khá hay.
    Mình đi học nhiều bài so sánh về 2 thăng này và cảm thấy khá là bối rối ~


  • The one love with javascript

    @phamhongphuc ko quan trọng đâu bạn ạ. Miễn bạn làm ra được cái người dùng cần, bản thân mình cũng chẳng quan tâm ATOM hay node-webkit.



  • đã cài nhưng không dùng, bởi lẽ dùng nhiều sublime rồi chuyển qua thằng này ko quen đc, ko có tab file, minimap, mở nhiều project 1/1 window, ...



  • @stmiizz đã nói:

    đã cài nhưng không dùng, bởi lẽ dùng nhiều sublime rồi chuyển qua thằng này ko quen đc, ko có tab file, minimap, mở nhiều project 1/1 window, ...

    Có tabfile mà, tab file của nó rất hay, minimap là cái gì thì mình hơi không hiểu cho lắm ~
    nó cho phép mở theo thư mục nữa, có thích hợp cả git



  • @tung đã nói:

    g đâu bạn ạ. Miễn bạn làm ra được cái người dùng cần, bản thân mình cũng chẳng quan tâm ATO

    Có quan trọng chứ, ATOM show hết mã nguồn còn nw.js thì không, hiệu năng của 2 thằng cũng có chút cách biệt
    nwjs có vẻ chậm hơn ATOM 1 chút, app build xong gì mà tới hơn 50MB
    atom thì nhanh hơn dung lượng thì có vẻ nhẹ hơn nhưng mã nguồn show hết ra
    nwjs thì main là file html, còn ATOM thì main là file js~ nói chung khác biệt cũng khá khá mà về mặt hiệu năng chắc phải từ bỏ nodejs khi build app desktop mất



  • mình lun tin tưởng webstorm dù có phí :)



  • Mình cài cái file .deb từ website của nó rồi mà không thấy shortcut, command hay icon nào để mở app nhỉ. Ubuntu 14.04 LTS



  • admin share code trang diễn đàn dc không, tại thấy ít kiến thức quá , thôi share code ae học cho lẹ tại thấy website chạy nhanh quá



  • @hpplcc http://nodebb.org của bạn đây ^_^

    Ít hay nhiều hy vọng bạn có đóng góp thêm cho nó sôi nổi. Ai cũng như bạn thì chẳng ai được cái gì cả. Mình làm phi lợi nhuận và chia sẻ cho a/e.

    Thân bạn!



  • This post is deleted!


  • mình đang dùng thấy khá ok, dùng nhẹ như sublime nhưng mạnh hơn, có tích hợp git, nhưng thấy chưa thể mạnh bằng webstorm nhưng bù lại nhẹ hơn webstorm khá nhiều. Nếu mà tích hợp command line vào ide nữa thì khá ngon


  • The one love with javascript



  • Hi @tung , mình thấy tool này xài rất ok, nhưng có 1 vấn đề là mình code trong file ejs thì làm sao format theo kiểu code html cũng như nhắc lệnh như sublime vậy? Thanks


  • Global Moderator

    @Celinto Trong vscode bạn chọn menu: Perferences > User Settings. Bạn paste đoạn code này vào xem có đc ko nhé :D

    // Place your settings in this file to overwrite the default settings
    {
        // Configure file associations to languages (e.g. "*.extension": "html"). These have precedence over the default associations of the languages installed.
        "files.associations": {
            "*.ejs": "html"
        },
        // Configure the update channel to receive updates from. Requires a restart after change.
        "update.channel": "none"
    }
    


  • @Celinto said in Mời a/e thử dùng IDE Visual Studio Code của thím MS:

    Hi @tung , mình thấy tool này xài rất ok, nhưng có 1 vấn đề là mình code trong file ejs thì làm sao format theo kiểu code html cũng như nhắc lệnh như sublime vậy? Thanks

    Bạn có thể cài thêm ext ejs cũng rất ok nhé


Log in to reply