Chuẩn hóa code style trên Editor/IDE bằng EditorConfig

Thực sự mà nói về code thì 100 coder code 100 cách khác nhau, không biết đâu mà lần phải không các bạn. Người thì xài tab, người thì xài space (khoảng trắng), đã thế lại còn có tab 2 với tab 4, space 2 với space 4... chưa kể đến việc space và tab ở mỗi Editor/IDE là không giống nhau nữa. Nếu bạn code một mình thì chả có vấn đề gì cả phải không nào, những hãy thử nghĩ xem trong 1 team thì sao? Mỗi người 1 kiểu sẽ gây mất tính thống nhất với nhau, khó đọc code hơn đối với người khác trong team nữa chứ. 

Đó chính là lí do vì sao cần phải có EditorConfig trong mỗi project của các bạn. EditorConfig giúp developer và các team thống nhất code style về mặt tab indent. Việc thiết lập .editorconfig sẽ tăng tính chuyên nghiệp, giảm thiểu việc code lệch dòng.

EditorConfig là gì?

Theo như định nghĩa từ trang chủ https://editorconfig.org/#overview thì:

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.

EditorConfig giúp lập trình viên định nghĩa và duy trì một phong cách viết code thống nhất giữa các editor và IDE khác nhau. Dự án EditorConfig bao gồm một hướng dẫn định nghĩa các phong cách lập trình và tập hợp plugin cho các editor, giúp cho editor có thể đọc file thiết lập và thay đổi tương ứng. Tập tin EditorConfig dễ đọc và hoàn toàn phù hợp với các chương trình quản lý phiên bản.

Nạp EditorConfig vào Editor/IDE

Bạn đang code bằng Editor/IDE gì nhỉ: Sublime Text, Atom, Visual Studio Code, PhpStorm, Eclipse, ... trước tiên bạn hãy vào https://editorconfig.org/#download để xem thử Editor/IDE của mình có hỗ trợ EditorConfig không nhé. Sau đó hãy cài đặt plugin theo hướng dẫn nha.

Để bắt đầu với EditorConfig rất đơn giản, ở thư mục gốc của project của bạn chỉ cần có 1 file tên là .editorconfig thì ngay lập tức Editor/IDE sẽ nạp thông tin cấu hình và áp dụng đối với từng trường hợp cụ thể. Trong các thư mục con cũng có thể có file .editorconfig và file này sẽ đè lên file ở thư mục gốc. Sau này, khi tạo file mới Editor/IDE sẽ tự động đọc file .editorconfig và thiết lập style cho bạn.

Cách dùng EditorConfig

Để định nghĩa style cho 1 file nào đó ta bắt đầu bằng

[tên file]
thuộc tính 1 = định nghĩa 1
thuộc tính 2 = định nghĩa 2
thuộc tính 3 = định nghĩa 3
...

Tên file hỗ trợ Wildcard Patterns các bạn nhé, cụ thể như sau:

Nếu bạn để ý thì trong repository của Laravel cũng có file .editorconfig mặc định như thế này này:

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.yml]
indent_style = space
indent_size = 2

Ta hãy cùng xem ý nghĩa của các thuộc tính ở dưới này nhé:

indent_style

Định dạng thụt lề văn bản là tab hay space

Giá trị khả dụng: tab, space

indent_size

Kích cỡ thụt lề văn bản.

Giá trị khả dụng: một số nguyên dương, tab

Nếu indent_size bằng tab, indent_size sẽ được đặt thành kích thước tab, tab_width sẽ được đặt nếu tab_width được chỉ định hoặc được đặt bởi Editor/IDE nếu tab_width không được chỉ định.

tab_width

Chiều rộng của một ký tự tabstop đơn

Giá trị khả dụng: một số nguyên dương (giá trị mặc định bằng indent_size khi indent_size là một số)

end_of_line

Định dạng tệp kết thúc dòng (Unix, DOS, Mac)

Giá trị khả dụng:

• lf
• crlf
• cr

charset

File character encoding

Giá trị khả dụng:

• latin1
• utf-8
• utf-16be
• utf-16le
• utf-8-bom

trim_trailing_whitespace

Cho biết khoảng trắng có được phép ở cuối dòng hay không

Giá trị khả dụng:

• true
• false

insert_final_newline

Cho biết tệp có kết thúc bằng dòng mới hay không

Giá trị khả dụng:

• true
• false

max_line_length

Giới hạn số ký tự có trên 1 dòng

Giá trị khả dụng:

• Một số nguyên dương
• off

Hỗ trợ bởi

• Emacs
• Vim
• Atom
• ReSharper and Rider
• AppCode, IntelliJ IDEA, PhpStorm, PyCharm, RubyMine, and WebStorm

Có gì thắc mắc hãy để lại bình luận nhé!