Saya ingin mengubah / menambahkan penyorotan sintaks untuk bahasa di Sublime 2/3.

Misalnya saya ingin kata kunci this diwarnai dalam JavaScript.

Bagaimana saya bisa melakukan itu?

Saya tahu bahwa ada File JavaScript preferensi C:\Program Files\Sublime Text 3\Packages, tetapi saya tidak tahu apa yang harus diubah atau jika saya harus membuat File Preferensi JavaScript baru di suatu tempat di folder ini %APPDATA%\Sublime Text 3.

Penyorotan sintaks dikontrol oleh tema yang Anda gunakan, dapat diakses melalui Preferences -> Color Scheme. Tema menyoroti berbagai kata kunci, fungsi, variabel, dll. Melalui penggunaan cakupan, yang ditentukan oleh serangkaian ekspresi reguler yang terdapat dalam .tmLanguagefile di direktori / paket bahasa. Sebagai contoh, JavaScript.tmLanguageberkas memberikan lingkup source.jsdan variable.language.jske thiskata kunci. Karena Sublime Text 3 menggunakan .sublime-packageformat file zip untuk menyimpan semua pengaturan default, tidak mudah untuk mengedit file satu per satu.

Sayangnya, tidak semua tema berisi semua cakupan, jadi Anda harus bermain-main dengan yang berbeda untuk menemukan satu yang terlihat bagus, dan memberi Anda sorotan yang Anda cari. Ada sejumlah tema yang disertakan dengan Sublime Text, dan banyak lagi tersedia melalui Kontrol Paket , yang sangat saya sarankan untuk dipasang jika Anda belum melakukannya. Pastikan Anda mengikuti petunjuk ST3 .

Kebetulan, saya telah mengembangkan Neon Color Scheme, tersedia melalui Kontrol Paket, yang mungkin ingin Anda lihat. Tujuan utama saya, selain mencoba membuat berbagai bahasa terlihat sebaik mungkin, adalah mengidentifikasi sebanyak mungkin cakupan yang berbeda - lebih banyak daripada yang disertakan dalam tema standar. Meskipun definisi bahasa JavaScript tidak Neonselengkap Python, misalnya, masih memiliki lebih banyak keragaman daripada beberapa default seperti Monokaiatau Solarized.

Saya harus mencatat bahwa saya menggunakan Better JavaScriptdefinisi bahasa @ int3h untuk gambar ini daripada yang dikirimkan dengan Sublime. Itu dapat diinstal melalui Kontrol Paket.

MEMPERBARUI

Akhir-akhir ini saya telah menemukan definisi bahasa pengganti JavaScript lainnya - JavaScriptNext - ES6 Syntax. Ini memiliki lebih banyak cakupan daripada JavaScript dasar atau bahkan JavaScript yang lebih baik. Ini terlihat seperti ini pada kode yang sama:

Juga, sejak saya pertama kali menulis jawaban ini, @skuroda telah merilis PackageResourceViewermelalui Kontrol Paket. Ini memungkinkan Anda untuk melihat, mengedit dan / atau mengekstrak bagian atau keseluruhan .sublime-packagepaket dengan mulus . Jadi, jika mau, Anda bisa langsung mengedit skema warna yang disertakan dengan Sublime.

PEMBARUAN LAIN

Dengan dirilisnya hampir semua paket default di Github , perubahan telah datang dengan cepat dan cepat. Sintaks JS lama telah sepenuhnya ditulis ulang untuk menyertakan bagian terbaik dari JavaScript Next ES6 Syntax, dan sekarang kompatibel sepenuhnya dengan ES6. Sebuah ton perubahan lainnya telah dibuat untuk menutupi sudut dan tepi kasus, meningkatkan konsistensi, dan hanya secara keseluruhan membuatnya lebih baik. Sintaks baru telah disertakan dalam (saat ini) dev build 3111 terbaru .

Jika Anda ingin menggunakan sintaks baru apa pun dengan versi beta saat ini 3103, cukup kloning repo Github di suatu tempat dan tautkan JavaScript(atau bahasa apa pun yang Anda inginkan) ke Packagesdirektori Anda - temukan di sistem Anda dengan memilih Preferences -> Browse Packages.... Kemudian, cukup lakukan git pulldi direktori repo asli dari waktu ke waktu untuk menyegarkan perubahan apa pun, dan Anda dapat menikmati yang terbaru dan terhebat! Saya harus mencatat bahwa repo menggunakan .sublime-syntaxformat baru daripada yang lama .tmLanguage, jadi mereka tidak akan bekerja dengan build ST3 sebelum 3084, atau dengan ST2 (dalam kedua kasus, Anda harus mengupgrade ke versi beta atau dev terbaru).

Saat ini saya mengubah Skema Warna Neon saya untuk menangani semua cakupan baru dalam sintaks JS baru, tetapi sebagian besar harus sudah tercakup.

Saya akhirnya menemukan cara untuk menyesuaikan Tema yang diberikan.

Buka C:\Program Files\Sublime Text 3\Packagesdan salin + ganti nama Color Scheme - Default.sublime-packagemenjadi Color Scheme - Default.zip. Setelah itu unzip dan salin Tema yang ingin Anda ubah ke %APPDATA%\Sublime Text 3\Packages\User. (Dalam kasus saya,All Hallow's Eve.tmTheme ).

Kemudian Anda dapat membukanya dengan Editor Teks apa pun dan mengubah / menambahkan sesuatu, misalnya untuk mengubah thisdi JavaScript:

<dict>
    <key>name</key>
    <string>Lang Variable</string>
    <key>scope</key>
    <string>variable.language</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF0000</string>
    </dict>
</dict>

Ini akan menandai thisFile JavaScript berwarna merah. Anda dapat memilih Tema Anda di bawah Preferences -> Color Scheme -> User -> <Your Name>.

Gunakan plugin PackageResourceViewer yang diinstal melalui Package Control (seperti yang disebutkan oleh MattDMo ). Ini memungkinkan Anda untuk mengganti sumber daya yang dikompresi hanya dengan membukanya di Sublime Text dan menyimpan file. Secara otomatis hanya menyimpan sumber daya yang diedit ke% APPDATA% / Roaming / Sublime Text 3 / Packages / atau ~ / .config / sublime-text-3 / Packages /.

Khusus untuk op, setelah plugin terinstal, jalankan PackageResourceViewer: Open Resourceperintahnya. Kemudian pilih JavaScriptdiikuti denganJavaScript.tmLanguage . Ini akan membuka file xml di editor. Anda dapat mengedit definisi bahasa apa pun dan menyimpan file. Ini akan menulis salinan pengganti dari file JavaScript.tmLanguage di direktori pengguna.

Metode yang sama dapat digunakan untuk mengedit definisi bahasa dari bahasa apa pun di sistem.

"Ini" sudah diwarnai di Javascript.

Lihat-> Sintaks-> dan pilih bahasa Anda untuk disorot.

Ini resep saya

Catatan: Ini bukan yang diminta OP. Petunjuk ini akan membantu Anda mengubah warna item (komentar, kata kunci, dll) yang merupakan aturan pencocokan sintaksis. Misalnya, gunakan instruksi ini untuk mengubah sehingga semua komentar kode diwarnai biru, bukan hijau.

Saya yakin OP menanyakan bagaimana mendefinisikan thissebagai item yang akan diwarnai ketika ditemukan dalam file sumber JavaScript.

1. Instal Paket: PackageResourceViewer

2. Ctrl+Shift+P> [ PackageResourceViewer: Open Resource]> [ Color Scheme - Default]> [ Marina.sublime-color-scheme] (atau skema warna apa pun yang Anda gunakan)

3. Perintah di atas akan membuka tab baru ke file " Marina.sublime-color-scheme".

   • Bagi saya, file ini terletak di profil roaming saya %appdata%( C:\Users\walter\AppData\Roaming\Sublime Text 3\Packages\Color Scheme - Default\).
   • Namun, jika saya menjelajah ke jalur itu di Windows Explorer , [ Color Scheme - Default] bukan dari dir-anak [ Packages]. Saya menduga itu PackageResourceViewermelakukan virtualisasi.

langkah opsional: Di tab skema warna baru: Ctrl+Shift+P> [ Set Syntax: JSON]

4. Telusuri aturan yang ingin Anda ubah. Saya ingin membuat komentar menjadi terlihat, jadi saya mencari " Comment"

   • Saya menemukannya di "rules"bagian tersebut

 "rules":
    [
        {
            "name": "Comment",
            "scope": "comment, punctuation.definition.comment",
            "foreground": "var(blue6)"
        },

5. Cari string "blue6":untuk menemukan bagian definisi variabel warna. Saya menemukannya di "variables"bagian tersebut.

6. Pilih warna baru menggunakan alat seperti http://hslpicker.com/ .

7. Tentukan variabel warna baru, atau timpa setelan warna untuk blue6.

   • Peringatan: penimpaan blue6akan mempengaruhi semua elemen teks lainnya dalam skema warna yang juga menggunakan blue6 ("Punctuation" "Accessor").

8. Simpan file Anda, perubahan akan langsung diterapkan ke file / tab yang terbuka.

CATATAN

Sublime akan menangani salah satu dari gaya warna ini. Mungkin lebih.

hsla = hue, saturation, lightness, alpha rgba = merah, hijau, biru, alpha

hsla (151, 100%, 41%, 1) - parameter terakhir adalah level alpha (transparansi) 1 = buram, 0,5 = setengah transparan, 0 = transparan penuh

hsl (151, 100%, 41%) - tidak ada saluran alfa

rgba (0, 209, 108, 1) - rgb dengan saluran alfa

rgb (0, 209, 108) - tidak ada saluran alfa