Cài VS Code và các extension cần thiết để code VueJS (2026)

Trong bài này mình hướng dẫn các bạn từ lúc tải Visual Studio Code (VS Code), mở nó lên lần đầu, cài đúng các extension cần cho VueJS, cho đến khi tạo được một project Vue 3, có gợi ý code, báo lỗi và tự format khi lưu. Làm lần đầu mất khoảng 20–30 phút, chủ yếu là thời gian tải. Mọi bước trong bài mình làm thật ngày 09/11/2026 với VS Code 1.145.2, Vue (Official) 3.3.14, ESLint 3.0.34, Prettier 12.4.0 và create-vue 3.24.0.

Cần chuẩn bị

• Máy Windows 10/11 64-bit, macOS hoặc Linux. Ảnh trong bài chụp trên bản Linux với theme Light Modern. Trên Windows giao diện giống hệt, chỉ khác terminal mặc định là PowerShell và theme mặc định là Dark Modern.
• Node.js bản LTS tải ở nodejs.org. Project do create-vue 3.24.0 tạo ra ghi yêu cầu Node ^22.18.0 || >=24.12.0, nên các bạn cài Node 22 hoặc 24 mới nhất.
• Kết nối Internet để tải VS Code, extension và các gói npm.

Tóm tắt các extension sẽ cài trong bài:

• Vue (Official) (Vue.volar): tô màu cú pháp file .vue, gợi ý code, báo lỗi template. Đây là extension bắt buộc.
• ESLint (dbaeumer.vscode-eslint): gạch đỏ những đoạn code sai quy tắc ngay khi gõ.
• Prettier - Code formatter (esbenp.prettier-vscode): tự căn lề, thống nhất dấu nháy, dấu chấm phẩy khi lưu file.
• EditorConfig và Oxc: project Vue mới tạo sẽ tự gợi ý cài thêm hai extension này (bước 10).

Bước 1: Tải Visual Studio Code

Vào trang chính thức code.visualstudio.com/download. Dùng Windows thì bấm nút Windows (bản User Installer, yêu cầu Windows 10 hoặc 11 64-bit). Máy Mac chọn Mac Universal. VS Code miễn phí, không cần tài khoản.

Bước 2: Cài đặt và mở VS Code lần đầu

Chạy file vừa tải, bấm Next theo trình cài đặt. Ở màn hình Select Additional Tasks, các bạn giữ nguyên dấu tích Add to PATH để sau này gõ được lệnh code trong terminal. Mình khuyên tích thêm hai ô Add "Open with Code" action để chuột phải vào thư mục là mở được bằng VS Code. Cài xong, mở VS Code, các bạn sẽ thấy màn hình Welcome như dưới. Thanh dọc bên trái là Activity Bar, biểu tượng bốn ô vuông (khoanh đỏ) là nơi quản lý extension.

Bước 3: Mở Extensions và tìm "Vue"

Bấm biểu tượng Extensions hoặc nhấn Ctrl+Shift+X, gõ Vue vào ô tìm kiếm. Kết quả có rất nhiều extension tên "vue", trong đó vài cái bị gạch ngang (đã ngừng phát triển). Các bạn chọn đúng Vue (Official), nhà phát hành Vue có dấu tích xanh.

Bước 4: Cài Vue (Official)

Trang chi tiết hiện ra, kiểm tra lại tên miền vuejs.org có tích xanh rồi bấm Install. Ở cột Marketplace bên phải, mã định danh là vue.volar, đây chính là extension trước kia gọi là Volar.

Lần đầu cài extension của một nhà phát hành, VS Code hỏi Do you trust the publisher "Vue"?. Vì đây là nhà phát hành đã xác minh sở hữu vuejs.org, các bạn bấm Trust Publisher & Install.

Cài xong, nút Install đổi thành Disable và Uninstall. Không cần khởi động lại VS Code.

Bước 5: Cài ESLint

Xóa ô tìm kiếm, gõ ESLint, chọn extension của Microsoft (mã dbaeumer.vscode-eslint) rồi bấm Install. Lưu ý: extension này chỉ là "cầu nối", còn bản thân thư viện ESLint và bộ quy tắc nằm trong project. Project tạo ở bước 8 đã có sẵn phần đó.

Bước 6: Cài Prettier - Code formatter

Gõ Prettier, chọn Prettier - Code formatter của nhà phát hành Prettier (tên miền prettier.io, mã esbenp.prettier-vscode). Đừng chọn bản ghi "DEPRECATED" ở cuối danh sách. Bấm Install và Trust Publisher nếu được hỏi.

Để kiểm tra, gõ @installed vào ô tìm kiếm. Các bạn phải thấy đủ ba extension: ESLint, Prettier - Code formatter và Vue (Official).

Bước 7: Mở Terminal trong VS Code và kiểm tra Node.js

Nhấn Ctrl+` (phím dấu huyền, cạnh số 1) để mở Terminal ngay trong VS Code. Gõ hai lệnh sau, nếu hiện số phiên bản là Node.js đã sẵn sàng:

node -v
npm -v

Bước 8: Tạo project Vue 3 bằng create-vue

Trong Terminal, chạy lệnh tạo project chính thức của Vue. Lần đầu npm hỏi Ok to proceed? (y), các bạn nhấn Enter.

npm create vue@latest

Trả lời các câu hỏi như sau: tên project vue-demo, Use TypeScript? chọn No (người mới nên bắt đầu với JavaScript). Ở danh sách tính năng, dùng phím mũi tên và phím Space để chọn Router, Linter và Prettier, rồi Enter. Phần experimental features bỏ trống, câu Skip all example code chọn No để có code mẫu.

Tạo xong, vào thư mục project và cài các gói:

cd vue-demo
npm install

Dòng 4 moderate severity vulnerabilities là cảnh báo của các gói phụ thuộc, với project học tập các bạn chưa cần xử lý và không nên chạy npm audit fix --force vì lệnh này có thể nâng phiên bản gây lỗi.

Bước 9: Mở project trong VS Code và tin tưởng thư mục

Vẫn trong Terminal, gõ lệnh dưới để mở thư mục project ngay trong cửa sổ hiện tại (bỏ -r thì VS Code mở cửa sổ mới). Cách khác: menu File → Open Folder... rồi chọn thư mục vue-demo.

code -r .

Với thư mục lạ, VS Code bật Restricted Mode (thanh thông báo phía trên, góc trái thanh trạng thái). Ở chế độ này extension bị giới hạn và cài đặt của project không được áp dụng, nên Vue (Official) và ESLint sẽ không hoạt động đầy đủ. Bấm Manage.

Trong màn hình Workspace Trust, bấm Trust (hoặc Ctrl+Enter). Chỉ làm vậy với project do chính các bạn tạo hoặc tải từ nguồn tin cậy.

Bước 10: Cài các extension được project gợi ý

Project tạo bằng create-vue có sẵn file .vscode/extensions.json liệt kê 5 extension nên dùng. VS Code thấy còn thiếu nên hiện thông báo ở góc dưới, hỏi có cài extension của EditorConfig và oxc không. Bấm Show Recommendations để xem trước.

Mục Workspace Recommendations có 5 extension: Prettier, ESLint, Vue (Official) đã cài, còn EditorConfig và Oxc chưa cài. Bấm biểu tượng đám mây có mũi tên cạnh tiêu đề mục (Install Workspace Recommended Extensions) để cài hết một lần, rồi bấm Trust Publishers & Install. EditorConfig giúp giữ đúng kiểu thụt lề theo file .editorconfig, còn Oxc hiển thị lỗi từ oxlint, công cụ lint mà create-vue chạy cùng ESLint.

Bước 11: Kiểm tra Vue (Official) đã hoạt động

Nhấn Ctrl+P, gõ App.vue rồi Enter. Nếu extension chạy đúng, các phần <script setup>, <template>, <style> đều có màu, và góc phải thanh trạng thái hiện ngôn ngữ vue. Lần đầu, Vue (Official) có thể mở thêm tab giới thiệu phiên bản, các bạn đóng đi là được.

Thử gợi ý code: xuống dòng sau thẻ <HelloWorld msg="You did it!" />, gõ <HelloWorld m. Danh sách gợi ý đưa msg lên đầu, vì Vue (Official) đọc được prop msg khai báo trong HelloWorld.vue. Nếu danh sách không tự hiện, nhấn Ctrl+Space.

Bước 12: Kiểm tra ESLint báo lỗi

Trong <script setup>, thêm một dòng khai báo biến mà không dùng, ví dụ const tongDiem = 10. Tên biến bị gạch chân, rê chuột vào sẽ thấy dòng 'tongDiem' is assigned a value but never used. eslint(no-unused-vars). Có chữ eslint(...) nghĩa là extension ESLint đã đọc được cấu hình của project.

Bước 13: Prettier tự format khi lưu file

Giờ mình cố tình viết code lộn xộn: dấu nháy kép, dấu chấm phẩy, thừa khoảng trắng, thụt lề sai.

Nhấn Ctrl+S. Prettier sửa lại theo file .prettierrc.json của project (nháy đơn, không chấm phẩy, tối đa 100 ký tự mỗi dòng): import { ref } from 'vue', const tongDiem = ref(10) và {{ tongDiem }}.

Project này tự format được vì create-vue đã ghi sẵn cấu hình vào .vscode/settings.json. Để mọi project khác cũng như vậy, các bạn bật trong cài đặt chung: nhấn Ctrl+,, ở tab User tìm format on save và tích ô Editor: Format On Save. Dòng chữ (Modified in Workspace) cho biết project hiện tại đã có cài đặt riêng.

Tiếp theo tìm default formatter, ở ô Editor: Default Formatter chọn Prettier - Code formatter. Không chọn thì khi có nhiều extension cùng format được file .vue (Vue (Official), Oxc, Prettier), VS Code sẽ báo có nhiều formatter và bắt các bạn chọn một cái mặc định.

Nếu thích sửa file, các bạn có thể thêm thẳng vào settings.json của User (lệnh Preferences: Open User Settings (JSON)):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Bước 14: Chạy project Vue

Mở lại Terminal (Ctrl+`) và chạy:

npm run dev

Vite khởi động trong chưa tới một giây và in ra địa chỉ http://localhost:5173/. Giữ Ctrl và bấm vào link để mở trình duyệt. Muốn dừng server, bấm vào Terminal rồi nhấn Ctrl+C.

Trang mẫu của Vue hiện ra, kèm dòng "Tổng điểm: 10" mà mình vừa thêm ở bước 13. Từ giờ, mỗi lần lưu file, trình duyệt tự cập nhật mà không cần tải lại trang.

Lỗi thường gặp

Cài nhầm Vetur cho Vue 3

Nhiều bài hướng dẫn cũ bảo cài Vetur. Ngay trang của Vetur trên Marketplace ghi phần Project status chuyển sang hỗ trợ chính thức mới là Volar, và lần phát hành cuối đã từ 4 năm trước. Cài cùng lúc Vetur và Vue (Official) dễ bị báo lỗi trùng hoặc gợi ý sai. Cách sửa: vào Extensions, gõ @installed vetur, bấm Uninstall, chỉ giữ Vue (Official).

Chọn phải extension "vue" bị gạch ngang

Khi tìm "Vue", các mục có tên bị gạch ngang và biểu tượng tam giác vàng là extension đã bị đánh dấu ngừng phát triển (deprecated). Trang chi tiết của chúng ghi rõ This extension is deprecated và chỉ sang extension khác. Nút Install của chúng cũng bị làm mờ, các bạn bỏ qua.

Gõ "code ." báo không nhận lệnh

Trên Windows, lỗi 'code' is not recognized thường do lúc cài bỏ tích Add to PATH, hoặc terminal được mở từ trước khi cài. Các bạn đóng hết cửa sổ terminal và VS Code rồi mở lại. Nếu vẫn lỗi, chạy lại bộ cài và tích Add to PATH, hoặc dùng File → Open Folder thay cho lệnh.

Lưu file mà code không tự format

Kiểm tra ba chỗ: góc phải thanh trạng thái có chữ Prettier với dấu tích (bấm vào để xem log nếu có dấu cảnh báo); Editor: Format On Save đã bật; Editor: Default Formatter là Prettier. Ngoài ra, nếu project đang ở Restricted Mode (bước 9) thì cài đặt trong .vscode/settings.json không được áp dụng.

npm báo lỗi phiên bản Node khi tạo hoặc chạy project

Project tạo bằng create-vue 3.24.0 ghi yêu cầu Node ^22.18.0 || >=24.12.0. Với Node quá cũ (ví dụ Node 18), npm có thể in cảnh báo EBADENGINE khi cài gói và Vite có thể báo lỗi khi chạy. Cài lại Node bản LTS mới nhất, đóng và mở lại VS Code rồi chạy node -v để kiểm tra.

Câu hỏi thường gặp

Vue (Official) và Volar có phải là một không?

Có. Vue (Official) chính là Volar sau khi đổi tên, mã định danh vẫn là Vue.volar. Nếu đọc bài cũ thấy bảo cài "Volar" thì các bạn cài Vue (Official).

Có cần cài thêm extension snippets như Vue 3 Snippets không?

Không bắt buộc. Vue (Official) đã gợi ý thẻ, prop, directive như v-model, v-for. Snippets chỉ giúp gõ nhanh khung component, các bạn cài khi đã quen.

Dùng TypeScript thì có cần extension khác không?

Không. Vue (Official) hỗ trợ TypeScript trong file .vue. Lúc tạo project ở bước 8, chọn Yes cho câu Use TypeScript? là đủ.

ESLint và Prettier có bị "đánh nhau" không?

Với project tạo bằng create-vue thì không, vì file eslint.config.js đã có eslint-config-prettier để tắt các quy tắc định dạng trùng với Prettier. ESLint lo bắt lỗi logic, Prettier lo trình bày.

Máy yếu thì VS Code có chạy nổi không?

VS Code nhẹ hơn nhiều so với các IDE lớn. Nếu thấy chậm, các bạn tắt (Disable) những extension không dùng tới, nhất là các extension của ngôn ngữ khác.

Nguồn tham khảo

• Trang tải Visual Studio Code
• Vue (Official) trên Visual Studio Marketplace
• ESLint trên Visual Studio Marketplace
• Prettier - Code formatter trên Visual Studio Marketplace
• Vue.js Quick Start (create-vue)
• Vue.js Tooling: IDE Support
• VS Code Workspace Trust

Ảnh chụp và thử nghiệm ngày 09/11/2026.