Thiết lập Visual Studio Code để viết Markdown vui vẻ hơn

Trong một bài viết mấy năm trước, tôi đã từng review về các editor mà tôi sử dụng để viết markdown. Tuy nhiên, thời gian qua đi, con người cũng thay đổi 😁. Giờ đây tôi đã chuyển sang sử dụng Visual Studio Code (VSCode) để viết bài. Và tôi đang rất hài lòng với lựa chọn của mình 😇.

Để viết những bài cho blog này, phần lớn thời gian tôi viết Markdown (công việc sau đó là của pelican và GitHub Actions, sẽ build thành trang web). Đương nhiên, để viết được những bài chất lượng thì một editor tốt với nhiều tiện ích mở rộng hỗ trợ là điều không thể thiếu 🤣.

Trong bài viết này, tôi sẽ chia sẻ thiết lập của mình để có thể dùng VSCode viết Markdown một cách dễ dàng hơn và vui vẻ hơn.

Tại sao tôi chọn VSCode

Mấy năm trước, tôi đã có nghe phong thanh Visual Studio sau rất nhiều năm đã có bản dành cho Linux. Tuy nhiên, thực sự thì tôi không cần đến Visual Studio để viết Markdown. Tôi chỉ cần một editor gọn nhẹ, giao diện đẹp và nhiều tính năng bổ trợ là đủ.

Vào thời điểm đó, tôi đã hiểu nhầm vấn đề. Visual Studio là một IDE, nhưng có một editor khác tồn tại song song là Visual Studio Code (VSCode). Sau khi biết đến VSCode thì tôi dùng song song cả VSCode và Emacs (thời điểm đó thì chủ yếu là Emacs) để viết bài.

VSCode dễ dùng hơn, nhưng Emacs có một tính năng rất quan trọng với tôi đó là tự ngắt dòng (Emacs gọi là fill paragraph). Vim cũng có thể tự ngắt dòng, nhưng Emacs cho tôi kết quả tốt nhất, và cũng tiện lợi nhất (ấn M-q sẽ căn lại dòng cho cả đoạn).

Tuy nhiên, sau này tôi đã tìm được 1 extension của VSCode cũng cho phép tôi làm được điều đó, với kết quả tương đương Emacs. Vậy là giờ tôi đã chuyển hẳn sang VSCode để viết bài.

Markdown và VSCode

Markdown đối với tôi như là một bước tiến lớn trong công cuộc viết blog. Trước đây tôi đã từng viết trên WordPress 😆. Ở mức cơ bản thì tôi dùng editor WYSIWYG có sẵn, tuy nhiên để căn chỉnh đúng ý mình hơn thì tôi đã phải tự viết các thẻ p.

Có một công cụ (cũng chính là thứ đưa tôi đến với WordPress) là Windows Live Writer cho phép tôi viết blog như thao tác với Word Pad. Tuy nhiên, công cụ này chỉ chạy trên Windows, và hiện tại cũng đã bị khai tử mấy năm rồi 💔.

Đặc điểm chung của các công cụ này là đều khá cồng kềnh, và thỉnh thoảng nó sinh ra mã HTML không hoàn toàn đúng ý của tôi (nên cần tinh chỉnh lại). Ngoài ra, các editor dạng WYSIWYG không phù hợp với nhu cầu của tôi, vì khi viết bài tôi không thích dùng chuột để định dạng trong khi code thuần HTML thì pro quá tôi không theo được.

Vấn đề khác nữa là tôi bắt đầu viết bài về lập trình nhiều hơn, khi đó WordPress không còn phù hợp nữa. Vì WordPress phải cài thêm nhiều plugin mới hiển thị các đoạn code trong bài viết được, đồng thời, để viết ra những nội dung đó cũng thật không dễ dàng.

Hơn nữa, việc dùng dịch vụ có sẵn khiến tôi không thể tùy biến trang web đúng theo ý mình được. Đồng thời, bản thân tôi là người lập trình web, không tự làm cho mình một trang web thì nghe có vẻ sai sai 😂.

Tất cả những vấn đề đó đều biết mất sau khi tôi biết đến Markdown (và cả GitHub Pages và Pelican nữa 😀). Markdown là một ngôn ngữ đánh dấu (markup) rất đơn giản và dễ hiểu. Tôi không nhớ đã biết đến Markdown như thế nào, có lẽ là từ khi làm việc với GitHub và biết đến GitHub Pages.

Markdown được thiết kế để chuyển đổi sang HTML, tuy nhiên, điểm mạnh của nó là cú pháp của nó rất đơn giản. Khác hẳn với hầu hết các ngôn ngữ đánh dấu văn bản mà tôi biết, cú pháp của Markdown đơn giản tới mức nhìn nó không khác plain text là mấy. Vì vậy, Markdown có thể xem được trực tiếp dưới dạng plain text bởi các editor thông thường (nếu editor hỗ trợ định dạng thì càng tốt, không cũng không sao 👍).

Hầu như ai làm lập trình cũng đã tiếp xúc với Markdown, vì ít nhất là Markdown cũng được sử dụng để viết readme.md (và file này hiển thị rất đẹp trên GitHub). Bởi vì sự đơn giản là tiện dụng, Markdown được chấp nhận sử dụng rất rộng rãi (mà có thể bạn không nhận ra 😃). Ngoài GitHub, Slack cũng hỗ trợ Markdown, mạng xã hội reddit cũng sử dụng Markdown để định dạng các bài viết. Rất nhiều tài liệu kỹ thuật được viết bằng Markdown.

Tuy nhiên, bản thân Markdown là một ngôn ngữ không có tiêu chuẩn thống nhất, tác giả của nó chỉ viết ra một công cụ chuyển đổi đơn giản bằng Perl và đã không update gì kể từ năm 2004 😐.

Vì không có tiêu chuẩn thống nhất, nên có rất nhiều phiên bản Markdown khác nhau (gọi là *** Flavored Markdown), mỗi bản lại có định dạng khác nhau đôi chút. Tôi dùng Pelican để build trang web nên dùng Python-Markdown. Về cơ bản nó khá giống với GitHub Flavored Markdown, và được hỗ trợ bởi nhiều editor khác nhau.

Bởi vì Markdown là một ngôn ngữ đánh dấu văn bản, cũng tương tự hầu hết các “ngôn ngữ” khác, để viết được Markdown thì chúng ta cần một editor tốt để có thể hỗ trợ chúng ta trong việc viết và định dạng Markdown. Và lựa chọn của tôi là VSCode. Ngoài những tính năng cơ bản của một editor tốt, VSCode đã tích hợp sẵn nhiều tính năng hỗ trợ viết Markdown: tự động định dạng và preview.

Tính năng preview là rất quan trọng, trước đây tôi thường phải cài thêm extension cho các editor khác mới có tính năng này. Nhờ tính năng này mà tôi có thể xem trước bài viết của mình khi chuyển sang HTML sẽ như thế nào. Tuy nó không hoàn toàn giống như những gì sẽ hiển thị trên blog, nhưng với tôi thế là đủ. Nó tiện hơn nhiều so với việc chờ build blog trên local rồi mở trình duyệt để xem 🥰.

Một trong số những tính năng rất hữu ích mà tôi thấy VSCode đã tích hợp sẵn, đó là outline (bố cục). Khi viết bài, tôi rất hay để ý phần này, để xem cấu trúc bài viết của mình như thế nào và tôi đã phân chia các phần hợp lý hay chưa 👍.

Ngoài ra, VSCode có một chế độ gọi là zen mode. Trong trường hợp tôi muốn tập trung viết bài, tôi thường bật chế độ này lên. Khi đó, VSCode sẽ phóng to tràn màn hình, phần nội dung chính được căn vào giữa màn hình. Thực sự là rất phù hợp 💯.

Thiết lập cơ bản

Dưới đây là những thiết lập cơ bản của tôi cho VSCode. Về cơ bản thiết lập mặc định của VSCode đã tương đối tốt và tôi không cần chỉnh sửa gì nhiều. Theme “dark+” mặc định là một theme tuyệt vời, tôi đánh giá nó là theme tốt nhất trong số các theme mà tôi đã thử qua 👍.

Những thứ tôi cần setting thêm, chủ yếu là tắt những màn hình gợi ý khi mở VSCode, thay đổi font size cho phù hợp. Ngoài ra, tôi dùng Python-Markdown nên cần indent 4 (chứ không phải 2 như GitHub).

{
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,
    "workbench.editor.untitled.hint": "hidden",
    "workbench.startupEditor": "newUntitledFile",
    "[markdown]": {
        "editor.fontSize": 16,
        "editor.tabSize": 4,
        "editor.rulers": [
            72
        ],
        "editor.detectIndentation": false,
        "editor.autoClosingBrackets": "never"
    }
}

Về cơ bản thì chỉ cần như vậy đã là quá ổn để viết blog. Tuy nhiên, cá nhân tôi vẫn muốn mọi thứ tốt hơn nữa. Nên tôi đã tìm và cài đặt thêm những extension sau. Đó đều là những sợ bổ trợ hết sức quan trọng 😍 khiến việc viết blog vui hơn rất nhiều.

Một điểm rất hay nữa của VSCode là nó có khái niệm workspace. Tất cả những thiết lập này có thể lưu vào workspace (trong thư mục .vscode của thư mục hiện tại) và sẽ không ảnh hưởng gì đến thiết lập của các thư mục khác.

Extension hỗ trợ viết blog

Typewriter Scroll Mode

Ở Vim có một tính năng tôi rất thích, đó là thiết lập scrolloff, tức là sẽ luôn để lại một số dòng nhất định khi cuộn xuống cuối trang. VSCode thì mặc định chỉ cách 1 dòng dưới cùng mà thôi. Tôi tìm hiểu thì biết nó cũng có một setting như vậy, đó là editor.padding.bottom và editor.padding.top, tuy nhiên tôi đã thiết lập mà không thấy có tác dụng gì 💔.

Extension Typewriter Scroll Mode đã giúp tôi giải quyết vấn đề này. Extension này sẽ giữ dòng hiện tại luôn luôn ở chính giữa màn hình (theo chiều dọc) tương tự như máy đánh chữ (typewriter).

Tôi chưa dùng máy đánh chữ bao giờ cả nên không biết máy đánh chữ hoạt động thế nào 😁. Tuy nhiên, extension này đã giúp tôi rất nhiều trong quá trình viết bài.

Với việc luôn giữ dòng ở chính giữa màn hình, extension này giúp tôi luôn tập trung khi viết bài. Nhờ dòng luôn được giữ ở chính giữa, tôi không phải đưa mắt lên hay xuống, nên chỉ cần căn chỉnh màn hình đúng tầm mắt là có thể viết cả ngày mà không vấn đề gì 💯.

Một vấn đề nhỏ là extension này lâu rồi không được update, và nó hoạt động cũng không thực sự ổn định. Thỉnh thoảng khi bật lên, nó không tự động được kích hoạt hoặc được kích hoạt mặc dù vẫn hiển thị OFF do tôi tắt trước đó. Và tôi phải bật tắt bằng tay (ấn Control-Options-T 😅). Thao tác này rất nhanh thôi nên tôi không thấy đây là vấn đề gì cả 🆗.

Focus

Kết hợp với Typewriter Scroll Mode ở trên, Focus giúp tôi tập trung vào việc viết bài tốt hơn, bằng cách làm sáng những dòng xung quanh (mặc định là 5 dòng) dòng hiện tại và làm mờ phần còn lại. Phần làm mờ không hoàn toàn mờ hẳn mà vẫn có thể đọc được, trong trường hợp tôi muốn xem lại chỗ này chỗ kia.

Có nhiều extension có thể làm được việc này, nhưng phần lớn không quá nổi bật, ít được cài đặt và cũng không được update gần đây. Tuy nhiên, tôi chọn Focus và nó vẫn hoạt động ổn với nhu cầu của mình.

Rewrap

Với tôi, không có gì khó chịu bằng việc viết các dòng quá dài, hay tệ hơn là viết cả đoạn chỉ bằng 1 dòng. Nhiều lúc muốn xem nội dung lại phải cuộn ngang rất lâu (mà chuột có khả năng cuộn ngang thì tôi không có, ngoại trừ Trackpad của máy). Tuy nhiều editor đã tự ngắt những dòng này khi hiển thị, nhưng không phải editor nào cũng có (mà không phải lúc nào cũng được bật mặc định).

Một trong những tính năng khiến tôi vẫn dùng Emacs để viết Markdown là khả năng tự ngắt dòng của nó. Thực sự thì khó có editor nào có tính năng này hoạt động đúng ý tôi như Emacs. Và tôi thấy thật khó hiểu là một editor như VSCode lại không có tính năng như thế 🤔.

Nhưng đó chỉ là câu chuyện trước khi tôi biết đến extension rewrap. Với rewrap thì VSCode cũng đã có thể làm được điều đó. Rewrap có thể làm được chính xác những gì Emacs làm, kể cả việc thêm hai dấu cách sau dấu ngắt câu. Thậm chí phím tắt của rewrap cũng giống luôn (ấn M-q để định dạng lại cả đoạn).

Mặc định thì rewrap sẽ ngắt dòng ở 80 ký tự. Để có thể hoạt động giống như Emacs, tôi đã thiết lập rewrap như sau:

{
    "rewrap.autoWrap.enabled": true,
    "rewrap.wrappingColumn": 70,
    "rewrap.doubleSentenceSpacing": true
}

Một vấn đề nhỏ với công cụ này là nó không thực sự hoạt động tốt với trình gõ tiếng Việt tôi đang sử dụng. Thỉnh thoảng khi ngắt dòng nó làm lỗi con trỏ chuột bị nhảy về trước vài ký tự. Vấn đề không quá lớn nhưng thỉnh thoảng cũng hơi khó chịu, nhất là khi ý tưởng đang tuôn trào muốn viết ra ngay 💨.

:emojisense:

Chỉ viết toàn chữ thì rất là chán, và tôi thích thêm emoji cho bài viết của mình 😆. Tuy nhiên, trước đây tôi khá lười làm việc này, bởi vì việc thêm emoji không hề đơn giản khi phải bật bảng chọn emoji lên (Command-Control-Space) rồi dùng chuột để chọn emoji mà mình muốn 😫.

Đang viết bài tôi không muốn bỏ dở giữa chừng và chuyển sang dùng chuột một chút nào ⌨️. Do đó tôi mong muốn một công cụ nào đó cho phép tôi thêm emoji ngay khi gõ. Tiếc là MacOS không có chức năng nào như vậy (trong khi iOS thì có gợi ý rất ngon). Và tôi bắt đầu tìm kiếm các extension của VSCode.

Có rất nhiều extension khác nhau cho phép gõ emoji vào Markdown, tuy nhiên chỉ có :emojisense: là đáp ứng đúng nhu cầu của tôi. Những extension khác thêm emoji nhưng nó chỉ có tác dụng khi preview trên chính VSCode mà thôi, trong khi bài viết của tôi cần được chuyển sang HTML bằng Pelican.

Và đó là những gì :emojisense: mang lại cho tôi: cho phép thêm trực tiếp emoji dưới dạng một ký tự unicode trực tiếp vào văn bản (không khác gì chọn emoji của MacOS cả).

Vậy là giờ đây, tôi đã dễ dàng thêm emoji hơn và bài viết của tôi cũng sẽ sống động hơn 😊.

Code Spell Checker

Cá nhân tôi cảm thấy rất ngứa mắt khi nhìn vào các bài viết đầy lỗi chính tả. Nếu chỉ thỉnh thoảng mới xuất hiện typo thì còn chấp nhận được chứ thường xuyên sai tiếng Việt thì thường tôi không đọc luôn 😁. Bản thân tôi cố gắng viết đúng, nhưng xem lại một số bài thì mới thấy tôi cũng viết sai đầy ra 👎. Vì vậy tôi mong muốn có một công cụ giúp mình kiểm tra một cách tự động.

Thế nhưng mọi việc cũng rất khó khăn, vì tôi viết bài bằng tiếng Việt, nhưng tiếng Việt lại không phải là một ngôn ngữ phổ biến. Một ngôn ngữ như tiếng Anh chẳng hạn, có vô số các công cụ khác nhau, kiểm tra cả chính tả và ngữ pháp luôn nhưng lại không có một công cụ nào như thế cho tiếng Việt cả.

Trước đây, việc kiểm tra này tôi hay dùng Vim. Cơ chế cũng đơn giản thôi, tất cả các từ sẽ được kiểm tra trong một file từ điển. Nếu không tồn tại trong đó thì từ đó là từ viết sai. Tuy không hoàn toàn kiểm tra được hết các lỗi nhưng nó đã giúp tôi giảm được kha khá những lỗi đánh máy mà tôi không nhận ra (phần còn lại thì phải tự đọc và sửa thôi 🤤).

Cứ chuyển đi chuyển lại nhiều quá tôi cũng lười, nên một thời gian tôi đã không thực hiện kiểm tra chính tả nữa. Khi nào đọc bài thấy sai ở đâu thì sửa ở đó 😮‍💨.

Gần đây thì tôi tìm được extension này, cho phép kiểm tra chính tả với cơ chế tương tự như Vim. Nó có một plugin để kiểm tra Tiếng Việt nhưng nó chỉ có thể kiểm tra khi bỏ dấu kiểu hiện đại (oà, oè) trong khi tôi thích bỏ dấu kiểu cổ điển (òa, òe) là kiểu quen thuộc tôi đã được học từ lớp 1 tới bây giờ.

Tôi đành phải dùng file từ điển trước đây đã dùng cho Vim (lấy từ Chromium) và nó hoạt động rất tốt (kiểm tra được cả kiểu bỏ dấu hiện đại và cổ điển). Tuy nhiên, tôi mới tạm hài lòng với công cụ này thôi, vì tôi viết nhiều bài về kỹ thuật mà nó vẫn không nhận được các từ viết tắt phổ biến trong ngành IT.

markdownlint

Đúng như tên gọi, extension này giúp chúng ta “lint” markdown xem chúng ta viết đã chuẩn cú pháp chưa, có vấn đề gì cần sửa và gợi ý sửa những lỗi đó.

Như hình đã nói ở trên, Python-Markdown hơi khác một chút. Ngoài ra file markdown tôi dùng còn phải theo cú pháp của Pelican nữa, nên tôi đã thiết lập extension này như sau để phù hợp hơn với thực tế tôi sử dụng:

{
    "markdownlint.config": {
        "MD007": {
            "indent": 4
        },
        "MD014": false,
        "MD041": false,
        "MD034": false,
        "MD036": false
    },
}

Sau khi cài đặt tôi mới thấy trước giờ tôi viết rất chuẩn, không có lỗi gì cả 💯.

Power Mode

Những tính năng của extension này đã có trên Atom từ lâu, nhưng phải gần đây mới xuất hiện trên VSCode. Extension này mang lại sự vui vẻ, giải tỏa căng thẳng trong quá trình viết lách cũng như làm việc.

Những gì extension này mang lại là những hiệu ứng bắt mắt khi gõ chữ. Những hiệu ứng này có thể tùy chỉnh được, cho phù hợp với mỗi người. Trông thực sự rất ngầu 😎 và tràn đầy cảm hứng.

Bonus

Markdown All in One

Markdown All in One là một extension hỗ trợ rất nhiều trong quá trình viết Markdown, ví dụ tự động thêm dấu gạch đầu dòng khi xuống dòng khi viết một danh sách. Đồng thời nó mang lại rất nhiều phím tắt để định dạng văn bản. Đây là một extension được đánh giá rất cao với 5 triệu lượt tải về 😮.

Tôi thì không thực sự cần đến extension này, vì tôi khá ngại các thao tác chọn rồi nhấn phím tắt, trong khi có thể gõ một mạch được luôn. Tuy nhiên đây là một extension rất hay, hỗ trợ rất tốt, đặc biệt với những người mới tiếp xúc với Markdown.

Một số tính năng của extension này có vẻ hơi thừa (với tôi 😆), đó là tạo mục lục và hỗ trợ công thức toán. Những tính năng này hoạt động tốt với Markdown và tính năng preview trên VSCode, nhưng blog của tôi không cần đến.

Word Count

Tôi thì nghĩ ít người cần đến extension này, trừ một vài người viết bài theo KPI. Thế nhưng thỉnh thoảng nó cũng mang lại những thông tin nhất định. Extension này, đúng như tên gọi của nó, là thêm một phần thống kê số từ trong bài viết (tôi đoán là đếm từ dựa vào dấu cách).

Biết được số từ mình đã viết khá quan trọng, vì một bài viết quá dài có thể khiến người đọc cảm thấy không hứng thú. Nhưng bài viết quá ngắn thì thường lại có chất lượng không cao.

Kết luận

VSCode thực sự là một editor tốt, không chỉ cho việc lập trình mà kể cả cho việc viết blog. Bản thân nó đã có rất nhiều tính năng hữu ích, và nó lại có thể mở rộng với vô số các extension. Với tôi, VSCode đã đáp ứng được mọi nhu cầu, với mọi tính năng mà các editor khác có thể mang lại.