Sublime Textをもっと快適で便利にする、フロントエンドのWeb制作に役立つプラグインのまとめ

Sublime Textは快適で非常に使いやすいエディタですが、そのままの状態では最近の他のエディタに機能で劣っている面があります。

エディタとしての機能を強化し、HTML, CSS, JavaScriptのコーディング作業を快適にする便利なプラグインを紹介します。

サイトのキャプチャ

Sublime Text 3 Plugins for Frontend Web Development
キャプチャは、Sublime Text

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様のライセンスに基づき翻訳しています。

Sublime Textの管理系プラグイン

コードを書くことには直接関係しませんが、Sublime Textを最強のエディタにパワーアップさせます。

プラグインのキャプチャ

ProjectManager

  • Package Control
    ここで紹介するプラグインやパッケージをインストールするためのものです。Build 3124以降、メニュー「Tools - Install Package Control」からインストールできるようになりました。
  • AdvancedNewFile
    新しいファイルを簡単に作成できます。また必要に応じて、フォルダを自動的に作成します。
  • SideBarEnhacements
    サイドバーにファイルの名前を変更するなどの機能を追加します。
  • A File Icon
    サイドバーのファイルにアイコンを追加します。
  • ProjectManager
    プロジェクトで使用するファイルを簡単に組織化することができます。
  • TodoReview
    TODOなどのファイルをスキャンします。
  • FindKeyConflicts
    さまざまなプラグインを使用した時に生じる重複されたショートカットキーを見つけ、解決します。
  • Editor Config
    異なるエディタ間で一貫したコーディングスタイルを維持します。
  • Sync Settings
    Github-Gistを経由して、Sublime Textの環境設定を同期させます。
  • Package Syncing
    Dropboxを経由して、Sublime Textの環境設定やパッケージを同期させます。
  • SFTP
    FTPSとSFTP経由でファイルをサーバーに転送します。

Sublime Textの一般系プラグイン

あらゆる言語で役立つプラグインです。

プラグインのキャプチャ

BracketHighlighter

  • All Complete
    Sublime Textのデフォルトでは、オートコンプリートは現在のファイルで見つかった単語のみですが、開いているすべてのファイルから見つけ出すことができます。
  • BracketHighlighter
    <>,[], (), {}, "", '', <tag></tag>など、ブラケットの始点・終点を分かりやすくハイライト表示します。
  • Terminal
    現在のファイルまたはルートプロジェクトフォルダからターミナルを起動します。
  • AlignTab
    =, :, =>, %など、正規表現でコードを整列させます。
  • GitGutter
    変更・削除された箇所を行単位で明示します。
  • Git
    Gitのコマンドが利用できるようになります。
  • GitSavvy
    Sublime Text 3で、gitとGitHubのインテグレーション。
  • Local History
    ファイルのローカル履歴を保存します。
  • DashDoc
    選択したテキストやテキストをDashドキュメントブラウザのカーソルで開きます。

Sublime TextのJavaScript関連のプラグイン

プラグインのキャプチャ

JavaScript & NodeJS Snippets

  • Tern for Sublime
    オートコンプリート、関数の引数のヒント、「定義への移動」などを含む静的なJavaScriptコードアナライザ。インストールと設定はちょっと難しいかもしれませんが、それはそれだけの価値があります。
  • JavaScript & NodeJS Snippets
    JavaScriptとNodeJSのスニペットが利用できます。
  • JsPrettier
    JavaScriptフォーマッタであるPrettierのインテグレーション。
  • Console Wrap
    コンソールに簡単にログインできます。
  • Babel
    React JSX拡張機能を備えたES6 JavaScriptの構文定義。
  • TypeScript
    TypeScript言語サービスのIOラッパー。エディタプラグインによる簡単な使用が可能です。
  • Elm Language Support
    Elm言語をサポートしたシンタックスハイライト。

Sublime TextのHTMLとCSS関連のプラグイン

プラグインのキャプチャ

CSS3

  • Sass
    SassはCSSを拡張するプリプロセッサで、このプラグインは言語サポートを追加します。
  • SassSolution
    「settings.scss」ファイルの変数とミックスインの自動補完。
  • CSS3
    古い記述のCSSにフラグをたて、不必要な接頭辞つきのプロパティはハイライトさせず、最新のCSSサポートに置き換えます。
  • Emmet
    特定のキーを入力することで、HTMLを非常に速く書くことができます。
  • Color Highlighter
    カラーピッカーを追加して、簡単にカラーを変更することができます。

Sublime Textのリンター関連のプラグイン

リンターは、コードの誤りを早期発見するのに役立ちます。
正しく動作させるために、パッケージ内のインストール方法を確認してください。いくつかは、追加のツールをインストールする必要があります。

プラグインのキャプチャ

SublimeLinter-contrib-stylelint

Sublime Textのその他便利なプラグイン

プラグインのキャプチャ

Solarized Color Scheme

  • Markdown Preview
    Sublime Textからブラウザ上で、Markdown形式をプレビューできます。
  • Advanced CSV
    CSVファイルのセルをフォーマットし、編集し、整列させることができます。
  • Solarized Color Scheme
    内蔵されているSolarizedテーマは、ES2015などの最近の構文をサポートしていません。あなた好みのカラースキームを使用してください。

Sublime TextのPreferencesの例

sponsors

top of page

©2018 coliss