Cách chạy mã CSS trong Sublime text 3

Sublime Text là một trong những trình soạn thảo văn bản phổ biến nhất trên thế giới. Nó được tích hợp nhiều tính năng mạnh mẽ như chỉnh sửa nhiều dòng, xây dựng hệ thống cho hàng chục ngôn ngữ lập trình, tìm và thay thế biểu thức chính quy, API Python để phát triển plugin, v.v.

Trên hết, đó là nền tảng chéo (Mac, Windows và Linux) và được phân phối dưới dạng “phần mềm chia sẻ”, có nghĩa là nó được sử dụng miễn phí với cửa sổ bật lên mua hàng không thường xuyên

Trong bài viết này, bạn sẽ tìm hiểu cách sử dụng Sublime Text để đáp ứng mọi nhu cầu chỉnh sửa văn bản và mã của bạn

Xem Hướng dẫn bằng video của chúng tôi để sử dụng văn bản tuyệt vời

Văn bản tuyệt vời là gì?

Sublime Text tự nhận mình là “trình soạn thảo văn bản tinh vi dành cho mã, đánh dấu và văn xuôi. ” Được phát hành lần đầu cách đây hơn một thập kỷ vào tháng 1 năm 2008, Sublime Text hiện đang ở phiên bản chính thứ tư và hỗ trợ Mac, Windows và Linux

Cần phải hét lên ở đây. Kinsta thật tuyệt vời, tôi sử dụng nó cho trang web cá nhân của mình. Hỗ trợ nhanh chóng và xuất sắc, và máy chủ của họ là nhanh nhất cho WordPress

Cách chạy mã CSS trong Sublime text 3
Phillip Stemann
Xem kế hoạch

Về cốt lõi, Sublime Text giống như một con dao của Quân đội Thụy Sĩ có thể được áp dụng cho mọi trường hợp sử dụng hoặc vấn đề liên quan đến thao tác với Văn bản

Thoạt nhìn, Sublime Text có vẻ là một trình soạn thảo văn bản chỉ hữu ích cho các nhà phát triển. Mặc dù đây là một công cụ tuyệt vời dành cho các nhà phát triển nhưng nó cũng là một ứng dụng mạnh mẽ dành cho các nhà văn và người viết blog

Trước khi chúng tôi đi sâu vào tất cả các tính năng và khả năng của Sublime Text, hãy xem nhanh một vài tình huống mà Sublime Text có thể hữu ích

Regex Tìm và Thay thế

Regex, viết tắt của biểu thức chính quy, là một cú pháp để chỉ định các mẫu tìm kiếm. Regex thường được sử dụng để định vị các chuỗi văn bản giống nhau (nhưng khác nhau) để soạn thảo văn bản

Ví dụ: nếu bạn muốn xóa tất cả các thẻ HTML khỏi tài liệu, sẽ rất mất thời gian để tìm kiếm từng thẻ để xóa (e. g.

,

, , v.v. )

Thay vào đó, bạn có thể thực hiện tìm kiếm với một mẫu biểu thức chính quy duy nhất. Trong trường hợp này, mẫu regex [a-zA-Z0-9] có thể được sử dụng để tìm tất cả các thẻ HTML trong tài liệu

Cách chạy mã CSS trong Sublime text 3
Tìm và thay thế văn bản trong Sublime Text

Thực hiện tìm và thay thế biểu thức chính quy rất đơn giản trong Sublime Text. Trong thanh menu, nhấp vào Tìm > Tìm trong tệp. Tiếp theo, hãy bật chế độ biểu thức chính quy trong menu tìm và thay thế, chỉ định mẫu biểu thức chính quy trong trường “Tìm”, chọn

{
“color”: “blue”,
“type”: “sedan”,
“seats”: 5,
}
0 và nhấp vào Tìm hoặc Thay thế tùy thuộc vào những gì bạn cần thực hiện

Sublime Text là một trong những trình soạn thảo văn bản phổ biến nhất trên thế giới và được tích hợp nhiều tính năng mạnh mẽ — tìm hiểu thêm trong hướng dẫn này ⬇️Nhấp để Tweet

Quickly Run Code

Không giống như các trình soạn thảo văn bản truyền thống, Sublime Text cho phép bạn chạy mã trực tiếp trong ứng dụng. Điều này đặc biệt hữu ích cho các dự án đơn giản hơn như tập lệnh Bash hoặc Python nhỏ

Ví dụ: nếu bạn đang viết một tập lệnh Python đơn giản để thu thập dữ liệu từ danh sách URL, thì việc thiết lập một Terminal riêng để gỡ lỗi mã sẽ kém thuận tiện hơn so với việc chạy tập lệnh trực tiếp trong Sublime Text

Cách chạy mã CSS trong Sublime text 3
Chạy mã trong Sublime Text

Để chạy mã trong Sublime Text, hãy đi tới Tools > Build System và chọn ngôn ngữ cho mã của bạn (Sublime hỗ trợ nhiều ngôn ngữ khác nhau như Python, Ruby, Bash, v.v.). Tiếp theo, nhấn Cmd+B trên Mac hoặc Ctrl+B trên Windows để chạy mã của bạn

Chỉnh sửa nhiều dòng

Có tất cả các loại tình huống mà bạn có thể cần chỉnh sửa đồng thời nhiều dòng trong tài liệu văn bản. Hãy tưởng tượng bạn có một danh sách các tên miền và bạn cần thêm

"font_size": 10 to "font_size": 20
0 vào trước mỗi dòng. Chắc chắn rồi, bạn có thể đi từng dòng một, nhưng điều đó có thể mất nhiều thời gian

Cách chạy mã CSS trong Sublime text 3
Chỉnh sửa nhiều dòng trong Sublime Text

Với Sublime Text, bạn có thể chọn tất cả các dòng bạn muốn chỉnh sửa, nhấn Shift+Cmd+L và chỉnh sửa đồng thời từng dòng

Như bạn có thể thấy, trong khi Sublime Text có các tính năng nâng cao dành cho nhà phát triển được tích hợp sẵn, thì cũng có nhiều công cụ mạnh mẽ như hỗ trợ regex và chỉnh sửa nhiều dòng chắc chắn cũng hữu ích cho những người không phải là nhà phát triển

Bây giờ bạn đã hiểu chung về những gì Sublime Text có thể làm, hãy cùng tìm hiểu sâu hơn và tìm hiểu thêm về ứng dụng

Đoạn văn bản

Có lẽ tính năng mạnh mẽ nhất (đặc biệt dành cho các lập trình viên) mà Sublime Text có là các đoạn văn bản

Chúng ta đều biết rằng viết mã đôi khi có thể rườm rà. Sublime Text Snippets cung cấp một cách nhanh chóng và dễ dàng để chèn các khối văn bản sẽ hiển thị lặp đi lặp lại trong bất kỳ dự án nào

Điều khiến những đoạn văn bản này trở nên tuyệt vời hơn là chúng rất dễ hiểu và viết khá đơn giản. Công cụ này giúp các nhà phát triển tiết kiệm thời gian và loại bỏ nhiều lỗi trong khi phát triển

Nhập từ “kích hoạt” và nhấn nút tab để bắt đầu một đoạn trích

Cách tải xuống văn bản tuyệt vời

Sublime Text có sẵn từ trang web Sublime Text chính thức dưới dạng tải xuống miễn phí. Như đã nói, Sublime Text về mặt kỹ thuật không phải là “phần mềm miễn phí. ” Thay vào đó, Sublime Text là một ứng dụng “phần mềm chia sẻ”, có nghĩa là nó có thể được tải xuống miễn phí, nhưng có thể có một số hạn chế về tính năng sau một thời gian

Trong trường hợp Sublime Text, ứng dụng sẽ tiếp tục hoạt động vô thời hạn, nhưng đôi khi bạn sẽ thấy cửa sổ bật lên có thông tin chi tiết về cách mua ứng dụng

Nếu bạn muốn mua Sublime Text, bạn có thể mua giấy phép cá nhân với giá 99 đô la hoặc giấy phép kinh doanh với giá từ 65 đô la/giấy phép/năm. Mặc dù giấy phép trả phí không mở khóa bất kỳ chức năng cốt lõi bổ sung nào, nhưng bạn có quyền truy cập vào các đặc quyền sau

  • Không có cửa sổ bật lên nhắc nhở mua hàng
  • Truy cập vào các phiên bản phát triển của Sublime Text
  • Thông báo cập nhật trong ứng dụng

Sublime Text 101 – Khái niệm cơ bản

Vì Sublime Text là một ứng dụng có nhiều chức năng nên chúng ta sẽ thảo luận về các tính năng và quy trình làm việc cần thiết cho hai nhóm người dùng – nhà văn và nhà phát triển. Nhưng trước tiên, hãy thiết lập hiểu biết cốt lõi về Sublime Text trước khi phân nhánh thành các mục dành riêng cho người dùng

Cách tùy chỉnh cài đặt văn bản tuyệt vời

Không giống như các ứng dụng khác có menu cài đặt đồ họa, cài đặt Sublime Text hoàn toàn dựa trên văn bản. Để xem cài đặt Sublime Text của bạn, hãy đi tới Sublime Text > Preferences và nhấp vào Settings. Sau đó, bạn sẽ thấy một tài liệu như thế này

Cách chạy mã CSS trong Sublime text 3
Cài đặt văn bản tuyệt vời

Tài liệu cài đặt này thoạt nhìn có vẻ khó khăn (đặc biệt nếu bạn không quen làm việc với các công cụ hướng đến nhà phát triển), nhưng chúng tôi sẽ giúp bạn hiểu mọi thứ ngay bây giờ

Cài đặt của Sublime Text được lưu trữ ở định dạng JSON. JSON là một định dạng tiêu chuẩn ngành để lưu trữ thông tin khóa-giá trị, vì vậy bạn có thể đã thấy định dạng này được sử dụng ở nơi khác trước đây. JSON lưu trữ thông tin vào các mảng khóa-giá trị như vậy

Đăng kí để nhận thư mới

Bạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?

Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress

{
“color”: “blue”,
“type”: “sedan”,
“seats”: 5,
}

Mảng trên có thể được sử dụng để mô tả các thuộc tính của một chiếc ô tô – trong trường hợp này là một chiếc ô tô màu xanh có năm chỗ ngồi. Tương tự, một mảng JSON có thể chỉ định cài đặt cho một ứng dụng, đó chính xác là những gì Sublime Text thực hiện

Hãy quay lại tệp cài đặt Sublime Text. Như bạn có thể thấy trong ảnh chụp màn hình ở trên, tệp cài đặt được trình bày dưới dạng hai mảng JSON. Mảng bên trái chứa cài đặt mặc định của Sublime Text, trong khi mảng bên phải bao gồm cài đặt người dùng tùy chỉnh

Nói chung, bạn không bao giờ nên trực tiếp thay đổi cài đặt mặc định. Thay vào đó, bạn có thể ghi đè cài đặt mặc định bằng cài đặt tùy chỉnh – điều này cho phép bạn hoàn nguyên về cài đặt mặc định nếu xảy ra sự cố

Vì vậy, bạn sẽ thay đổi một vài cài đặt mặc định như thế nào?

"font_size": 10 to "font_size": 20
____3____4

Để thực hiện những thay đổi này, hãy thêm từng thành phần vào tài liệu cài đặt người dùng tùy chỉnh ở định dạng JSON hợp lệ như vậy (nếu bạn có cài đặt tùy chỉnh hiện có, hãy thêm từng cài đặt mà không tạo mảng mới)

{
"font_size": 20,
"margin": 6,
"line_numbers": false,
}

Nếu không chắc mình đã định dạng cài đặt chính xác hay chưa, bạn có thể sử dụng công cụ trực tuyến như JSONLint để xác thực mảng JSON của mình. Sau khi bạn đã chỉ định cài đặt, hãy lưu tệp và bạn đã hoàn tất

Quản lý dự án và tệp trong Sublime Text

Khi làm việc trên một dự án, cho dù là một loạt bài đăng trên blog hay mã nguồn cho một ứng dụng web, thông thường các tệp của bạn sẽ được sắp xếp trong một thư mục dự án. Sublime Text xem xét và cung cấp giao diện đồ họa chức năng để quản lý tệp và thư mục

Giả sử bạn có một thư mục có tên là “my-sublime-text-project” giống như thư mục trong ảnh chụp màn hình bên dưới. Nếu bạn kéo và thả thư mục này vào Sublime Text, bạn sẽ có thể tạo các tệp và thư mục mới trực tiếp trong Sublime Text

Cách chạy mã CSS trong Sublime text 3
Dự án văn bản tuyệt vời

Như bạn có thể thấy, thư mục “my-sublime-text-project” có thể được nhìn thấy ở phía bên trái của cửa sổ Sublime Text trong “Thư mục. ”

Cách chạy mã CSS trong Sublime text 3
Quản lý tệp và thư mục trong Sublime Text

Nhấp chuột phải vào thư mục dự án sẽ hiển thị menu phụ cho phép bạn tạo tệp mới, đổi tên tệp, tạo và xóa thư mục, v.v. Các tính năng quản lý tệp tích hợp của Sublime Text loại bỏ nhu cầu sử dụng công cụ bên ngoài như Finder để thực hiện các tác vụ quản lý tệp cơ bản

Mệt mỏi với hỗ trợ lưu trữ WordPress cấp 1 mà không có câu trả lời? . Kiểm tra kế hoạch của chúng tôi

Cách chạy mã CSS trong Sublime text 3
Tạo tập tin và thư mục

Trong Sublime Text, một dự án đề cập đến một tập hợp các tệp và thư mục đã nhập (e. g. thư mục “my-sublime-text-project” mà chúng tôi đã nhập trước đó. Nếu nhấp vào Dự án trên thanh menu, bạn sẽ thấy có các tùy chọn như “Mở dự án”, “Chuyển đổi dự án” và “Lưu dự án thành. ” Tuy nhiên, không có tùy chọn để tạo một dự án mới

Điều này là do các dự án Sublime Text được tạo ngầm khi bạn tạo một tệp mới và nhập một thư mục. Trong ví dụ trên, chúng ta có thể nhấp vào Dự án trong thanh menu và nhấp vào Lưu dự án thành để lưu dự án

Văn bản tuyệt vời cho nhà văn

Làm nổi bật quản lý tập tin

Làm nổi bật cách tính năng quản lý dự án và quản lý tệp có thể tổ chức nội dung. Ví dụ: một tác giả có thể tạo một tệp cho từng chương trong một cuốn sách, trong khi một blogger có thể tạo các thư mục khác nhau cho các danh mục bài đăng khác nhau

Công cụ Tìm kiếm Mạnh mẽ và Thay thế

Sublime Text có triển khai tìm kiếm và thay thế mạnh mẽ. Nó không chỉ hỗ trợ regex mà bạn còn có thể chỉ định các tệp và thư mục để tìm kiếm trong đó. Ví dụ: nếu tác giả muốn thay đổi tên của một nhân vật trong truyện, họ có thể chỉ định thư mục tìm kiếm và chạy tìm kiếm trên tất cả nội dung của thư mục

Rất có thể mở rộng

Sublime Text có thể mở rộng và gói MarkdownEditing của nó là một công cụ tuyệt vời dành cho những người viết sử dụng cú pháp Markdown

Văn bản tuyệt vời dành cho nhà phát triển

Hệ sinh thái plugin phong phú

Sublime Text có một hệ sinh thái plugin phong phú có thể được truy cập thông qua trình quản lý gói tích hợp. Các nhà phát triển có thể cài đặt plugin để cải thiện quy trình làm việc của họ. Ví dụ: plugin Formatter bao gồm các quy tắc định dạng cho HTML, CSS, JS, Python và các ngôn ngữ khác

Plugin có thể được cấu hình để tự động định dạng các tệp mã nguồn, giúp giữ cho mã gọn gàng và chuẩn hóa về mặt định dạng

Một số bổ sung phải có khác để xem xét bao gồm Kiểm soát gói (cần thiết để cài đặt bổ trợ) và Emmet

Chỉnh sửa nhiều dòng

Sublime Text cung cấp khả năng chỉnh sửa nhiều dòng, có thể truy cập bằng cách giữ phím Command trên máy Mac (Ctrl trên Windows) và sử dụng chuột để chọn nhiều dòng. Sau khi nhiều dòng được chọn, bạn có thể chỉnh sửa tất cả các dòng cùng một lúc và thậm chí còn hỗ trợ sao chép/dán nhiều dòng

Hỗ trợ chia cửa sổ

Sublime Text hỗ trợ chia nhỏ cửa sổ để xem và chỉnh sửa nhiều tệp cùng lúc. Điều này có thể hữu ích khi đề cập đến một tệp khác trong khi làm việc trên một dự án

Hỗ trợ cho hệ thống xây dựng

Sublime Text vận chuyển với sự hỗ trợ cho các hệ thống xây dựng. Hệ thống bản dựng cho phép bạn chạy mã trực tiếp trong thiết bị đầu cuối của trình soạn thảo Sublime Text mà không cần thiết bị đầu cuối bên ngoài

Ví dụ: bạn có thể tạo một hệ thống bản dựng để chạy chương trình Python và một hệ thống bản dựng khác để chạy chương trình Go. Khi phát triển ứng dụng, bạn có thể chọn hệ thống xây dựng và sử dụng phím tắt để chạy chương trình trực tiếp từ Sublime Text

Khả năng tùy biến nhiều hơn với chủ đề

Bạn có thể nâng cao trải nghiệm viết mã của mình hơn nữa bằng cách tải xuống chủ đề Sublime Text. Hầu hết chúng đều đi kèm với nhiều cách phối màu khác nhau

Sự khác biệt giữa chủ đề và bảng phối màu cho Sublime Text là chủ đề trang trí các phần tử giao diện người dùng cốt lõi, như khung bên, tab, menu, v.v., trong khi bảng phối màu chịu trách nhiệm đánh dấu cú pháp

Một số chủ đề tốt nhất để kiểm tra bao gồm

  • chủ đề vật chất
  • chủ đề màu xám
  • Chủ đề Ayu
Bạn đã sẵn sàng tìm hiểu cách sử dụng Sublime Text để đáp ứng mọi nhu cầu chỉnh sửa văn bản và mã của mình chưa? Click to Tweet

Tóm lược

Sublime Text là một trong những trình soạn thảo code phổ biến nhất hiện nay. Đúng như vậy, nó cung cấp cho cả người viết và nhà phát triển rất nhiều công cụ để sử dụng

Không có gì thỏa mãn hơn là tìm được trình soạn thảo mã hoàn hảo. Nếu bạn chưa bao giờ thử Sublime Text, nó rất đáng để xem

Hiện tại bạn có đang sử dụng Sublime Text không?


Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm

  • Dễ dàng thiết lập và quản lý trong bảng điều khiển MyKinsta
  • Hỗ trợ chuyên gia 24/7
  • Mạng và phần cứng Google Cloud Platform tốt nhất, được cung cấp bởi Kubernetes để có khả năng mở rộng tối đa
  • Tích hợp Cloudflare cấp doanh nghiệp cho tốc độ và bảo mật
  • Tiếp cận đối tượng toàn cầu với tối đa 35 trung tâm dữ liệu và hơn 275 PoP trên toàn thế giới

Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm thấy sự phù hợp nhất của bạn

CSS cao siêu có thể chạy không?

Nếu bạn đang sử dụng HTML và Chrome là trình duyệt mặc định của bạn thì chỉ cần nhấp chuột phải vào tệp đang mở trong Sublime Text và chọn “Mở trong trình duyệt”. Nó cũng hoạt động với Javascript và CSS .

Làm cách nào để kết nối CSS với HTML trong Sublime Text?

Trong tệp HTML, nhập liên kết và nhấn Tab để mở rộng thành Nhập URL của tệp CSS mong muốn. Sử dụng mẹo này để nhanh chóng áp dụng các khái niệm mà bạn có thể học trong lớp CSS của chúng tôi.

Làm cách nào để cài đặt CSS trong Sublime?

Hỗ trợ CSS và PostCSS-cssnext đầy đủ nhất cho Sublime Text. . Cài đặt