The best tools to write clean code

January 3, 2019

Viết code clean, tuân thủ tất cả các quy ước và hiệu quả cao nhất. Một thách thức cho mọi người mới bắt đầu và cả người chuyên nghiệp. Những công cụ sau là hoàn toàn tự động giúp cho bạn clean code của mình. Viết code tốt và clean là tối quan trọng trong lập trình. Nếu bạn hoặc bất kỳ ai khác muốn hiểu source code của bạn một vài tháng sau đó, thì đó không phải là cách dễ nhất để xây dựng lại toàn bộ dự án. Nhưng ngay cả trong quá trình development hiện tại, clean code là không thể thiếu. Dự án của bạn càng trở nên phức tạp hơn theo thời gian và càng khó thực hiện các thay đổi đối với code xấu hoặc triển khai các tính năng mới.

Những bước đầu tiên để code tốt hơn

Những người nghiên cứu cách tốt nhất để viết code sạch có khả năng nhanh chóng đưa ra các hướng dẫn về phong cách code, cách làm tốt nhất và các mẫu thiết kế. Nhưng chỉ có một vài lưu ý về việc đặt tên biến và hàm hoặc cách thức và căn lề code là không đủ. Trên hết, các mẫu thiết kế phải có tính chủ quan và đòi hỏi một số kinh nghiệm như khi nào và cách sử dụng chúng tốt nhất. Thời gian để tích lũy kinh nghiệm không thể bằng việc dùng tools. Bạn chắc chắn nên dành thời gian phù hợp. Tuy nhiên, các công cụ sau đây sẽ giúp bạn có được code sạch mà không phải tự viết.

Những công cụ tốt nhất cho code editor của bạn

Đối với các ngôn ngữ lập trình khác nhau, cũng như các editor code như Atom hoặc Visual Studio Code, có một số công cụ hoặc plugin phân tích và tự động format code.

Prettier

Prettier là một trình format code có thể tùy chỉnh toàn bộ source code của bạn để làm cho nó trông đẹp mắt, cho dù code bị viết xấu đến mức nào. Chúng ta đang nói về những khoảng trắng lớn do khoảng cách trên các dòng quá dài và nhiều hơn nữa. Prettier có thể dọn sạch code hiện có bằng một lệnh. Công cụ này không chỉ giúp người mới bắt đầu mà còn có thể đảm nhận rất nhiều công việc từ các lập trình viên giàu kinh nghiệm. Bởi vì bạn có thể tập trung vào việc dev. Nếu mọi nhân viên của một dự án sử dụng công cụ có cùng cài đặt, các quy ước được xác định rõ ràng và được tuân thủ một cách dễ dàng và hoàn toàn tự động. Cho đến nay, công cụ này chủ yếu hoạt động với một số ngôn ngữ lập trình chính, thư viện và frameworks phát triển web. Bao gồm JavaScript, HTML, CSS, TypeScript, JSON, YAML và GraphQL. Và đang được phát triển bổ sung trên các ngôn ngữ như PHP, Java, Swift hoặc Python. Prettier cũng có sẵn như là các plugin cho Atom, Visual Studio Code, Web Storm,... Trên trang web Prettier, bạn sẽ tìm thấy một danh sách đầy đủ tất cả các ngôn ngữ và các code editors.

Eslint

Eslint là một công cụ cho JavaScript và JSX. Nó được sử dụng để phân tích static code của source code. Nó cho bạn thấy các vấn đề từ một bộ quy tắc nhất định trong code của bạn, chẳng hạn như: những biến khai báo nhưng không được sử dụng hay yêu cầu return trong hàm getter hoặc xóa else nếu việc return đã xảy ra trong phần if. Bộ quy tắc bao gồm các quy tắc để tránh lỗi runtime, hiệu quả cao nhất, quy tắc khai báo biến,... Một số quy tắc thậm chí có thể được tự động fix bằng một lệnh duy nhất. Bạn có thể tự do quyết định code editor của bạn tuân theo theo quy tắc nào và không theo quy tắc nào.

Tip:

Cài đặt các plugin EslintPrettier của code editor của bạn. Bạn có thể đặt PrettierEslint thực hiện phân tích mỗi khi bạn lưu, chức năng Auto Fix của Eslint cũng có thể được thực thi.

Định dạng code của bạn hoàn toàn tự động trước khi commit lên git

Hai công cụ sau đây là hoàn toàn tự động phân tích cú pháp và định dạng code của bạn mỗi khi bạn muốn commit lên git: Lint-StagedHusky.

Lint-Staged kết hợp với Husky

Nếu bạn muốn thực hiện linting thay vì lưu trước khi tạo một commit, thì Lint-Staged có thể trở thành công cụ được lựa chọn. Nó sẽ ngăn bạn chỉnh sửa cú pháp trong quá trình lập trình, nhưng vẫn đảm bảo rằng repository của bạn nhận được code sạch. Với công cụ dựa trên Eslint và Prettier, bạn cũng có thể quyết định chính xác những tập tin cần phân tích. Vì vậy, bạn tránh được việc long search toàn bộ dự án của bạn. Ngoài Lint-Staged, công cụ thứ hai rất hữu ích: Husky đơn giản hóa việc xử lý git-hook. Công cụ này có thể được sử dụng để tự động thực thi tập lệnh hoặc lệnh bằng cách chỉ cần tùy chỉnh tệp cấu hình trước khi commit hoặc push. Bạn có thể tận dụng điều này và bắt đầu phân tích với Lint-Staged trước khi commit.

  • Việc cài đặt diễn ra trong một vài bước:
  1. npm install –save-dev lint-staged husky trong terminal.
  2. Bổ sung các dòng sau trong package.json:
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.(js|jsx)": [
    "eslint --fix",
    "git add"
  ]
}

Đó là tất cả những gì bạn phải làm. Bây giờ nếu bạn git add và sau đó chạy git commit, các tệp JavaScript và JSX của bạn sẽ được phân tích cú pháp và code được tối ưu hóa.

Kết luận

Có nhiều công cụ tối ưu hóa code hữu ích hơn cho các ngôn ngữ lập trình khác nhau. Chúng là những công cụ tuyệt vời tuân theo các quy ước nhất định và hướng dẫn để cho code sạch. Nếu bạn sử dụng cùng một công cụ cho tất cả những người tham gia trong một dự án, bạn có thể đảm bảo rằng toàn bộ cơ sở code vẫn sạch. Tuy nhiên, các công cụ chỉ là một bước để code tốt hơn và sạch hơn. Ngoài ra, đặc biệt là người mới bắt đầu không nên phụ thuộc quá nhiều vào các công cụ như vậy, nếu không, họ sẽ bị lệ thuộc và lười khi phải chèn một tab hoặc ngắt dòng vào code.