[ Web 制作者のための Sublime Text の教科書 – 今すぐ最高のエディタを使いこなすプロのノウハウ ] を読んだ

表紙のオレンジが印象的な [ Web 制作者のための Sublime Text の教科書 – 今すぐ最高のエディタを使いこなすプロのノウハウ ] を読みました。

sublimetext

▲ オレンジが印象的な表紙

以下、目次に沿って気になった所をメモしています。

第 1 章 Sublime Text を導入しよう
———————————————————————-

### 1-1 Sublime text とは

Sublime Text の特徴など。

– コード補完
– スニペット機能
– 複数箇所のリアルタイム編集 – [ Multiple Selections ]
– ファイル・プロジェクトのインクリメンタル検索 – [ Goto Anything ]
– ミニマップ
– パッケージによる機能拡張
– クロスプラットフォーム

### 1-2 Sublime Text のダウンロードとインストール

– 公式サイトは、[Sublime Text: The text editor you’ll fall in love with](http://www.sublimetext.com/)
– 早速、Sublime Text 3 をインストールしてみました。
– Sublime Text 本体とパッケージは、自動的にアップデートされるんだそうな。

### 1-3 Sublime Text の画面解説

– フルスクリーンモードと集中モードというのがあるんだそうな。

### 1-4 対訳付きメニュー一覧

– 英語メニュー難しす!
– でも、英語メニューで頑張ります。

### 1-5 Sublime Text の環境設定

– 言語ごとに環境設定を変更できる。

### 1-6 パッケージのインストール

– 特になし。

### 1-7 日本語環境の設定

– [ ConvertToUTF8 ] というパッケージは、Shift_JIS のファイルを開いて編集できる。保存も Shift_JIS で行われる。
– [ Code33 for ST3 ] Mac 版の Sublime Text 3 で ConvertToUTF8 を使うために必要。

### 1-8 テーマの変更

– テーマのオプションも環境設定で変更できるようだ。
– サイドバーのアイコンも変更できる。

第 2 章 覚えておきたい標準機能
———————————————————————-

### 2-1 基本的な編集機能

– 複数行を同時に編集できる Split into Lines が便利そう。使わないと忘れそう。
– 文字列を選択していない状態でコピーすると行全体がコピーされる。
– ST3 から履歴ペーストが出来るようになった

### 2-2 コーディングルールに対応する

– 特になし。

### 2-3 プロジェクトの活用

– ST3 からプロジェクトフォルダ内の画像ファイルがプレビューできるようになった。

### 2-4 コード入力に役立つ機能

– 特になし。

### 2-5 HTML / CSS に役立つ機能

– img タグの src 属性の入力補助と、width / height まで入力してくれる [ AutoFileName ] というパッケージが便利そう。

2-6 プログラミングに役立つ機能

– [ Edit ] → [ Permute Lines ] → [ Unique ] で重複行を削除できる

第 3 章 パッケージで機能拡張しよう
———————————————————————-

### 3-1 パッケージについてもっと詳しく知っておこう

– 特になし。

### 3-2 パッケージを管理する

– 特になし。

### 3-3 パッケージの探し方

– パッケージは、[Package Control – the Sublime Text package manager](https://sublime.wbond.net/) で探せる。

### 3-4 パッケージを開発する

– パッケージはPython で開発できる
 
第 4 章 プロが教える特撰パッケージ
———————————————————————-

### 4-1 どんなときにも役に立つ必須パッケージ

– [ SideBar Enhancements ] サイドバーの右クリックを拡張するパッケージが便利そう。

ST3 の場合は、パッケージを入れなくても環境設定で文字コード改行コードを表示できる。

“show_encoding”: true, // 文字コードを表示
“show_line_endings”: true, // 改行コードを表示

### 4-2 Web 制作に役立つパッケージ

– 特になし。

### 4-3 Emmet や Hayaku で HTML / CSS の入力を効率化する

– 特になし。

### 4-4 JavaScript での開発に役立つパッケージ

– 特になし。

### 4-5 サーバサイドから Markdown までさまざまな言語用のパッケージ

– 特になし。

### 4-6 ソース管理システムや簡易 Web サーバを運用する

– 特になし。

付録
———————————————————————-

### ショートカットキー一覧

– まとまってて便利。

### 環境設定一覧

とても参考になりました。現在の僕の設定は、次のような感じ。

“font_face”: “Osaka-mono”,
“font_size”: 12,
“line_padding_bottom”: 3, // 行の下の間隔
“line_padding_top”: 3, // 行の上の間隔
“draw_minimap_border”: true, // マウスオンでミニマップの現在地にボーダーを表示
“always_show_minimap_viewport”: true, // 常にミニマップのボーダーを表示
“highlight_line”: true, // キャレットのある行をハイライトする
“caret_style”: “wide”, // キャレットのスタイルを太く
“scroll_past_end”: true, // 最終行からさらにスクロールできる
“hot_exit”: false, // 未保存ファイルの復元
“show_encoding”: true, // 文字コードを表示
“show_line_endings”: true, // 改行コードを表示

感想
———————————————————————-

とても、わかりやすく Sublime Text の全容が理解できました。
今まで、クロスプラットフォームのテキストエディタを探しても、Emacs や Vim 等コピペのキーバインドが馴染めず挫折してきましたが、Sublime Text だったらいけそうな気がします!

ありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です