Làm thế nào để bạn viết đẹp trong javascript?

Giả sử chúng ta có num số nguyên từ 1 đến num. Chúng tôi định nghĩa một cách sắp xếp đẹp là một mảng được xây dựng thành công bởi các số num này nếu một trong những điều sau đây đúng với vị trí thứ i (1 ≤ i ≤ N) trong mảng này −

• Số ở vị trí thứ i chia hết cho i

• i chia hết cho số ở vị trí thứ i

Vấn đề

Chúng tôi được yêu cầu viết một hàm JavaScript nhận vào một số, num và trả về số cách sắp xếp đẹp mắt mà chúng tôi có thể xây dựng cho num

Ví dụ: nếu đầu vào của hàm là -

const input = 2

Sau đó, đầu ra phải là -

const output = 2

Giải thích đầu ra

Sự sắp xếp đẹp đầu tiên là [1,2]

Cách sắp xếp đẹp thứ hai là [2,1]

Thí dụ

Mã cho điều này sẽ là -

Bản thử trực tiếp

const num = 4;
const countArrangements = (num = 1) => {
   let ans = 0
   const recur = (curr, vis) => {
      if (curr === 1){
         ans++;
      }else{
         for (let i = num; i; i--) {
            let possible = (i % curr === 0 || curr % i === 0);
            let visited = vis & 1 << i;
            if (possible && !visited){
               recur(curr-1, vis | 1 << i);
            }
         }
      }
   };
   recur(num, 0);
   return ans;
};
console.log(countArrangements(num));

Giải thích mã

Chúng tôi xác định một biến kết quả (ans) và sau đó tạo một hàm đệ quy để điều hướng nhiều khả năng phân nhánh. Hàm đệ quy này sẽ chỉ cần hai đối số. số nào chúng tôi hiện đang muốn đặt (curr) và những điểm nào đã được truy cập (vis)

Định dạng và định dạng mã phù hợp là điều bắt buộc đối với mọi dự án và thậm chí còn hơn thế nữa khi bạn có nhiều nhà phát triển làm việc trên cùng một cơ sở mã. Với rất nhiều bổ sung cho JavaScript tuân theo các tiêu chuẩn ECMA và các cách khác nhau để thực hiện cùng một tác vụ, cần phải có các tiêu chuẩn thống nhất trong dự án của bạn về những gì nên chọn. Bạn sẽ tìm thấy các đề xuất trên internet về những gì nên dùng nhưng vẫn không có quy tắc nghiêm ngặt nào về những gì nên sử dụng. Chẳng hạn, bạn có thể chọn tạo biến bằng cách sử dụng var thay vì từ khóa newlet của JavaScript cho các biến dựa trên phạm vi. Vì vậy, bạn có quyền đặt ra các quy tắc cho dự án của mình để mọi nhà phát triển trong nhóm tuân theo các quy tắc đó và có sự nhất quán trong tất cả mã của bạn. Đây là nơi mã linting phát huy tác dụng

xơ vải là gì?

Kẻ nói dối là một chương trình phân tích mã nguồn của bạn để tìm các lỗi kiểu dáng và lập trình có thể xảy ra. Các ngôn ngữ khác nhau có linters khác nhau. ESLint là kẻ nói dối cho JavaScript. Vì JavaScript là một ngôn ngữ được giải thích nên việc chỉ ra các lỗi lập trình trước khi chạy ứng dụng là cực kỳ hữu ích. Đây là một lỗi lập trình mà ESLint sẽ bắt và báo cáo cho bạn

let myFunction = () => {};
myFuction(); // A typo causing error at runtime

Đối với các lỗi về kiểu dáng, ESLint cho phép bạn đặt các quy tắc dành riêng cho dự án của mình. Nếu bạn đi chệch khỏi các quy tắc đó khi viết mã ESLint sẽ báo cáo chúng cho bạn. Để xem toàn bộ danh sách các quy tắc mà ESLint hỗ trợ, hãy theo liên kết này

Danh sách các quy tắc có sẵn

Một công cụ kẻ nói dối có thể cắm và có thể định cấu hình để xác định và báo cáo về các mẫu trong JavaScript. Duy trì mã của bạn…

dây dẫn. tổ chức

Này, đó không phải là mục đích của tôi, tôi đã muốn thiết lập ESLint rồi

Thiết lập ESLint cực kỳ dễ dàng

Trước tiên, chúng ta cần cài đặt ESLint làm phụ thuộc cho nhà phát triển
npm install eslint --save-dev

Tiếp theo, chúng tôi khởi tạo ESLint cho dự án của chúng tôi
./node_modules/.bin/eslint --init
Sau đó, bạn sẽ được hỏi một số câu hỏi liên quan đến sở thích của mình để định cấu hình ESLint và cuối cùng, .eslintrc sẽ được tạo
Nếu bạn không chắc chắn về các câu hỏi, bạn có thể bỏ qua bước này. Thay vào đó, chỉ cần tạo thủ công .eslintrc

Tại thời điểm này, bạn có một thiết lập ESLint đang hoạt động cho dự án của mình. Cấu hình ESLint mặc định sử dụng các quy tắc từ

// For react projects
babel-eslint
eslint-config-airbnb
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-react//For non react projects
babel-eslint
eslint-config-airbnb-base
eslint-plugin-import

0config. Tuy nhiên, có một sự thay thế tốt hơn theo ý kiến ​​​​của tôi. eslint-config-airbnb

Airbnb đã tạo một bộ quy tắc ESLint được xác định trước dựa trên Hướng dẫn về Phong cách JavaScript của Airbnb. Đây là một tài nguyên cực kỳ hữu ích cho tất cả các nhà phát triển JavaScript và cố gắng thiết lập một nền tảng chung cho các phương pháp thực hành JS tốt. Họ đã lập luận cho mọi quyết định họ đưa ra và cho bạn cơ hội để hiểu điều tương tự. Để bắt đầu cài đặt các gói npm sau dưới dạng phần phụ thuộc của nhà phát triển

// For react projects
babel-eslint
eslint-config-airbnb
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-react//For non react projects
babel-eslint
eslint-config-airbnb-base
eslint-plugin-import

Tiếp theo, bạn cần chỉnh sửa .eslintrc của mình để mở rộng từ cấu hình Airbnb. Đây là cách cấu hình của bạn sẽ trông như thế nào

Cũng xin lưu ý rằng bạn vẫn có thể viết các quy tắc tùy chỉnh sẽ ghi đè các quy tắc cấu hình Airbnb bằng cách chỉ định chúng trong khối

// For react projects
babel-eslint
eslint-config-airbnb
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-react//For non react projects
babel-eslint
eslint-config-airbnb-base
eslint-plugin-import

2

Bây giờ ESLint đã được thiết lập cho dự án của bạn và bạn có thể lint các tệp của mình bằng cách chạy lệnh này.

// For react projects
babel-eslint
eslint-config-airbnb
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-react//For non react projects
babel-eslint
eslint-config-airbnb-base
eslint-plugin-import

3 sẽ cung cấp cho bạn kết quả tương tự như thế này

Tuyệt vời. Giờ đây, bạn có thể có mã nhất quán trong dự án tuân thủ các quy tắc bạn đã thiết lập. Nhưng chúng ta cũng đã nói về mã được định dạng đúng, nó ở đâu?

Nhập, đẹp hơn

Prettier là một trình định dạng mã cố định có các quy tắc được xác định trước để định dạng mã và thụt đầu dòng. Để sử dụng đẹp hơn trong dự án của bạn, hãy chạy lệnh sau

// For react projects
babel-eslint
eslint-config-airbnb
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-react//For non react projects
babel-eslint
eslint-config-airbnb-base
eslint-plugin-import

4

Điều này sẽ cấp cho bạn quyền truy cập vào Prettier CLI và bạn có thể kiểm tra và thực hiện định dạng tự động thông qua một lệnh duy nhất

// For react projects
babel-eslint
eslint-config-airbnb
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-react//For non react projects
babel-eslint
eslint-config-airbnb-base
eslint-plugin-import

5
Lệnh này sẽ chạy đẹp hơn trên tệp và định dạng lại mã. Tiện lợi phải không nào. Chỉ cần đảm bảo rằng tất cả các thay đổi trước đó của bạn được lưu vì lệnh này ghi trực tiếp vào tệp

Một ưu điểm khác của prettier là nó có thể được cấu hình để sử dụng với ESLint trong đó nó sử dụng các quy tắc eslint để định dạng mã và chúng ta có thể thấy các lỗi định dạng đẹp hơn trong một tệp khi chúng ta chạy eslint trên tệp đó

Sử dụng Đẹp hơn với ESLint
Trước tiên, bạn cần cài đặt các gói npm sau dưới dạng phụ thuộc dev

eslint-config-prettier
eslint-plugin-prettier

Tiếp theo, chúng tôi cần định cấu hình ESLint để sử dụng đẹp hơn, vì vậy chúng tôi thực hiện các thay đổi cần thiết cho .eslintrc Trong trường hợp này, chúng tôi chỉ cần thêm

// For react projects
babel-eslint
eslint-config-airbnb
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-react//For non react projects
babel-eslint
eslint-config-airbnb-base
eslint-plugin-import

7 vào khối mở rộng. Kết hợp với cấu hình trước đó của chúng tôi, khối mở rộng cuối cùng sẽ trông giống như thế này

"extends": ["airbnb", ""plugin:prettier/recommended""]

Bây giờ, bạn sẽ nhận được lỗi Đẹp hơn bao gồm trong lỗi ESLint. Thiết lập ở trên độc lập với trình chỉnh sửa và không yêu cầu sử dụng tiện ích mở rộng

Chúng tôi đã đi xa để làm cho mã của chúng tôi nhất quán và đẹp mắt. Tuy nhiên, nếu bạn để ý, sẽ không có hiệu quả trong quá trình này. Chúng tôi phải chạy ESLint và đẹp hơn trên mỗi tệp thông qua thiết bị đầu cuối. Đối với lỗi ESLint, chúng ta cần sửa lỗi và chạy lại ESLint để xác minh. Chà, đó là lý do tại sao chúng tôi có trình soạn thảo văn bản và VSCode là một trong những trình soạn thảo văn bản tốt nhất

VSCode cho hiệu quả

VSCode có các tiện ích mở rộng cho ESLint và Prettier tự động hóa toàn bộ quy trình cho bạn mà không cần CLI. Đầu tiên cài đặt hai tiện ích mở rộng này

ESLint - Thị trường Visual Studio

Tiện ích mở rộng cho Visual Studio Code - Tích hợp JavaScript ESLint vào Mã VS

thương trường. Visual Studio. com

Đẹp hơn - Trình định dạng mã - Visual Studio Marketplace

Lấy nó ngay

thương trường. Visual Studio. com

Khi bạn khởi động lại VSCode và hoàn thành thiết lập ở trên cho ESLint và Prettier, bạn sẽ có thể thấy điều kỳ diệu xảy ra. Các lỗi ESLint hiện có thể nhìn thấy trực tiếp trong trình chỉnh sửa mà không cần chạy lệnh thông qua thiết bị đầu cuối

Bạn có thể di chuột qua các dòng màu đỏ để xem lỗi là gì. Tốt hơn nữa, bạn có thể xem bảng Sự cố trong VSCode để biết chi tiết về tất cả các lỗi có trong một tệp