webdevqa.jp.net

Sublime 2/3の言語の構文強調表示を変更/追加します

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

たとえば、JavaScriptでキーワードthisに色を付けます。

どうやってやるの?

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

90
Niklas

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

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

それが起こると、私は Neon Color Scheme を開発しました。これは、Package Controlから入手できます。私の主な目標は、幅広い言語を可能な限り見栄えよくすることを試みることに加えて、できるだけ多くの異なるスコープを特定することでした-標準テーマに含まれる範囲をはるかに超えるものです。たとえば、JavaScript言語の定義はPythonほど完全ではありませんが、Neonは、MonokaiSolarizedなどのデフォルトよりもさらに多様性があります。

jQuery highlighted with Neon Theme

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

UPDATE

最近、別のJavaScript置換言語定義を発見しました- JavaScriptNext - ES6 Syntax 。ベースJavaScriptまたはより優れたJavaScriptよりも多くのスコープを持ちます。同じコードでは次のようになります。

JavaScriptNext

また、最初にこの答えを書いたので、@ skurodaはPackage Control経由で PackageResourceViewer をリリースしました。 .sublime-packageパッケージの一部または全体をシームレスに表示、編集、および/または抽出できます。したがって、選択した場合、Sublimeに含まれる配色を直接編集できます。

別の更新

ほぼすべてのデフォルトパッケージ Githubで のリリースに伴い、変更は急速かつ猛烈に行われています。古いJS構文はJavaScript Next ES6構文の最良の部分を含むように完全に書き直され、現在では可能な限り完全にES6互換です。 tonの他の変更は、コーナーケースとエッジケースをカバーし、一貫性を改善し、全体的に改善するために行われました。新しい構文は(現時点では)最新の dev build 3111に含まれています。

現在の beta build 3103で新しい構文のいずれかを使用する場合は、Githubリポジトリをどこかで複製し、JavaScript(または任意の言語)をPackagesディレクトリにリンクします。 -Preferences -> Browse Packages...を選択してシステム上で見つけます。その後、元のリポジトリディレクトリでgit pullを時々実行して、変更を更新するだけで、最新かつ最高のものを楽しむことができます!レポは古い.sublime-syntax形式ではなく新しい .tmLanguage 形式を使用するため、3084より前のST3ビルドまたはST2(両方の場合にアップグレードする必要があります)とにかく、最新のベータまたは開発ビルド)。

私は現在、新しいJS構文のすべての新しいスコープを処理するためにネオンカラースキームを調整していますが、ほとんどは既に説明されているはずです。

93
MattDMo

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

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)。

次に、任意のテキストエディタで開いて、たとえばJavaScriptのthisを変更するために、何かを変更/追加できます。

<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>

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

30
Niklas

パッケージコントロールを介してインストールされた PackageResourceViewer プラグインを使用します( MattDMo で述べたとおり)。これにより、Sublime Textで単に開いてファイルを保存するだけで、圧縮されたリソースを上書きできます。編集されたリソースのみが自動的に%APPDATA%/ Roaming/Sublime Text 3/Packages /または〜/ .config/sublime-text-3/Packages /に保存されます。

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

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

14
chawkinsuf

「this」はすでにJavascriptで色付けされています。

「表示」->「構文」->強調表示する言語を選択します。

5
Epirocks