Sublime 2/3の言語の構文強調表示を変更/追加したい。

たとえばthis、JavaScriptで色付けされたキーワードが必要です。

どうやってやるの？

に設定JavaScriptファイルがあることは知っていますがC:\Program Files\Sublime Text 3\Packages、何を変更すればよいか、またはこのフォルダのどこかに新しいJavaScript設定ファイルを作成する必要があるかどうかわかりません%APPDATA%\Sublime Text 3。

構文の強調表示は、使用するテーマによって制御され、からアクセスできますPreferences -> Color Scheme。テーマ.tmLanguageは、言語のディレクトリ/パッケージ内のファイルに含まれる一連の正規表現によって定義されるスコープを使用して、さまざまなキーワード、関数、変数などを強調表示します。たとえば、JavaScript.tmLanguageファイルはスコープsource.jsとキーワードvariable.language.jsを割り当てますthis。Sublime Text 3は.sublime-packagezipファイル形式を使用してすべてのデフォルト設定を保存しているため、個々のファイルを編集するのは簡単ではありません。

残念ながら、すべてのテーマにすべてのスコープが含まれているわけではないため、見栄えがよく、探しているハイライトが表示されるテーマを見つけるには、さまざまなテーマをいじる必要があります。Sublime Textには多くのテーマが含まれており、さらに多くのものがPackage Controlから利用できます。まだインストールしていない場合は、インストールすることを強くお勧めします。ST3の指示に従ってください。

そのため、Neon Color Schemeパッケージコントロールから入手できるを開発しました。私の主な目標は、幅広い言語を可能な限り見栄えよくすることに加えて、できるだけ多くの異なるスコープを特定することでした-標準のテーマに含まれているものをはるかに超えています。たとえば、JavaScript言語の定義はPythonのように完全ではありませんNeonが、Monokaiやなどの一部のデフォルトよりもはるかに多様性がありSolarizedます。

Better JavaScriptこの画像には、Sublimeに付属しているものではなく、@ int3hの言語定義を使用したことに注意してください。パッケージコントロールを介してインストールできます。

更新

最近、別のJavaScript置換言語定義を発見しました- JavaScriptNext - ES6 Syntax。基本JavaScriptよりもスコープが広く、JavaScriptの方が優れています。同じコードでは次のようになります。

また、私が最初にこの回答を書いたので、@ skurodaはPackageResourceViewerPackage Control経由でリリースしました。.sublime-packageパッケージの一部または全体をシームレスに表示、編集、抽出できます。したがって、必要に応じて、Sublimeに含まれている配色を直接編集できます。

別の更新

Githubのほぼすべてのデフォルトパッケージがリリースされたことで、変更が急速かつ激しく行われています。古いJS構文は、JavaScript Next ES6構文の最良の部分を含むように完全に書き直されており、できる限り完全にES6互換です。トンその他の変更の一貫性を向上させ、カバーのコーナーとエッジの場合に行われた、とちょうど全体のより良いそれを作るされています。新しい構文は（現時点では）最新の開発ビルド 3111に含まれています。

現在のベータビルド 3103で新しい構文のいずれかを使用する場合は、Githubリポジトリをどこかにクローンし、JavaScript（または任意の言語）をPackagesディレクトリにリンクしますPreferences -> Browse Packages...。システムでそれを見つけるには、を選択します。次に、git pull元のリポジトリディレクトリで時々変更を更新するだけで、最新かつ最高の機能をお楽しみいただけます。リポジトリは.sublime-syntax古い形式ではなく新しい形式を使用する.tmLanguageため、それらは3084より前のST3ビルド、またはST2では動作しません（どちらの場合も、いずれにしても最新のベータ版または開発版ビルドにアップグレードしておく必要があります）。

私は現在、新しいJS構文のすべての新しいスコープを処理するようにNeon Color Schemeを調整していますが、ほとんどはすでにカバーされているはずです。

私は最終的に与えられたテーマをカスタマイズする方法を見つけました。

に移動してC:\Program Files\Sublime Text 3\Packages、コピーして名前Color Scheme - Default.sublime-packageをに変更しColor Scheme - Default.zipます。その後、解凍してテーマをコピーし%APPDATA%\Sublime Text 3\Packages\Userます。変更したいものはです。（私の場合、All Hallow's Eve.tmTheme）。

次に、任意のテキストエディターで開き、何かを変更/追加できます。たとえばthis、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>

これによりthis、JavaScriptファイルが赤でマークされます。でテーマを選択できますPreferences -> Color Scheme -> User -> <Your Name>。

（MattDMoで言及されているように）Package Controlを介してインストールされたPackageResourceViewerプラグインを使用します。これにより、Sublime Textでリソースを開き、ファイルを保存するだけで、圧縮されたリソースを上書きできます。編集したリソースのみを％APPDATA％/ Roaming / Sublime Text 3 / Packages /または〜/ .config / sublime-text-3 / Packages /に自動的に保存します。

opに固有で、プラグインがインストールされたら、PackageResourceViewer: Open Resourceコマンドを実行します。次にを選択し、JavaScript続いてを選択しますJavaScript.tmLanguage。これにより、XMLファイルがエディターで開きます。言語定義を編集してファイルを保存できます。これにより、JavaScript.tmLanguageファイルのオーバーライドコピーがユーザーディレクトリに書き込まれます。

同じ方法を使用して、システム内の任意の言語の言語定義を編集できます。

「これ」はすでにJavascriptで色分けされています。

[表示]-> [構文]->を選択し、強調表示する言語を選択します。

これは私のレシピです

注：これは、OPが要求するものとは正確には異なります。これらの手順は、定義された構文マッチングルールであるアイテム（コメント、キーワードなど）の色を変更するのに役立ちます。たとえば、これらの手順を使用して、すべてのコードコメントが緑ではなく青に変更されるように変更します。

私は、OPがthisJavaScriptソースファイルで見つかったときに色を付けるアイテムとして定義する方法を求めていると思います。

1. インストールパッケージ：PackageResourceViewer

2. Ctrl+Shift+P> [ PackageResourceViewer: Open Resource]> [ Color Scheme - Default]> [ Marina.sublime-color-scheme]（または使用するカラースキーム）

3. 上記のコマンドは、ファイル「Marina.sublime-color-scheme」の新しいタブを開きます。

   • 私にとって、このファイルはローミングプロファイル%appdata%（C:\Users\walter\AppData\Roaming\Sublime Text 3\Packages\Color Scheme - Default\）にありました。
   • ただし、Windowsエクスプローラーでそのパスを参照すると、[ Color Scheme - Default]は[ Packages] dirの子ディレクトリではありません。それPackageResourceViewerは仮想化を行っていると思います。

オプションの手順：新しいカラースキームタブ：Ctrl+Shift+P> [ Set Syntax: JSON]

4. 変更するルールを検索します。コメントを移動できるようにしたかったので、「Comment」を検索しました

   • "rules"セクションで見つけました

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

5. 文字列"blue6":を検索して、カラー変数定義セクションを見つけます。"variables"セクションで見つけました。

6. http://hslpicker.com/などのツールを使用して、新しい色を選択します。

7. 新しいカラー変数を定義するか、のカラー設定を上書きしますblue6。

   • 警告：上書きblue6すると、blue6（ "句読点" "アクセサ"）も使用するその配色の他のすべてのテキスト要素に影響します。

8. ファイルを保存すると、開いているファイル/タブに変更が即座に適用されます。

ノート

Sublimeはこれらのカラースタイルのいずれかを処理します。おそらくもっと。

hsla =色相、彩度、明度、アルファrgba =赤、緑、青、アルファ

hsla（151、100％、41％、1）-最後のパラメータはアルファレベル（透明度）1 =不透明、0.5 =半透明、0 =完全透明

hsl（151、100％、41％）-アルファチャネルなし

rgba（0、209、108、1）-アルファチャネル付きのrgb

rgb（0、209、108）-アルファチャネルなし