Thủ Thuật Visual Studio Code / 2023 / Top 20 # Xem Nhiều Nhất & Mới Nhất 11/2022 # Top View | Globaltraining.edu.vn

Mẹo Và Thủ Thuật Visual Studio Code / 2023

Màn hình giới thiệu của Visual Studio

Màn hình chứa bảng lệnh có sẵn mà bạn cần

Default keyboard shortcuts (phím tắt mặc định)

Tất cả lệnh nằm trong Command Palette đều có sự liên kết ràng buộc với key (nếu nó tồn tại). Nếu bạn quên một lệnh nào đó, có thể dùng Command Palette để tìm lệnh bạn cần.

Bảng tổng hợp phím tắt trong Visual Studio

Gõ các lệnh edit và term sau khoảng trắng sẽ hiển thị một danh sách được thả xuống

Điều hướng giữa các tệp được mở gần đây

Lặp lại phím tắt Quick Open để xoay vòng nhanh giữa các tệp được mở gần đây.

Mở nhiều file từ Quick Open

Bạn có thể mở nhiều file từ Quick Open bằng cách nhấn phím mũi tên bên phải. Thao tác này sẽ mở file được chọn trong nền và bạn có thể tiếp tục chọn file từ Quick Open.

Điều hướng giữa các Folder được mở gần đây và không gian làm việc(workspaces)

Open Recent

Code VS (Visual Studio) có giao diện dòng lệnh mạnh mẽ (CLI) cho phép bạn tùy chỉnh cách khởi chạy trình chỉnh sửa để hỗ trợ các tình huống khác nhau.

# open code with current directory code . # open the current directory in the most recently used code window code -r . # create a new window code -n # change the language code --locale=es # open diff editor code --goto package.json:10:5 # see help options code --help # disable all extensions code --disable-extensions .

Các file cụ thể của workspaces nằm trong một .vscode folder root.

Ví dụ: tasks.json đối với Task Runner và launch.json cho debugger.

Lỗi và cảnh báo

Phím tắt: Ctrl + Shift + M

Nhanh chóng nhảy đến phần cảnh báo và lỗi bên trong project

Bạn có thể lọc các vấn đề theo loại (‘errors’, ‘warnings’) hoặc khớp văn bản.

Thủ thuật – Change language mode (Chế độ thay đổi ngôn ngữ)

Nếu bạn muốn duy trì ngôn ngữ mới cho file đó, bạn có thể sử dụng lệnh Configure File Association for liên kết để mở rộng file hiện tại với ngôn ngữ đã được cài.

Có rất nhiều điều bạn có thể làm để tùy chỉnh code VS.

Thay đổi theme

Thay đổi phím tắt

Điều chỉnh cài đặt

Thêm xác thực JSON

Tạo đoạn trích

Cài đặt tiện ích mở rộng

Thay đổi theme

Keymaps

Tùy chỉnh phím tắt của bạn

Phím tắt: Ctrl + K Ctrl + S

Bạn có thể tìm kiếm các phím tắt và thêm các tổ hợp phím của riêng bạn vào file keybindings.json.

Điều chỉnh cài đặt của bạn

Theo mặc định, VS hiển thị trình chỉnh sửa Settings, bạn có thể tìm thấy các cài đặt được liệt kê bên dưới trong thanh tìm kiếm, nhưng vẫn có thể chỉnh sửa settings.json file bên dưới bằng cách sử dụng lệnh Open Settings (JSON) hoặc bằng cách thay đổi trình chỉnh sửa cài đặt mặc định của mình bằng cài đặt workbench.settings.editor.

Mở User setting settings.json

Phím tắt: Ctrl +,

Thay đổi phông chữ của các thành phần UI khác nhau

"editor.fontSize": 18, "terminal.integrated.fontSize": 14, "[Log]": { "editor.fontSize": 15 }

Thay đổi mức thu phỏng

"window.zoomLevel": 5

Phông chữ

"editor.fontFamily": "Fira Code", "editor.fontLigatures": true

Tips: Bạn sẽ cần cài đặt phông chữ hỗ trợ chữ ghép chứ. FiraCode là phông chữ phổ biến trong nhóm VS Code Auto Save

"files.autoSave": "afterDelay"

Format on save

"editor.formatOnSave": true

Format on paste

"editor.formatOnPaste": true

Change the size of Tab characters Spaces or Tabs

"editor.insertSpaces": true

Render whitespace

"editor.renderWhitespace": "all"

Các ký tự Whitespaces được hiển thị theo mặc định trong lựa chọn văn bản

Ignore files/folders (bỏ qua các file/folder)

Xóa các file/folder khỏi cửa sổ soạn thảo

"files.exclude": { "somefolder/": true, "somefile": true }

Xóa các file/folder khỏi kết quả tìm kiếm

"search.exclude": { "someFolder/": true, "somefile": true }

Và nhiều tùy chỉnh khác

Cài đặt ngôn ngữ cụ thể

Đối với các cài đặt mà bạn chỉ muốn cho các ngôn ngữ cụ thể, bạn có thể cài đặt theo mã định danh ngôn ngữ. Bạn có thể tìm thấy danh sách các id ngôn ngữ thường được sử dụng trong tham chiếu Định danh ngôn ngữ.

"[languageid]": { }

Tips: Bạn cũng có thể tạo cài đặt cụ thể cho ngôn ngữ bằng lệnh Configure Language Specific Settings.

Thêm xác thực JSON

Được bật theo mặc định cho nhiều loại tệp. Tạo lược đồ và xác nhận của riêng bạn trong settings.json

"json.schemas": [ { "fileMatch": [ "/bower.json" ], "url": "https://json.schemastore.org/bower" } ]

hoặc cho một lược đồ được xác định trong không gian làm việc của bạn

"json.schemas": [ { "fileMatch": [ "/foo.json" ], "url": "./myschema.json" } ]

hoặc một lược đồ tùy chỉnh

"json.schemas": [ { "fileMatch": [ "/.myconfig" ], "schema": { "type": "object", "properties": { "name" : { "type": "string", } } } },

Tiện ích mở rộng

Phím tắt: Ctrl + Shift + X

Tìm extensions

Tìm kiếm bên trong VS Code trong giao diện Extensions.

Lời khuyên tiện ích mở rộng

Danh sách cộng động: awesome-vscode

Cài đặt tiện ích mở rộng

Trong chế độ xem Extensions, bạn có thể tìm kiếm thông qua thanh tìm kiếm hoặc nhấp vào nút More Actions (…) để lọc và sắp xếp số lượt cài đặt.

Extensions được gợi ý

Trong giao diện Extensions, nhấp vào Show Recommended Extensions trong More Actions (…)

Tạo extension của riêng bạn

Bạn có quan tâm đến việc tạo phần mở rộng của riêng bạn? Bạn có thể tìm hiểu các thực hiện trong Extension API documentation, và tài liệu đặc biệt documentation on contribution points.

Files và folders

Tích hợp thiết bị đầu cuối

Thanh bên

Phím tắt: Ctrl + B

Chuyển đổi Panel

Phím tắt: Ctrl + J

Zen Mode

Phím tắt: Ctrl + KZ

Nhấn Esc 2 lần để thoát Zen Mode

Chỉnh sửa Side by side

Phím tắt: Ctrl+

Bạn cũng có thể ké/thả các nhóm editor giữa các nhóm.

Chuyển đổi giữa các editor

Phím tắt: Ctrl + 1, Ctrl + 2, Ctrl + 3

Di chuyển cửa sổ Explorer

Phím tắt: Ctrl + Shift + E

Mở hoặc tạo tệp

Đóng folder đang mở

Phím tắt: Ctrl + F4

Lịch sử điều hướng

Liên kết tệp tin

Tạo các liên kết ngôn ngữ cho các tệp không được phát hiện chính xác. Ví dụ: nhiều tệp cấu hình có phần mở rộng tập tùy chỉnh thực sự là JSON

"files.associations": { ".database": "json" }

Ngăn chặn viết lỗi

VS code sẽ hiển thị cho bạn một thông báo lỗi khi bạn cố lưu một tệp không thể lưu được vì nó đã thay đổi trên ổ đĩa. Khối VS code lưu tệp để ngăn các thay đổi ghi đè đã được thực hiện bên ngoài trình chỉnh sửa.

Để giải quyết xung đột, nhấp vào hành động Compare trong thông báo lỗi để mở trình chỉnh sửa khác biệt sẽ hiển thị cho bạn nội dung của tệp trên đĩa (bên trái) so với nội dung trong VS code (bên phải)

Sử dụng các hành động trong thanh công cụ biên tập để giải quyết xung đột. Bạn có thể Accept các thay đổi của mình và do đó ghi đè mọi thay đổi trên ổ đĩa hoặc Revert về phiên bản trên ổ đĩa. Revert có nghĩa là những thay đổi của bạn sẽ bị mất.

Lưu ý: Tệp sẽ vẫn bị lỗi và không thể lưu cho đến khi bạn chọn một trong hai hành động để giải quyết xung đột.

Tips: Bạn có thể thấy các extension key map được đề xuất trong chế độ xem extension với Ctrl + K Ctrl + M để lọc tìm kiếm @recommended:keymaps.

Lựa chọn nhiều con trỏ

Để đặt con trỏ ở trên hoặc dưới vị trí hiện tại, hãy sử dụng:

Bạn có thể thêm con trỏ bổ sung cho tất cả các lần xuất hiện của các lựa chọn hiện tại với phím tắt Ctrl + Shift + L.

Lưu ý: Bạn cũng có thể thay đổi công cụ sửa đổi thành Ctrl / Cmd để áp dụng nhiều con trỏ với editor.multiCursorModifier setting . Xem Công cụ Multi-cursor Modifier để biết chi tiết.

Nếu bạn không muốn thêm tất cả các lần xuất hiện của lựa chọn hiện tại, bạn có thể sử dụng Ctrl + D thay thế. Điều này chỉ chọn lần xuất hiện tiếp theo sau lần bạn chọn để bạn có thể thêm từng lựa chọn một.

Column (box) selection

Bạn có thể chọn các khối văn bản bằng cách giữ Shift + Alt ( Shift + Option trên macOS) trong khi bạn kéo chuột. Một con trỏ riêng sẽ được thêm vào cuối mỗi dòng được chọn.

Bạn cũng có thể sử dụng phím tắt để kích hoạt lựa chọn cột.

{ "editor.rulers": [20, 40, 60] }

Vertical rulers

Nhấn phím Alt cho phép cuộn nhanh trong trình chỉnh sửa và Explorers. Theo mặc định, cuộn nhanh sử dụng hệ số nhân tốc độ 5X nhưng bạn có thể điều khiển hệ số nhân với cài đặt Editor: Fast Scroll Sens Sens (editor.fastScrollSensitivity)

Sao chép dòng lên / xuống

Di chuyển dòng lên và xuống

Shrink / expand selection

Go to Symbol in File

Phím tắt: Ctrl + Shift + O

Bạn có thể nhóm các biểu tượng theo loại bằng cách thêm dấu hai chấm, @: .

Go to Symbol in Workspace

Phím tắt: Ctrl + T

Outline view

Khung nhìn Outline trong File Explorer (mặc định được thu gọn ở phía dưới) hiển thị cho bạn các ký hiệu của file hiện đang mở.

Điều hướng đến một dòng cụ thể

Phím tắt: Ctrl + G

Hoàn tác vị trí con trỏ

Phím tắt: Ctrl + U

Cắt khoảng trắng dấu

Phím tắt: Ctrl + K Ctrl + X

Chuyển đổi lệnh văn bản

Bạn có thể thay đổi văn bản đã chọn thành chữ hoa, chữ thường và trường hợp tiêu đề bằng các lệnh Transform từ Command Palette.

Định dạng mã

Mã nguồn được chọn hiện tại: Ctrl + K Ctrl + F

Toàn bộ định dạng tài liệu: Shift + Alt + F

Code formatting

Bạn cũng có thể fold / unfold tất cả các vùng trong trình chỉnh sửa bằng Fold All (Ctrl + K Ctrl + 0) và Unfold All (Ctrl + K Ctrl + J).

Chọn dòng hiện tại

Phím tắt: Ctrl + L

Điều hướng đến đầu và cuối tệp

Mở xem trước Markdown

Trong tệp Markdown, sử dụng

Phím tắt: Ctrl + Shift + V

Chỉnh sửa và xem trước Markdown

Trong tệp Markdown, sử dụng

Phím tắt: Ctrl + K V

Bản xem trước và trình chỉnh sửa sẽ đồng bộ hóa với cuộn của bạn trong cả hai chế độ xem.

IntelliSense

Ctrl + Space để kích hoạt Suggestions widget.

Bạn có thể xem các phương thức có sẵn, gợi ý tham số, tài liệu ngắn, v.v.

Peek

Chọn một biểu tượng sau đó nhập Alt + F12 . Ngoài ra, bạn có thể sử dụng menu ngữ cảnh.

Go to Definition

Go to References

Chọn một biểu tượng sau đó nhập Shift + F12. Ngoài ra, bạn có thể sử dụng menu ngữ cảnh.

Thủ thuật – Rename Symbol

Chọn một biểu tượng rồi nhấn F2. Bạn cũng có thể sử dụng menu ngữ cảnh để thao tác.

Thủ thuật – tìm kiếm và sửa đổi

Bên cạnh việc tìm kiếm và thay thế các biểu thức, bạn cũng có thể tìm kiếm và sử dụng lại các phần của những gì đã khớp, sử dụng các biểu thức thông thường với các nhóm capturing. Bật biểu thức chính quy trong hộp tìm kiếm bằng cách nhấp vào nút Use Regular Expression .* và sau đó viết biểu thức chính quy và sử dụng dấu ngoặc đơn để xác định nhóm. Sau đó bạn có thể tái sử dụng các nội dung phù hợp trong mỗi nhóm bằng cách sử dụng $1, $2 vv trong Replace field.

.eslintrc.json

Cài đặt Extension ESLint . Cấu hình linting theo cách bạn muốn. Tham khảo ESLint specification để biết chi tiết về các quy tắc và tùy chọn linting..

Đây là cấu hình để sử dụng ES6.

{ "env": { "browser": true, "commonjs": true, "es6": true, "node": true }, "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true, "classes": true, "defaultParams": true } }, "rules": { "no-const-assign": 1, "no-extra-semi": 0, "semi": 0, "no-fallthrough": 0, "no-empty": 0, "no-mixed-spaces-and-tabs": 0, "no-redeclare": 0, "no-this-before-super": 1, "no-undef": 1, "no-unreachable": 1, "no-use-before-define": 0, "constructor-super": 1, "curly": 0, "eqeqeq": 0, "func-names": 0, "valid-typeof": 1 } }

Gói .json

Xem IntelliSense cho package.json tệp của bạn.

Cú pháp Emmet

Support for Emmet syntax

Snippets

Tạo snipptes tùy chỉnh

"create component": { "prefix": "component", "body": [ "class $1 extends React.Component {", "", "trender() {", "ttreturn ($2);", "t}", "", "}" ] },

Diff

Chọn tệp để mở từ khung Source Control.

Thủ thuật tích hợp Git

Phím tắt: Ctrl + Shift + G

Tích hợp Git đi kèm với VS Code “out-of-the-box”. Bạn có thể cài đặt các nhà cung cấp SCM khác từ Marketplace. Phần này mô tả tích hợp Git nhưng phần lớn giao diện người dùng và cử chỉ được chia sẻ bởi các nhà cung cấp SCM khác.

Khác biệt

Từ khung nhìn Source Control, chọn mở một tệp để khác.

Hoặc, nhấp vào nút Open changes ở góc trên bên phải để tìm tệp mở hiện tại.

Thủ thuật chuyển đổi Inline View

Chế độ xem mặc định cho diffs là chế độ xem side by side .

Chuyển đổi Inline View bằng cách nhấp vào nút More Action(…) ở trên cùng bên phải và chọn Toggle Inline View.

Nếu bạn thích chế độ Inline View, bạn có thể đặt “diffEditor.renderSideBySide”: false.

Thủ thuật xem lại khung

Điều hướng qua các khác biệt với F7 và Shift + F7. Điều này sẽ trình bày chúng trong một định dạng patch thống nhất. Các dòng có thể được điều hướng bằng các phím mũi tên và nhấn Enter sẽ nhảy trở lại trong trình chỉnh sửa khác và dòng đã chọn.

Thủ thuật – chỉnh sửa các thay đổi đang chờ xử lý

Bạn có thể chỉnh sửa trực tiếp trong các thay đổi đang chờ xử lý của chế độ diff view.

Branches

Dễ dàng chuyển đổi giữa các nhánh Git thông qua Status Bar.

Staging

Thủ thuật – thay đổi Staging File

Di chuột qua số lượng tệp và nhấp vào nút dấu cộng.

Nhấp vào nút trừ để thay đổi giai đoạn.

Stage selected

Stage selected một phần của fle bằng cách chọn file đó (sử dụng phím mũi tên Lên) sau đó chọn Stage Selected Ranges từ Command Palette.

Undo last commit

Nhấp vào nút (…) và sau đó chọn Undo last commit để hoàn tác commit trước đó. Các thay đổi được thêm vào phần Staged Changes.

See Git output

VS Code giúp dễ dàng xem các lệnh Git đang thực sự chạy. Điều này hữu ích khi học Git hoặc gỡ lỗi một vấn đề kiểm soát nguồn khó khăn.

Sử dụng lệnh Toggle Output ( Ctrl + Shift + U) và chọn Git trong trình đơn thả xuống.

Gutter indicators

Thủ thuật – giải quyết vấn đề xung đột

Bạn có thể giải quyết xung đột hợp nhất với CodeLens nội tuyến cho phép bạn Accept Current Change, Accept Incoming Change, Accept Both Changes, and Compare Changes.

Đặt VS Code làm công cụ hợp nhất mặc định

git config --global chúng tôi vscode git config --global chúng tôi 'code --wait $MERGED'

Đặt VS Code làm diff tool mặc định

git config --global chúng tôi vscode git config --global chúng tôi 'code --wait --diff $LOCAL $REMOTE'

Debugging

Cấu hình trình Debugging

Breakpoints and stepping through

Đặt breakpoints bên cạnh số dòng. Điều hướng về phía trước Debug widget.

Kiểm tra dữ liệu

Kiểm tra các biến trong bảng Run và trong Panel control.

Inline values

Bạn có thể đặt “debug.inlineValues”: true để xem các giá trị biến trong inline debugger. Tính năng này có thể tốn thời gian và có thể làm chậm công việc, do đó mặc định tính năng này bị tắt.

Logpoints

Logpoints hoạt động giống như các điểm dừng nhưng thay vì tạm dừng debugger khi chúng bị tấn công, chúng sẽ ghi thông báo vào panel control. Thủ thuật này đặc biệt hữu ích cho việc ghi nhật ký trong khi gỡ lỗi các máy chủ không thể sửa đổi hoặc tạm dừng.

Thêm một Logpoints bằng lệnh Add Logpoint bên trái trình soạn thảo và nó sẽ được hiển thị dưới dạng biểu tượng hình “diamond”. Log messages là văn bản thuần túy nhưng có thể bao gồm các biểu thức được đánh giá trong dấu ngoặc nhọn (‘{}’).

Task runner

Auto detect tasks

Chọn Terminal từ menu cấp cao nhất, chạy lệnh Configure Tasks, sau đó chọn loại tác vụ bạn muốn chạy. Điều này sẽ tạo ra một tasks.json tập tin với nội dung như sau. Xem tài liệu để biết thêm chi tiết.

{ "version": "2.0.0", "tasks": [ { "type": "npm", "script": "install", "group": { "kind": "build", "isDefault": true } } ] }

Đôi khi có vấn đề với thế hệ tự động. Kiểm tra các tài liệu để làm cho mọi thứ hoạt động đúng.

Thủ thuật – chạy các tác vụ từ menu Terminal

Chọn Terminal từ menu cấp cao nhất, chạy lệnh Run Task và chọn tác vụ bạn muốn chạy. Chấm dứt tác vụ đang chạy bằng cách chạy lệnh Terminate Task

Xác định các phím tắt cho các tác vụ

Bạn có thể xác định một phím tắt cho bất kỳ tác vụ. Từ Command Palette ( Ctrl + Shift + P), chọn Preferences: Open Keyboard Shortcuts File , liên kết phím tắt mong muốn với workbench.action.tasks.runTask lệnh và xác định Task là args.

Ví dụ: để liên kết Ctrl + H với Run tests tác vụ, hãy thêm vào như sau:

{ "key": "ctrl+h", "command": "workbench.action.tasks.runTask", "args": "Run tests" }

Chạy npm scripts dưới dạng tasks from the explorer

Với cài đặt npm.enableScriptExplorer, bạn có thể kích hoạt Explorer hiển thị các tập lệnh được xác định trong workspace của bạn.

Từ Explorer, bạn có thể mở một script trong trình soạn thảo, chạy nó như một tác vụ và khởi chạy nó với trình gỡ lỗi nút (khi tập lệnh xác định tùy chọn gỡ lỗi như thế nào -inspect-brk). Hành động mặc định khi nhấp là để mở tập lệnh. Để chạy tập lệnh chỉ bằng một cú nhấp chuột, hãy đặt npm.scriptExplorerAction thành “run”. Sử dụng cài đặt npm.exclude để loại trừ các tập lệnh trong package.json các tệp có trong các thư mục cụ thể.

Với cài đặt npm.enableRunFromFolder, bạn có thể kích hoạt để chạy các tập lệnh npm từ menu ngữ cảnh của Explorer cho một thư mục. Cài đặt cho phép lệnh NPM Script in Folder… khi thư mục được chọn. Lệnh hiển thị danh sách Quick Pick các tập lệnh npm có trong thư mục này và bạn có thể chọn tập lệnh sẽ được thực thi dưới dạng task.

Portable mode (Chế độ di động)

VS Code có Portable mode cho phép bạn giữ các cài đặt và dữ liệu ở cùng vị trí với cài đặt của bạn, ví dụ: trên ổ USB.

Insiders builds (bản thử nghiệm)

Dành cho người dùng sớm: các bản insiders có các thay đổi để người dùng và người viết được dùng thử

Bản dựng thường xuyên: Bản cập nhật mỗi ngày với các tính năng sửa lỗi mới nhất.

Cài đặt song song: Người dùng nội bộ cài đặt bên cạnh bản ổn định cho phép bạn sử dụng độc lập.

Những Thủ Thuật Sử Dụng Visual Studio Code Mà Dev Nên Biết / 2023

Như các bạn đã biết, Visual Studio Code là một text editor khá phổ biến và được rất nhiều dev sử dụng . Cá nhân mình cũng sử dụng từ khi mới bập bẹ tập code , ấy vậy mà còn quá nhiều tiện ích và thủ thuật đơn giản nhưng lại tối ưu kha khá thời gian cũng như công sức . Vậy nên hôm nay mình xin phép tổng hợp một số tricks hay tính năng cần thiết mà developer nên biết để việc code hiệu quả hơn. :v

Zen mode là chế độ giúp bạn tránh phân tâm trong quá trình code, khi bật Zen Mode, tất cả những phần dư thừa như sidebar hay tool box đều được loại bỏ, chỉ để lại màn hình code ở chính giữa giúp bạn tập chung hơn.

Khi bạn làm một việc cần sử dụng đồng thời 2 hoặc nhiều file cùng lúc, hoặc đơn giản muốn kiểm tra sự thay đổi , giống hay khác nhau giữa 2 files thì việc chuyển qua lại các tab khá là phiền nhiễu, mất thời gian, đôi khi còn xảy ra nhầm lẫn.

Visual Code đã giúp ta giải quyết vấn đề này bằng cách cho phép ta chia màn hình thành 2 hoặc nhiều hơn để phục vụ việc multitasking.

Command Palette cho phép bạn truy cập tới các commands của visual code chỉ bằng một vài phím tắt.

Để mở Command Palette , bạn cần gõ tổ hợp phím Ctrl + Shift + P, tiếp đến bạn có thể gõ những keywords cần thiết để tìm kiếm commands danh sách commands.

Đây là tiện ích khá thú vị của Visual Code, cho phép bạn chỉnh sửa giá trị mặc định của editor hoặc một extentions bất kì bạn đã cài đặt.

Đầu tiên truy cập Command Palette như mình đã nói ở trên và chọn Preferences: Open Default Settings (JSON). (đây là setting mặc định của VS)

Tiếp tục truy cập Command Palette và chọn Preferences: Open Settings (JSON) (Đây là phần setting chỉnh sửa ) và kéo tab qua góc phải màn hình để chia đôi màn xem cho dễ.

Như hình trên là mình đã chỉnh sửa setting của php-cs-fixer ( một extention giúp chỉnh sửa convention code php theo đúng chuẩn), cụ thể là :

"php-cs-fixer.onsave": true : tự động chỉnh code cho đúng convention khi save

"php-cs-fixer.formatHtml": true : tùy chọn tự động format code html

… vân vân và mây mây

Phím tắt giúp đỡ ta rất nhiều trong việc lập trình, giảm nhiều thời gian thao tác và tạo cảm giác tiện lợi cho người sử dụng hơn. Đầu tiên, bạn có thể truy cập danh sách các phím tắt bằng cách “sử dụng” phím tắt Ctrl + K + S

Một số phím tắt cần thiết cho developer:

Ctrl + Space : Phím tắt này giúp bạn hoàn thành code một cách nhanh gọn hơn, khi sử dụng, một bảng lựa chọn sẽ hiển thị để giúp bạn hoàn thành mẩu code đang dở, rất thích hợp cho những người mới bắt đầu khi không nhớ hàm hoặc “nhớ mang máng”

Ctrl + ? : Comment dòng code hoặc đoạn code theo ý muốn

Ctrl + Shift + F : Tìm kiếm trên tất cả các files

Ctrl + D : Tìm trong file một đoạn text bất kì và thao tác với chúng

Ctrl + Shift + T : Mở lại những tab đã đóng

Ctrl + Alt + R : Reload lại visual code

Ctrl + Backspace : Xóa từ vừa mới nhập, thật ra đây là tính năng bạn có thể áp dụng ở bất cứ đâu.

Ctrl + Shift + Right/Left Arrow : Bôi đen theo đơn vị là chữ (mặc định là theo kí tự )

Ctrl + Shift + D : Nhân đôi dòng chỉ định

Ctrl + Home : Di chuyển con trỏ chuột tới đầu file

Ctrl + End : di chuyển con trỏ chuột tới cuối file

Alt + Up/Down Arrow : Di chuyển dòng lên hoặc xuống

All Rights Reserved

Share Full Code Blogger Template Của Blog Thủ Thuật Win 10 Version 2 / 2023

Lần trước mình có share cho các bạn template của Blog Windows 10 tạm gọi là version 1, tuy nhiên mình vẫn thấy giao diện chưa được đẹp lắm vẫn còn một số chi tiết thừa làm giảm tốc độ tải trang do vậy tôi đã thiết kế lại giao diện và loại bỏ những chi tiết thừa để tạo nên một template chuẩn SEO đẹp về thiết kế và tăng tốc độ tải trang.

Lấy ý tưởng từ giao diện của mẫu Blog mặc định Contempo và cập nhật theo xu hướng Material Design. Bản cập nhật v4 vẫn dựa theo thiết kế của bản v3 nhưng được cập nhật thêm một vài tính năng mới như menu trên giao diện điện thoại, thay đổi khung tìm kiếm mới, cập nhật khung nhận xét mới nhất của mẫu Contempo và thêm các nút chèn biểu tượng, code, ảnh và video, thay đổi style của phần nội dung nhận xét. Sử dụng material icon….

Danh sách cập nhật mới được thêm vào:

Nếu bạn nào đang sử dụng giao diện cũ của Blog mình có thể tải về cập nhật, lưu ý mình chỉ gửi link qua email cho bạn, nếu bạn nào muốn lấy thì để lại email bên dưới. Mình không giới thiệu nhiều chỉ viết hướng dẫn cài đặt. Trước hết bạn nên sao lưu mẫu cũ của mình lại trước khi thay thế mẫu mới. Một số bạn khi áp dụng mẫu vào có hiện tượng load chậm, bị giựt không chỉnh sửa được, vấn đề này là do blog của các bạn chưa có data bài viết. Các bạn nên có sẵn hơn 10 bài viết cho blog mình.

2. Thay Logo, mô tả, từ khóa, Facebook ID

Thay từ khóa trong bài viết tìm kiếm keyword_collect thay bằng cụm từ khóa theo ý bạn, từ khóa sẽ xuất hiện bên dưới bài viết nếu trong bài viết bạn soạn thảo có từ hoặc cụm từ giống như bạn đã chèn trong template.

Do mình thiết kế hai menu khác nhau cho giao diện máy tính và điện thoại cho nên các bạn phải thay cả hai phần. Để thay menu cho máy tính tìm từ khóa main-nav còn thay menu cho điện thoại tìm từ khóa toggleMenu ripple

6. Thêm trang chuyển hướng ra ngoài

Thay dòng text theo ý bạn và địa chỉ blog của bạn. Khi viết bài muốn chèn link ngoài ví dụ link http://ift.tt/2y0AD85 qua trang chuyển hướng thì bạn chèn như sau:

http://ift.tt/2xWTW4q

Trường hợp bạn muốn làm nổi bật nút giống như nút Demo ở trên thì thêm class=’down’ trong link, ví dụ:

8. Thêm trang điều khoản khi tải file

Thay dòng text theo ý bạn. Khi viết bài muốn chèn link vào trang điều khoản ví dụ muốn chèn link tải http://ift.tt/2y0AEsF các bạn chèn theo mẫu sau:

http://ift.tt/2xXL9z7

Trường hợp bạn muốn làm nổi bật nút giống như nút Demo ở trên thì thêm class=’down’ trong link. Xem ví dụ:

9. Chèn link tải vào hộp popup

Tương tự như mục 8 chỉ khác ở trên là trang điều khoản có thể áp dụng cho nhiều link tải trong một bài viết, còn trong bài viết chỉ có một link tải duy nhất thì các bạn nên chèn vào hộp popup. Lấy ví dụ các bạn muốn chèn link tải http://ift.tt/2xYrvke vào chữ iOS 11 theme thì trong bài viết các bạn chuyển qua khung soạn thảo HTML chèn đoạn code dưới cùng bài viết

Thay dòng text theo ý bạn, để chèn link vào chữ iOS 11 theme ta chèn như sau:

Xem ví dụ:

10. Thêm bài đăng gần đây theo nhãn dưới chân trang

Dưới chân trang mình thêm sẵn 4 tiện ích HTML/Javascript trong đó đã bào gồm đoạn script bạn cần vào Bố cục chỉnh sửa lại tiện ích thay bằng nhẵn của blog bạn, Ví dụ về đoạn script cho nhãn Tin tức

Bạn cần thay những chỗ mình để in đậm. Trường hợp bạn muốn thêm tiện ích này ở sidebar thì bạn chèn đoạn script với nội dung sau:

11. Thay uri của blog sử dụng cho tiện ích nhận bài mới qua email

Khi viết bài phải sử dụng dấu ngắt nháy trên thanh công cụ soạn thảo sau 3 dòng mở bài trở lên. Hình ảnh khi chèn nếu là hình lớn để kích thước ban đầu. Nếu muốn chèn nội dụng vào khung thì khi soạn xong bài chuyển qua HTML chèn như sau:

13. Sử dụng Material icons và Font Awesome icons

Material Icons hay Google icons có thiết kế đẹp hơn của Font Awesome tuy nhiên về số lượng biểu tượng lại ít hơn Font Awesome cho nên bạn có thể sử dụng đồng thời cả hai theo sở thích của mình. Để thay Material icons truy cập liên kết http://ift.tt/1xrHiOS hoặc http://ift.tt/2eNdv6o còn thay Font Awesome icons truy cập http://ift.tt/16bVd5y. Bạn có thể thêm icons trực tiếp trong template hoặc trong bài viết. Lưu ý trong template đã chèn sẵn link thư viện icons của cả hai rồi cho nên bạn không phải thêm nữa.

14. Sử dụng biểu tượng cảm xúc trong nhận xét

Nếu bạn muốn chèn biểu tượng cảm xúc khác ngoài những biểu tượng đã có thì truy cập liên kết https://emoji.codes copy shortcode vào khung nhận xét.

Học Code Như Thế Nào Cho Tốt? / 2023

Xin tự giới thiệu mình là một lập trình viên có hơn 15 kinh nghiệm lập trình và 10 năm kinh nghiệm phát triển phần mềm. Thời cấp 3 và đại học, mình cũng từng có giải quốc gia và ACM/ICPC. Khi đi làm, đã trải qua các vị trí, từ lập trình viên, cho tới team lead, rồi kĩ sư giải pháp, kinh qua các sản phẩm phần mềm từ nhúng tới web, từ desktop tới mobile. Nói vậy ko phải để khoe, nói vậy chỉ để anh em có thêm niềm tin vào những kinh nghiệm mà mình muốn chia sẻ hôm nay. Bổ sung thông tin của mình ở đây Chàng Cuder đi yêu lập trình

Một số Đặc điểm nghề IT và lập trình

Về thị trường, mình dự đoán ngành IT vẫn phát triển mạnh, ít nhất là trong 5 tới 10 năm nữa. Hiện tại, theo 1 số báo cáo mà bạn dễ dàng tìm trên mạng, thì vẫn thiếu khoảng 500 000 nhân sự CNTT cho tới năm 2025. Đặc biệt, nhân sự CNTT cao cấp, nhiều năm kinh nghiệm thì mình thấy Việt Nam vẫn thiếu khá nhiều. Do ngành CNTT của nước mình vẫn còn non trẻ, số lượng người làm trong nghề chưa đủ lâu và nhiều, nên mình vẫn chủ yếu làm các thứ nhỏ, dễ. Chắc chắn rất ít thậm chí là không có những dự án lớn tầm vĩ mô và đông người dùng như,hay

Tính đa quốc gia, làm nghề IT và đặc biệt là lập trình thì có cơ hội làm đa quốc gia, xuyên lục địa là khá lớn. Kể cả ko đi nước ngoài, thì việc bạn làm từ xa trao đổi vs Tây qua internet cũng là khá lớn. Điều đó đồng nghĩa với việc, bạn cần phát triển về ngôn ngữ cũng như hiêu thêm văn hoá của các quốc gia khác (nếu bạn có cơ hội làm việc cùng họ)

Phẩm chất quan trọng để học code và nguyên tắc cần nhớ

Do một số đặc điểm về nghề bên trên, mình nghĩ 4 tính cách sau là quan trọng nhất:

Ham học: Do CNTT thay đổi liên tục nên để trở thành 1 coder giỏi, yêu cầu tiếp theo là bạn cần ham học. bạn vừa học xong kiến thức mà bạn cho là cần, thì lại có 1 mớ kiến thức mới tiếp theo.

Tự học: Tài liệu CNTT và lập trình muốn ngon thì chỉ có trên mạng và đa phần là tiếng Anh. Khi nó trở thành xu thế ở Việt Nam, thì ở nước ngoài đã là lạc hậu. Vậy nên bạn nên tự học nó thông qua internet, sẽ đc tiếp cận kiến thức, xu thế mới và đầy đủ

Cẩn thận: Coder thì nhiều ông code rất ẩu. Code xong để mặc thằng test. Những ông thi ACM thì đa phần cẩn thận, vì sai 1 TC thì đi tong cả bài. Nhưng Dev mà mình quen thì khá nhiều người làm rất ẩu, dẫn tới có khá nhiều bug vớ vẩn trong khi tích hợp. CodeLearn Learning ra đời yêu cầu các bạn làm hết testcase mới được điểm, chính là rèn bạn đức tính trên.

4 nguyên tắc nằm lòng:

Thực hành quan trọng hơn lý thuyết

Dự án quan trọng hơn đoạn mã: sau khi code những đoạn mã nhỏ, bạn nên chú trọng vào việc tạo ra 1 sản phẩm, module hoàn chỉnh.

Đồng đội quan trọng hơn một mình.

Một ngôn ngữ quan trọng hơn nhiều ngôn ngữ: không có ý nói nhiều ngôn ngữ là không tốt, nhưng ở thời điểm đầu tiên (dưới 3 năm kinh nghiệm và trừ khi bạn làm Dev fullstack) thì bạn nên học và hiểu sâu 1 ngôn ngữ.

Làm thế nào để học Code tốt?

Code hàng ngày: bài tập, dự án. Cá nhân mình kể cả hiện tại, ngày nào cũng vào phần luyện tập ở CodeLearn làm ít nhất 2 bài, và nếu có thêm thời gian thì code thêm một phần nào đó cho dự án CodeLearn (chứ ko phải toàn đi chém gió đâu)

Tự gỡ lỗi: nhiều bạn gặp lỗi 5 phút là bỏ cuộc và hỏi toán loạn. Khuyên bạn nên tự debug (bằng text hoặc bằng trình gỡ lỗi), bạn sẽ học được cực nhiều từ việc này

Chạy code mẫu và hiểu từng dòng: nhiều khi bạn copy cả đoạn code mẫu mà ko hiểu đc nội dung của từng đoạn nhỏ hay từng dòng. Khuyên bạn nên đọc hiểu, và xoá thử từng dòng để xem code thay đổi ra sao (nếu ko hiểu)

Code lại các sản phẩm: chọn 1 số sản phẩm, dự án mà bạn thích rồi làm lại nó. Đừng có mải mê với những đoạn code nho nhỏ không quá 100 dòng nữa

Hãy thử làm lại những game cơ bản như dò mìn, pikachu, sudoku, hãy làm thử những website có đầy đủ đăng nhập, xử lý dữ liệu và bán hàng như các trang thương mại điện tử, hay làm những ứng dụng trên windows đơn giản như notepad thử xem.

Thời đại học, năm 2 mình hoàn thiện game rắn săn mồi hoàn toàn bằng C++ (dù nó xấu dễ sợ, mình code mất 1 tuần). Tới năm 4, nhóm mình được thầy yêu cầu code lại các product như: notepad, file explore (quản lý file) và game cờ vua

Đọc sách lập trình: Sách là tinh hoa, đứng trên vai người khổng lồ, nhìn sẽ đúng hướng và đi xa hơn.

Lựa chọn ngôn ngữ: Tuỳ vào mục tiêu sản phẩm và định hướng nghề nghiệp, hãy chọn cho mình 1 ngôn ngữ phù hợp để phát triển, học hỏi lâu dài. Nếu muốn làm web thì đừng chọn C++. Nếu muốn làm nhúng hay mobile app thì đừng chọn PHP

Bảng bên dưới là danh sách các ngôn ngữ thông dụng và mục đích phát triển sản phẩm (số liệu 2017), hãy chọn ngôn ngữ phù hợp cho mục đích phát triển sp của bạn (web hay mobile hay embedded?)

Không được bỏ qua thuật toán:

Học thuật toán để rèn tư duy logic và cách giải quyết vấn đề. Hồi trước mặc dù phần mềm của mình ko dùng thuật toán, nhưng mình vẫn lên các trang code để luyện thuật toán và tư duy. Nó giống như 1 bài luyện tập thể dục cho não, giúp bạn tư duy sáng sủa và mạch lạc

Đối với các bài toán tối ưu và hệ thống lớn thì chắc chắn là cần thuật toán. Nếu bạn làm cái này mà ko có tí thuật toán là khó khăn

Nếu bạn để ý kĩ, các cty nổi tiếng như Amazon hay google khi tuyển dụng luôn có bài tập kiêm tra về cấu trúc dữ liệu và giải thuật. Do đó, thành thạo món này, bạn sẽ có cơ hội làm việc ở công ty nổi tiếng. Các bạn tham khảo bài viết giải thích chi tiết hơn về Thuật toán là gì? Học thuật toán làm quái gì?

Học ở đâu?

Đọ sách

Github.com:lên xem các dự án mẫu mà học code, hoặc nếu đóng góp đc code của bạn vào các cái trên đó thì thật tuyệt vời

Forums:https://stackoverflow.com/vàhttps://www.quora.com/là 2 forum lớn, bạn có thể học nhiều từ đây

Lộ trình?

Cá nhân mình khi dạy hay kèm cặp các bạn mới học, mình đưa ra lộ trình chung như thế này:

Ba tháng tiếp theo, từ 3 môn cơ bản trên, hãy tự chọn và làm lại 1 tới 3 sản phẩm. Sản phẩm này có thể đơn giản, nhưng nó phải là 1 thứ tương đối hoàn thiện giống như sản phẩm ở bên ngoài. Nó có thể là 1 ứng dụng mobile, một website hay 1 ứng dụng máy tính. Cái này giúp ích cho bạn khá nhiều về sau. Ví dụ như đi phỏng vấn, bạn có thể đưa sản phẩm này ra. Làm sản phẩm sẽ giúp bạn rèn luyện cả khả năng thiết kế, tư duy đưa ra yêu cầu và có trải nghiệm của 1 người dùng tốt hơn so với việc làm các bài tập có yêu cầu rõ ràng, có đầu ra đầu vào cụ thể (ng khác thiết kế giúp bạn hết rồi)

Ba tháng nữa, hãy cố gắng đi xin và thực tập ở 1 công ty phần mềm. Làm sản phẩm thực tế, sẽ giúp bạn có những trải nghiệm tuyệt vời.

Và sau 3 tháng này, lộ trình trên coi như kết thúc. Bạn có thể tự học, tự làm dựa vào những gì bạn đã có, và tiến dần tới con đường Lập trình viên chuyên nghiệp

Tạm kết

Vậy là chỉ với một năm rèn luyện bạn đã có thể định hình và bước đi trên con đường của mình. Và đừng quên chia sẻ kiến thức này cho những người bạn đang và bắt đầu học CNTT nha