Sublime Textをもっと快適で便利にする、フロントエンドのWeb制作に役立つプラグインのまとめ
Post on:2017年5月10日
sponsors
Sublime Textは快適で非常に使いやすいエディタですが、そのままの状態では最近の他のエディタに機能で劣っている面があります。
エディタとしての機能を強化し、HTML, CSS, JavaScriptのコーディング作業を快適にする便利なプラグインを紹介します。
Sublime Text 3 Plugins for Frontend Web Development
キャプチャは、Sublime Text
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様のライセンスに基づき翻訳しています。
- Sublime Textの管理系プラグイン
- Sublime Textの一般系プラグイン
- Sublime TextのJavaScript関連のプラグイン
- Sublime TextのHTMLとCSS関連のプラグイン
- Sublime Textのリンター関連のプラグイン
- Sublime Textのその他便利なプラグイン
- Sublime TextのPreferencesの例
Sublime Textの管理系プラグイン
コードを書くことには直接関係しませんが、Sublime Textを最強のエディタにパワーアップさせます。
- 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の一般系プラグイン
あらゆる言語で役立つプラグインです。
- 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関連のプラグイン
- 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関連のプラグイン
- Sass
SassはCSSを拡張するプリプロセッサで、このプラグインは言語サポートを追加します。 - SassSolution
「settings.scss」ファイルの変数とミックスインの自動補完。 - CSS3
古い記述のCSSにフラグをたて、不必要な接頭辞つきのプロパティはハイライトさせず、最新のCSSサポートに置き換えます。 - Emmet
特定のキーを入力することで、HTMLを非常に速く書くことができます。 - Color Highlighter
カラーピッカーを追加して、簡単にカラーを変更することができます。
Sublime Textのリンター関連のプラグイン
リンターは、コードの誤りを早期発見するのに役立ちます。
正しく動作させるために、パッケージ内のインストール方法を確認してください。いくつかは、追加のツールをインストールする必要があります。
SublimeLinter-contrib-stylelint
- SublimeLinter
- SublimeLinter-HTML-tidy
- SublimeLinter-contrib-stylelint
CSS用。SublimeLinter-CSSlintよりこちらの方がよいでしょう。 - SublimeLinter-contrib-SCSS-lint
- SublimeLinter-contrib-ESLint
- SublimeLinter-flow
- SublimeLinter-contrib-elm-make
- SublimeLinter-JSON
Sublime Textのその他便利なプラグイン
- Markdown Preview
Sublime Textからブラウザ上で、Markdown形式をプレビューできます。 - Advanced CSV
CSVファイルのセルをフォーマットし、編集し、整列させることができます。 - Solarized Color Scheme
内蔵されているSolarizedテーマは、ES2015などの最近の構文をサポートしていません。あなた好みのカラースキームを使用してください。
Sublime TextのPreferencesの例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
{ // Disallows approving auto-complete suggestions with 'enter' to prevent ambiguous situations. // You have to get used to it but also Sublime strongly recommends it. "auto_complete_commit_on_tab": true, "auto_complete_delay": 0, // Allow auto-complete suggestion within snippets. "auto_complete_with_fields": true, "color_scheme": "Packages/Solarized Color Scheme/Solarized (light).tmTheme", "create_window_at_startup": false, "draw_white_space": "all", "ensure_newline_at_eof_on_save": true, "font_face": "Input Sans Narrow", "font_size": 15, "highlight_line": true, "ignored_packages": [ "CSS", "Vintage" ], // Highlights the indentation of the current scope. "indent_guide_options": [ "draw_normal", "draw_active" ], "indent_to_bracket": true, "rulers": [ 80 ], "tab_size": 2, "translate_tabs_to_spaces": true, "trim_trailing_white_space_on_save": true, "word_wrap": true } |
sponsors
