VS Code Extensions: Những Extension Không Thể Thiếu Cho Developer
Tổng hợp các VS Code extension nâng cao năng suất lập trình
VS Code Extensions: Những Extension Không Thể Thiếu Cho Developer
Visual Studio Code là một trong những code editor phổ biến nhất hiện nay. Sức mạnh của nó đến từ hệ sinh thái extensions phong phú. Dưới đây là những extension không thể thiếu cho developer.
Productivity Extensions
1. GitLens
GitLens giúp bạn hiểu code history tốt hơn:
- Git blame: Xem ai viết đoạn code này
- Code lens: Hiển thị commit history inline
- File history: Xem toàn bộ history của file
// Sau khi cài GitLens, bạn sẽ thấy:
// John Doe, 2 days ago • Fixed bug in user authentication
function authenticateUser(username, password) {
// Implementation
}2. Prettier
Code formatter tự động:
// .prettierrc
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}3. Auto Rename Tag
Tự động rename paired tags trong HTML/XML:
<!-- Khi bạn rename opening tag -->
<div class="container">
<h1>Hello World</h1>
</div>
<!-- Closing tag sẽ tự động rename theo -->
<section class="container">
<h1>Hello World</h1>
</section>Language Support
4. ESLint
Linting cho JavaScript/TypeScript:
// .eslintrc.json
{
"extends": ["eslint:recommended", "@typescript-eslint/recommended"],
"rules": {
"no-unused-vars": "error",
"prefer-const": "warn"
}
}5. Python
Full Python support với:
- IntelliSense
- Linting
- Debugging
- Code navigation
- Jupyter notebook support
6. Docker
Docker extension cung cấp:
- Dockerfile syntax highlighting
- Docker Compose support
- Container management
- Image browsing
# Syntax highlighting và IntelliSense
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]Debugging và Testing
7. Thunder Client
REST API client nhẹ nhàng thay thế Postman:
GET http://localhost:3000/api/users
Headers: Authorization: Bearer token
Tests:
- Status: 200
- Body contains: users array8. Live Server
Local development server với live reload:
<!-- Chỉ cần click Go Live -->
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Auto reload khi bạn save!</h1>
</body>
</html>Themes và Icons
9. Material Theme
Beautiful Material Design themes:
- Material Theme Ocean
- Material Theme Palenight
- Material Theme Darker
10. Material Icon Theme
File icons đẹp mắt:
📁 src/
📄 app.js (Node.js icon)
📄 styles.css (CSS icon)
📄 index.html (HTML icon)
📄 config.json (JSON icon)Database và Tools
11. MongoDB for VS Code
MongoDB management trong VS Code:
// Query MongoDB trực tiếp
db.users.find({ age: { $gte: 18 } })
.sort({ createdAt: -1 })
.limit(10);12. REST Client
Gọi HTTP requests từ file .http:
### GET Request
GET https://api.example.com/users
Authorization: Bearer {{token}}
### POST Request
POST https://api.example.com/users
Content-Type: application/json
{
"name": "John Doe",
"email": "john@example.com"
}Settings Recommendations
// settings.json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"workbench.colorTheme": "Material Theme Ocean",
"workbench.iconTheme": "material-icon-theme"
}Kết luận
Những extension này sẽ giúp bạn:
- Tăng productivity đáng kể
- Viết code chất lượng cao hơn
- Debug và test dễ dàng hơn
- Có trải nghiệm coding tốt hơn
Bài viết này được cập nhật thường xuyên. Check lại để khám phá những extension mới nhất!