Bagaimana cara mengaktifkan kode vs di css?

Pada artikel ini, kita akan membahas langkah-langkah yang diperlukan untuk mengunduh editor teks populer bernama Visual Studio Code, juga disebut sebagai “VS Code. ” Di akhir artikel Anda akan dapat membuat folder di Visual Studio Code yang berisi dokumen HTML yang dapat Anda buka di browser web Anda

I. pengantar

Apa itu 'editor teks'?

Editor teks, juga disebut editor kode, adalah aplikasi yang digunakan oleh pengembang untuk menulis kode. Mereka dapat menyorot dan memformat kode Anda sehingga lebih mudah dibaca dan dipahami. Jika Anda pernah menggunakan Codecademy, Anda pasti sudah familiar dengan editor teks. Ini adalah area tempat Anda menulis kode

Menggunakan editor teks adalah bagian dari pembuatan "lingkungan pengembangan" Anda, seperangkat alat yang Anda gunakan untuk mengerjakan proyek pengkodean. Ini akan memungkinkan Anda untuk mengambil apa yang telah Anda pelajari di Codecademy dan mempraktikkannya saat Anda mengerjakan proyek di komputer Anda. Hal ini tidak hanya akan memperkenalkan Anda pada alat yang biasa digunakan oleh developer profesional, tetapi juga berarti Anda telah berkembang sebagai developer dan siap untuk mulai bekerja sendiri—kerja bagus

Khusus untuk penulisan kode, editor teks memberikan sejumlah keuntungan

• Penyorotan sintaks khusus bahasa
• Lekukan kode otomatis
• Skema warna yang sesuai dengan preferensi Anda dan membuat kode lebih mudah dibaca
• Plug-in, atau program tambahan, untuk menangkap kesalahan dalam kode
• Tampilan hierarki, atau representasi visual, dari folder dan file proyek, sehingga Anda dapat menavigasi proyek dengan mudah
• Pintasan kunci, atau kombinasi, untuk pengembangan lebih cepat

Anda mungkin juga pernah membaca atau mendengar tentang IDE, atau “editor pengembangan terintegrasi. ” IDE memungkinkan Anda untuk tidak hanya mengedit, tetapi juga mengkompilasi, dan men-debug kode Anda melalui satu aplikasi atau antarmuka. Meskipun editor teks yang kami rekomendasikan tidak dianggap sebagai IDE, ia memiliki banyak fitur mirip IDE yang membuat hidup sebagai pengembang lebih mudah tanpa memerlukan banyak sumber daya yang biasanya diperlukan oleh IDE. Terbaik dari kedua dunia

Memilih Editor Teks

Ada sejumlah editor teks untuk dipilih. Misalnya, Visual Studio Code adalah salah satu editor teks terpopuler yang digunakan oleh pengembang. (Itu Kode Visual Studio dan bukan Visual Studio, yang sedikit berbeda. Kami menginginkan yang pertama, yang dengan 'Kode' di namanya. ) Editor teks populer lainnya yang mungkin pernah Anda dengar adalah Atom dan Sublime Text

Salah satu dari editor teks yang disebutkan ini bagus untuk pengembangan tetapi untuk mempermudah, kami sarankan Anda memulai dengan Visual Studio Code. Beberapa manfaat editor ini adalah

• Gratis untuk digunakan
• Sumber terbuka, (artinya kode program dapat dilihat, dimodifikasi, dan dibagikan)
• fitur seperti IDE
• Didukung oleh komunitas besar pengguna dan Microsoft

Ketika Anda semakin jauh dalam karir pengkodean Anda, Anda dapat mencoba editor kode lain untuk melihat fitur apa yang paling cocok dengan alur kerja pengembangan pribadi Anda

II. Menginstal Kode Visual Studio

Jadi, kami telah memilih editor teks kami, sekarang kami hanya perlu menginstalnya di komputer kami

Instruksi Video

Untuk pembelajar visual, video ini merinci cara mengunduh dan menginstal Visual Studio Code. Instruksi tertulis ada di bawah

Langkah Instalasi

Proses instalasi untuk komputer yang menjalankan macOS, Windows, dan Linux, (khususnya Ubuntu dan Debian), akan sangat mirip dan menggunakan Visual Studio Code pada semuanya akan sama

1. Kunjungi situs web Visual Studio Code untuk mengunduh versi terbaru dari Visual Studio Code

   

2. Anda akan melihat sistem operasi komputer Anda ditampilkan, tetapi jika tidak benar, klik panah bawah dan temukan opsi yang cocok dengan sistem operasi Anda dari menu drop down dan klik ikon panah bawah di bawah “Stabil. ”

   pengguna Windows. Ini akan mengunduh versi terbaru dari Visual Studio Code sebagai file. file exe

   pengguna Mac. Ini akan mengunduh versi terbaru dari Visual Studio Code untuk Mac sebagai file. file zip

   pengguna Linux. . deb dan. rpm adalah jenis file yang berbeda untuk menyimpan data. Kami sarankan Anda mengunduh. deb sehingga pembaruan otomatis berfungsi seperti yang disarankan oleh dokumentasi Visual Studio Code

3. Setelah file Visual Studio Code selesai diunduh, kita perlu menginstalnya. Temukan file Kode Visual Studio di manajer file Anda, program yang memungkinkan Anda melihat file dan folder di komputer Anda

   pengguna Windows. Buka. exe dengan mengkliknya dan menjalankan penginstal. Terus klik 'Selanjutnya' dan akhirnya 'Selesai. ’

   pengguna Mac. Yang diunduh. zip harus ada di folder 'Unduhan' Anda. Buka file. Jika Anda melihat pesan ini, pilih “Buka. ”

   pengguna Linux. File yang diunduh harus ada di folder 'Unduhan' Anda

   Temukan di pengelola file Anda, klik dua kali dan pilih 'Instal' di pusat perangkat lunak GUI, atau jalankan perintah berikut, satu per satu, di terminal

   sudo dpkg -i downloaded_filename.deb
   sudo apt-get install -f

4. Pastikan aplikasi Visual Studio Code Anda disimpan di tempat yang Anda tahu akan mudah ditemukan

   pengguna Windows. Ini akan secara otomatis ditempatkan di menu Mulai Anda

   pengguna Mac. Klik dan seret ikon Visual Studio Code dari folder Unduhan ke folder Aplikasi

   pengguna Linux. Itu akan muncul di bilah tugas program Anda

Itu saja, Anda telah berhasil menginstal editor teks Anda dan siap untuk memulai pengkodean

AKU AKU AKU. Praktik. Gunakan Visual Studio Code untuk memulai proyek di luar platform

Saat Anda melewati berbagai pelajaran dan jalur di sini di Codecademy, Anda mungkin perlu membuat proyek di komputer Anda sendiri dan bukan di lingkungan pembelajaran Codecademy. Ini bisa rumit, tetapi ini adalah langkah menarik yang menandakan bahwa Anda siap bekerja secara mandiri

Untuk melakukan ini, kita harus menggunakan editor teks yang kita pasang di atas. Mari luangkan waktu sejenak untuk mencoba Visual Studio Code

Apa itu 'folder pengembangan'?

Sebelum menggunakan editor teks Anda, penting untuk membuat sistem file yang terorganisir. Seiring bertambahnya jumlah dan ukuran proyek Anda, semakin penting untuk mengetahui di mana harus menyimpan proyek baru dan menemukan proyek lama

Sebagian besar pengembang menyimpan proyek mereka di direktori yang mudah ditemukan, (yang mungkin biasa Anda sebut 'folder'). Di sini, di Codecademy, kami merekomendasikan untuk menamai proyek direktori ini. Ini akan menyimpan semua proyek pengkodean Anda. Setiap kali Anda membuat proyek baru, sekecil apa pun, Anda harus selalu membuat folder baru di dalam direktori proyek Anda. Anda akan menemukan bahwa proyek file tunggal dapat dengan cepat berubah menjadi proyek multi-folder yang besar

Praktik. Mari kita membuat proyek

Di bawah ini adalah langkah-langkah yang perlu Anda ikuti untuk membuat folder baru untuk semua proyek pemrograman Anda. Anda juga akan belajar cara memuat folder proyek baru ke dalam Visual Studio Code dan membuat proyek HTML "hello world" pertama Anda

Kami sarankan Anda menonton video di atas dan kemudian ikuti langkah-langkah tertulis di bawah ini

1. Buat folder pengembangan

Arahkan ke folder menggunakan pengelola file atau terminal Anda. Pastikan itu adalah folder yang Anda kunjungi secara teratur dan akan diingat. Buat folder baru bernama proyek

pengguna Mac. Ini mungkin akun Pengguna atau folder "Beranda" Anda

pengguna Windows. Anda mungkin ingin menyimpan ini di drive C Anda

pengguna Linux. Anda mungkin ingin menyimpan ini di folder Pengguna Anda di dalam folder "Beranda".

Di dalam folder proyek, buat folder baru bernama HelloWorld. Semua yang Anda tambahkan ke folder ini akan menjadi bagian dari proyek HelloWorld Anda

2. Buka Kode Visual Studio

3. Buka folder pengembangan Anda

Klik ikon 'Explorer' di menu sebelah kiri dan klik tombol 'Buka Folder' dan pilih folder pengembangan Anda. Ini akan meluncurkan pengelola file Anda

Arahkan ke folder HelloWorld dan pilih Buka. Folder akan terbuka di panel samping Visual Studio Code. Pada titik ini, seharusnya tidak ada konten apa pun di folder tersebut. Kami akan menambahkan file di langkah berikutnya

4. Tambahkan file

Sebelum Anda mempelajari cara menambahkan file ke folder proyek, penting untuk memahami tujuan ekstensi file. Ekstensi file adalah akhiran dari nama file (3 atau 4 karakter terakhir dalam nama file, didahului oleh titik) dan menjelaskan jenis konten yang berisi file tersebut. Misalnya, ekstensi file HTML adalah. html, dan memberi tahu browser (dan aplikasi lain) untuk menginterpretasikan konten file sebagai dokumen HTML. Setelah Visual Studio Code memuat folder proyek, Anda dapat menambahkan file. Langkah-langkah di bawah ini menjelaskan cara menambahkan file. Jangan khawatir melakukan ini di komputer Anda sendiri. Kita akan membahasnya selanjutnya

Di panel Explorer Visual Studio Code, klik nama folder pengembangan Anda. Anda akan melihat empat ikon muncul di sebelah kanan nama folder. Klik ikon 'File Baru'. Ketik nama file baru dengan ekstensi file yang sesuai (misalnya,. html,. css,. csv). Sangat penting bagi Anda untuk menyertakan ekstensi file yang benar, sehingga program seperti linter mengetahui cara menginterpretasikan kontennya. Tekan Enter setelah selesai

5. Mulai pengkodean

Salin dan tempel kode HTML boilerplate berikut

    
Hello World 
_
Simpan file Anda sesering mungkin dengan fitur Simpan Otomatis dan lacak perubahan dengan sistem kontrol versi jika Anda tahu cara menggunakannya. (Untuk mengaktifkan Simpan Otomatis, klik 'File' lalu 'Simpan Otomatis'. Saat aktif, Anda akan melihat tanda centang di sebelah 'Simpan Otomatis'. ) Ini akan mengurangi kemungkinan kehilangan pekerjaan yang belum disimpan



Ekstensi File dan Penyorotan Sintaks
Sintaks adalah seperangkat aturan yang memberi tahu kita cara membuat kode yang ditulis dengan benar. Visual Studio Code dan editor teks lainnya dapat menginterpretasikan ekstensi file dan memberikan penyorotan sintaks khusus bahasa. Penyorotan sintaks adalah alat untuk membuat kode lebih mudah dibaca. Lihatlah indeks Anda. html. Teks dan tag memiliki warna yang berbeda. Beginilah cara Visual Studio Code menyoroti. sintaks html. Dengan setiap bahasa baru yang Anda pelajari, Visual Studio Code akan menyorot teks dengan cara yang membuat kode Anda mudah dibaca. Ini mungkin berbeda dari editor teks lain dan juga berbeda dari cara kode Anda disorot di Codecademy
Opsional. Ubah skema warna
Meskipun Visual Studio Code hadir dengan penyorotan sintaks default, Anda mungkin ingin mengubah warna yang digunakan. Tema warna yang bagus akan memudahkan Anda membaca semua baris kode tersebut. (Coba kontras rendah, tema gelap seperti “Solarized Dark” atau “Dracula Dark. ”)
Untuk melakukan ini, pilih Tema Warna dari halaman Selamat Datang ketika Anda pertama kali membuka Kode Visual Studio, atau klik Kode di bilah menu di bagian atas jendela desktop Anda, lalu klik Preferensi, diikuti oleh Tema Warna. Anda juga dapat mencari tema warna untuk dipasang menggunakan menu Extensions
6. Lihat file HTML Anda di browser
Pada titik ini, file Anda siap untuk dilihat di browser web. Langkah-langkah berikut harus dilakukan di luar Visual Studio Code
Arahkan ke indeks. html di folder Hello World Anda melalui manajer file atau terminal Anda
Klik dua kali atau buka index. html. Halaman harus terbuka di browser web default Anda. Luangkan waktu sejenak untuk mengagumi hasil karya Anda—Anda membuat proyek pertama Anda dengan Visual Studio Code
Lebih jauh lagi dengan fitur-fitur Visual Studio Code
Jika Anda sudah merasa nyaman dengan langkah sebelumnya, jelajahi fitur berikut untuk menyesuaikan lebih lanjut lingkungan pengembangan Anda. Anda tidak perlu menggunakan saran-saran ini untuk menyelesaikan proyek di Codecademy tetapi mereka dapat membantu membuat Anda lebih efisien saat menulis kode dan apa yang membuat Visual Studio Code menjadi editor yang berguna
IV. Membungkus
Selamat. Anda telah berhasil mengatur editor teks Anda dan siap membuat situs web di komputer Anda sendiri
 

			
Bagaimana cara mengaktifkan kode CSS di Visual Studio?
			
Visual Studio Code memiliki dukungan bawaan untuk mengedit style sheet di CSS. css, SCSS. scss dan Kurang.  . 
 
Langkah 1. Instal Sass atau Less transpiler.  .  
 
Langkah 2. Buat file Sass atau Less sederhana.  .  
 
Langkah 3. Buat tugas.  .  
 
Langkah 4. Jalankan Tugas Bangun
 
		
			
Mengapa CSS saya tidak berfungsi dalam kode VS?
			
Langkah-langkah untuk memecahkan masalah pemuatan CSS di VS Code.  Periksa apakah kita telah menautkan file CSS yang benar dan menggunakan jalur yang benar . Periksa ekstensi file. Tinjau sintaks tautan dan file CSS dan pastikan itu valid. Gunakan DevTools browser (mis. Chrome) untuk menghapus cache dan memeriksa kesalahan. 
		
			
Bagaimana cara mengatur vscode untuk HTML dan CSS?
			
Sebaiknya tonton video di atas lalu ikuti langkah-langkah tertulis di bawah ini.  . 
 
Buat folder pengembangan. Arahkan ke folder menggunakan pengelola file atau terminal Anda.  .  
 
Buka Kode Visual Studio
 
Buka folder pengembangan Anda.  .  
 
Tambahkan file.  .  
 
Mulai pengkodean.  .  
 
Lihat file HTML Anda di browser
 
		
			
Apakah kode VS memiliki CSS?
			
Dalam Visual Studio Code, kami memiliki dukungan untuk hampir semua bahasa pemrograman utama.  Beberapa dikirimkan dalam kotak, misalnya, JavaScript, TypeScript, CSS, dan HTML  tetapi ekstensi bahasa yang lebih kaya dapat ditemukan di VS Code Marketplace.