ホームページ制作会社エスエムティのスタッフブログ

Staff blog

エスエムティの愉快な仲間たち

記事担当
ぴのこ

Sublime Textを導入しました

なんとなくで長らく使っているDreamweaverですが、
昨年からようやくSublime Textを導入しました。

「便利だよ」とか「軽くて良いよ」なんて声は聞いていましたし、
Dreamweaverの動作の重さにはちょっと嫌気がさしていましたので。。

一昔前、ライブラリ機能・テンプレート機能を多用していた時には
もちろんDreamweaverが必須でしたが、今は使用しませんしね。

Dreamweaverの全てを否定しているわけではなくて、
デザインビューを見ながら直接的にコードをいじるのには優れていますし、
本当に動作の重さだけがネックかなーと。

【Sublime Text】
https://www.sublimetext.com/

使ってみると、やはり起動も動作も早いですね。
Dreamweaverのように使うには色々と準備が必要ですが、
とりあえず私が入れたパッケージをご紹介します。

———————-

◆Project Manager
プロジェクト管理用に

◆ConvertToUTF8、Codecs33
Shift-JISやEUCの文字化け対策に

◆Emmet for Sublime Text
Emmetを使用可に

◆TrailingSpaces
全角半角やTabスペース等を可視化して削除できるようにする

◆BracketHighlighter
開始タグと終了タグを強調

◆AutoFileName
画像イメージやスクリプトファイルなどの参照場所を記述する際の入力補助

◆View In Browser
ブラウザでプレビュー出来るようにするパッケージ

◆SyncedSideBar
現在開いているファイルをサイドバー上でハイライト表示するパッケージ

◆A File Icon
サイドバーのファイル名の横に、拡張子固有のアイコンを表示

◆Color Highlight
「#FFF」等のカラーコードの背景に該当色を表示

◆Color Picker
カラーピッカーを表示させる

◆Goto-CSS-Declaration
htmlから該当CSSの記述箇所へジャンプ

◆SideBarEnhancements
サイドバー右クリックのメニューを拡張
デフォルトでは「リネーム」「削除」「フォルダを開く」だけですが、
これを入れるとコピー、複製、移動、検索、プロジェクトの設定などができるようになる

◆JavaScript & NodeJS Snippets
JavaScriptを素早く記述するため。

◆Advanced New File
存在しないパスやフォルダ名を自動で補完して新規ファイルを作成してくれるプラグイン

◆EditorConfig
異なるエディタ間でコーディングルールを統一するためのパッケージ

◆Color Convert
HEX → RGBA、RGBA → HEX等に変換

◆Image Preview
コードにマウスオ―バーで画像プレビューができるパッケージ

———————-

複雑なtableを組みたい時はDreamweaverを使いますが、
それ以外ではSublime Textでなんとでもなるのが面白いですね。

コーディング速度の更なる向上を目指して、勉強していきたい所です。

ぴの子

クリックしていただけると幸いです

http://www.smt-net.co.jp/


ページの先頭へ戻る

ページの先頭へ戻る

お問合せ

キャンペーン

pay-per-click