SublimeText 3をmacにインストール
Sublime Textをインストール
Jon Skinner氏が作ったSublime Text
より DOWNLOAD FOR MAC をクリックします。
ダウンロードしたダウンロードフォルダにある、dmgファイルをダブルクリックして展開します。
SublimeText.app を Applications にドラッグアンドドロップします。
Finderより、アプリケーションフォルダからSublimeTextをダブルクリックします。
"Sublime Text"はインターネットからダウンロードされたアプリケーションです。開いてもよろしいでしょうか?と表示されます。
開くボタンをクリックします。
PackageControllをインストール
Sublime Textにはプラグインという便利な機能を個別にインストールすることができます。プラグインを簡単にするPackageControllをインストールします。
Sublime Textを開いて、メニューバー「View > Show Console」 でコンソールを表示します。
https://packagecontrol.io/installation にある Pythonコードをコンソールに貼り付けます。
Enterキーを押して実行します。
Consoleを esc キーをクリックして閉じます。
Command + shift + p でパッケージコントロールを起動します。
installと入力し、pachage contol: install package を選びます。
各種プラグインの名前を入れてインストールします。
メニューを日本語化
shift + Command + p でコマンドパレットを起動します。
installと入力し、Package Control:Install Packageを選択します。
日本語化の設定
- ライブラリーフォルダーを表示します。
Finderを開いて、メニューバーにある、移動 → alt (option)キーを押すと、表示項目が増えます。
ライブラリ → Application Support → Sublime Text 3 → Packages に移動します。
Packagesの下に、Defaultフォルダを作成してください。
Packages → Japanize にアクセスします。
拡張子が.jpのファイルをコピーします。
先に作ったDefaultフォルダに拡張子が.jpのファイルをペーストします。
Defaultフォルダの拡張子が.jpのファイルから、拡張子「.jp」を取り除きます。
Defaultフォルダにある、Main.sublime-menuファイルを、Packages → Userにコピペします。
以上で日本語化完了です。
スペースとタブを表示
- コマンドパレットを表示させます。
ツール → Command Palette
shift + command + p
検索窓に settings と入力します。
Preferences: settings を選択します。
「Preferences.sublime-settings --User」ファイルが開かれるので、「"draw_white_space": "all",」を追記します。
[設定後のPreferences.sublime-settings --Userファイル]
{ "draw_white_space": "all", "ignored_packages": [ "Vintage" ] }
プラグインをインストール
A File Icon
ファイルがあるとファイル名にアイコンが表示されます。
インストール方法
command + shift + p
検索窓に install と入れます。
Package Control: Install Packageを選択します。
続いてA File Iconと入力してインストールします。
メニューバーにある
表示 → サイドバー → Show Side Bar とするとサイドバーが表示されます。
ファイル → Open → 開発したいフォルダを指定します。
All Autocomplete
HTMLや CSS などのコード保管機能。
インストール方法はA File Iconと同様にインストールします。
AutoFileName
AutoFileName 画像やリンクのパスを保管してくれます。
コマンドパレットを表示します。
command + shift + p
検索窓に install と入れます。
Package Control: Install Packageを選択します。
続いて AutoFileName を入れます。
表示されたAutoFileNameを選択します。
設定します。
環境設定 → [Package Settiongs] → [AutoFileName] → [Settings – User]
追加するコマンドは
//AutoFileNameで画像を挿入時にWidthを最初にします。
"afn_insert_width_first": true,
//AutoFileNameでwidhtとheightを挿入します。
"afn_template_languages": true,
[設定後のPreferences.sublime-settings --Userファイル]
{ "draw_white_space": "all", "afn_insert_width_first": true, "afn_template_languages": true, "ignored_packages": [ "Vintage" ] }
BracketHighlighter
タグやクォーテションマークなどの開始と終了をハイライトします。
Color Highlighter
cssカラーを表示する
ConvertToUTF8
shift-jis をutf-8 変換する。
CSScomb
Goto-CSS-Declaration
IDやクラス名に関連するCSSに飛べます。
HTML-CSS-JS Pretify
ソースの整形
shif + command + H
Markdown Extended
Markdownをシンタックスハイライトするパッケージです。
Sass
SassはCSSを拡張するプリプロセッサで、このプラグインは言語サポートを追加します。
SideBarEnhancements
サイドバーのメニューを拡張します。
SublimeLinter
リアルタイムにエラーをチェックします。
ただ、これだけだとチェックができないので、言語ごとのプラグインを入れる必要があります。
SublimeLinter-contrib-sass-lint
sassのエラーチェック
SublimeLinter-csslint
CSSのエラーチェック
SublimeLinter-html-tidy
HTMLのエラーチェック
TrailingSpaces
末尾のスペースを自動で消してくれるプラグイン
View In Browser
HTMLやCSSで編集作業をして、ブラウザに移動してリロードして、という一連の面倒な作業が簡単になります。
「control」+「alt」+「v」と入力すればブラウザが起動して編集中のファイルをレンダリングしてくれます。
ユーザー用の設定ファイルの「”browser”:“chrome”」部分のブラウザ名を変更すれば任意のブラウザを起動できます。