JavaScript nhập tương đối

Nhập tự động là một trong những tính năng được sử dụng nhiều nhất trong WebStorm vì đúng như tên gọi của nó, tính năng này chỉ hoạt động tự động và thêm các mục nhập bắt buộc khi bạn viết mã của mình

Tuy nhiên, đôi khi quá trình nhập được thêm vào có thể không chính xác như bạn muốn – có thể các trích dẫn là đơn thay vì kép hoặc đường dẫn không phải là đường dẫn được đề xuất trong dự án của bạn. Hãy xem cách chúng ta có thể định cấu hình kiểu nhập được thêm vào trong dự án để đảm bảo mọi thứ trông vừa phải

Dấu ngoặc kép và dấu cách

Hãy bắt đầu với một số điều nhỏ nhưng quan trọng - dấu ngoặc kép và dấu cách xung quanh dấu ngoặc nhọn

Trong hầu hết các trường hợp, nếu bạn đang sử dụng ESLint hoặc EditorConfig và có bật các quy tắc về dấu ngoặc kép và dấu cách trong tệp cấu hình của mình, thì IDE sẽ tự động tuân theo các quy tắc đó

Đây là cách bạn có thể tự đặt kiểu trích dẫn. Chuyển đến Trình chỉnh sửa. Kiểu mã. JavaScript hoặc TypeScript trong Tùy chọn/Cài đặt IDE. Trên tab Dấu câu, bạn có thể chọn giữa dấu ngoặc đơn và dấu ngoặc kép. Chọn “Trong mã mới” nếu bạn muốn tùy chọn này chỉ áp dụng khi nhập mới hoặc các đoạn mã khác được tạo. Với “Luôn luôn”, các trích dẫn cũng sẽ được thay đổi trong mã hiện tại của bạn khi bạn chạy Mã định dạng lại

Để sử dụng khoảng trắng bên trong dấu ngoặc nhọn trong câu lệnh nhập, hãy mở tab Dấu cách và chọn “Dấu ngoặc nhọn nhập/xuất ES5” trong nhóm Bên trong

đường dẫn tương đối

Theo mặc định, IDE sẽ sử dụng các đường dẫn liên quan đến tệp hiện tại

Ví dụ: nếu bạn có

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

3 và

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

4 trong thư mục

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

5, việc nhập

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

6 vào

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

7 sẽ giống như.

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

8

Trong một số dự án, bạn có thể muốn có các mục nhập liên quan đến thư mục gốc của dự án hoặc một số thư mục khác. Để kiểm soát điều đó đối với nhập tự động, hãy mở tab Nhập và chọn tùy chọn “Sử dụng đường dẫn liên quan đến dự án, tài nguyên hoặc nguồn gốc”

Với tùy chọn này được bật, quá trình nhập cho

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

6 sẽ trông như thế này vì nó sẽ liên quan đến thư mục gốc của dự án

"compilerOptions": {
 "paths": {
   "utils/*": ["src/utils/*"]
 }
}

0

Đây là một ví dụ phức tạp hơn. Giả sử chúng ta có quy tắc giải quyết sau được định cấu hình trong tệp cấu hình webpack của dự án – webpack sẽ tìm kiếm trong

"compilerOptions": {
 "paths": {
   "utils/*": ["src/utils/*"]
 }
}

0 khi tìm kiếm các mô-đun

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

Để đảm bảo rằng WebStorm biết về quy tắc này và tuân theo quy tắc đó trong quá trình nhập, chúng tôi cần chỉ định đường dẫn đến cấu hình trong Tùy chọn/Cài đặt. Ngôn ngữ & Framework. JavaScript. gói web. Sau đó, IDE sẽ phân tích cấu hình và đặt

"compilerOptions": {
 "paths": {
   "utils/*": ["src/utils/*"]
 }
}

0 làm gốc để giải quyết các lần nhập và chúng tôi sẽ không còn thấy cảnh báo này trên đường dẫn trong trình chỉnh sửa

Tuy nhiên, vì cả

"compilerOptions": {
 "paths": {
   "utils/*": ["src/utils/*"]
 }
}

2 và

"compilerOptions": {
 "paths": {
   "utils/*": ["src/utils/*"]
 }
}

3 đều là đường dẫn hợp lệ cho

"compilerOptions": {
 "paths": {
   "utils/*": ["src/utils/*"]
 }
}

4 trong

"compilerOptions": {
 "paths": {
   "utils/*": ["src/utils/*"]
 }
}

5, nên chúng tôi vẫn cần kiểm tra tùy chọn “Sử dụng đường dẫn liên quan đến dự án, tài nguyên hoặc nguồn gốc” trong tab Nhập của cài đặt kiểu mã để đặt IDE thành mặc định

Đối với TypeScript, bạn có thể sử dụng các đường dẫn có liên quan đến tsconfig gần nhất. json với tùy chọn “Sử dụng các đường dẫn liên quan đến tsconfig. json”, nằm trong tab Nhập trong Tùy chọn/Cài đặt. biên tập viên. Kiểu mã. bản đánh máy

Nút. nhập thư mục kiểu js

Các công cụ như webpack và TypeScript theo sau Node. chiến lược giải quyết js theo mặc định khi tìm kiếm các mô-đun. tệp

"compilerOptions": {
 "paths": {
   "utils/*": ["src/utils/*"]
 }
}

6 [hoặc

"compilerOptions": {
 "paths": {
   "utils/*": ["src/utils/*"]
 }
}

7 hoặc

"compilerOptions": {
 "paths": {
   "utils/*": ["src/utils/*"]
 }
}

8] trong thư mục được coi là tệp "chính" trong đó và do đó có thể sử dụng đường dẫn như

"compilerOptions": {
 "paths": {
   "utils/*": ["src/utils/*"]
 }
}

9 thay vì

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

30

WebStorm cũng theo cách tiếp cận này theo mặc định khi thêm nhập khẩu. Nếu bạn muốn sử dụng đường dẫn đầy đủ đến tệp chỉ mục, bạn có thể bỏ chọn tùy chọn “Sử dụng nhập thư mục khi lập chỉ mục. js khả dụng” trong tab Nhập của cài đặt kiểu mã JavaScript hoặc TypeScript

Phần mở rộng tệp trong đường dẫn

Thường không cần thêm phần mở rộng tệp

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

31 hoặc

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

32 vào đường dẫn trong câu lệnh nhập [và nếu bạn làm như vậy với

"compilerOptions": {
 "paths": {
   "utils/*": ["src/utils/*"]
 }
}

7, bạn thậm chí sẽ gặp lỗi]. Nhưng nếu bạn muốn thêm phần mở rộng tệp, thì có tùy chọn “Sử dụng phần mở rộng tệp trong tên mô-đun” trong tab Nhập

Lựa chọn giữa các đường dẫn nhập khác nhau

Đôi khi mã được cấu trúc theo cách có nhiều cách để nhập nội dung nào đó. Ví dụ: để nhập một thành phần trong thư viện Material-UI, bạn có thể sử dụng

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

34
hoặc

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

35

Tùy chọn “Không nhập chính xác từ” cho phép bạn nói với IDE rằng bạn không muốn bất kỳ hoạt động nhập nào từ đường dẫn cụ thể [e. g.

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

36] hoặc mẫu đường dẫn [e. g.

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

37]. IDE sau đó sẽ sử dụng một đường dẫn thay thế nếu có

Chọn giữa đường dẫn tệp và bí danh đường dẫn

Bí danh cho phép bạn sử dụng các đường dẫn ngắn hơn trong quá trình nhập. Bạn có thể định cấu hình chúng bằng cách sử dụng webpack's resolve. bí danh hoặc tính năng ánh xạ đường dẫn trong TypeScript

Tuy nhiên, có một trường hợp khi bạn có thể không muốn sử dụng bí danh và thay vào đó muốn sử dụng đường dẫn thông thường – khi bạn nhập ký hiệu được xác định bên trong thư mục bí danh sang một tệp khác trong cùng thư mục. Nếu điều đó thường xảy ra trong dự án của bạn, bạn có thể chọn “Sử dụng bí danh đường dẫn” – “Chỉ trong các tệp bên ngoài đường dẫn được chỉ định” thay vì mặc định, “Luôn luôn”

Đây là một ví dụ. Chúng tôi có một thư mục

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

38 trong dự án được đặt bí danh là

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

38 trong

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

40

"compilerOptions": {
 "paths": {
   "utils/*": ["src/utils/*"]
 }
}

Khi chúng tôi sử dụng phương pháp

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

41 từ

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

42 ở đâu đó trong dự án, chúng tôi muốn có

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

43.

Nhưng trong

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

44, chúng tôi muốn sử dụng đường dẫn tương đối ngắn

module.exports = {
    //...
    resolve: {
        modules: ['src']
    }
};

45. Tùy chọn “Chỉ trong tệp bên ngoài đường dẫn được chỉ định” cho phép chúng tôi làm điều đó

Và tất nhiên, bạn cũng có thể chọn bỏ qua bí danh hoàn toàn bằng cách chọn “Không bao giờ”

Chúng tôi hy vọng bài đăng này đã giúp bạn hiểu rõ về cách nhập JavaScript và TypeScript được định cấu hình trong WebStorm và các IDE JetBrains khác. Nếu bạn có bất kỳ câu hỏi nào, vui lòng để lại trong phần bình luận bên dưới hoặc tweet cho chúng tôi

JavaScript nhập tương đối là gì?

Nhập khẩu trong JavaScript là gì?

Đường dẫn tương đối trong JS là gì?

JavaScript có thể sử dụng nhập không?