web系レポート

web系勉強会に参加したことをまとめます。

SublimeText 3をmacにインストール

Sublime Textをインストール

Jon Skinner氏が作ったSublime Text

https://www.sublimetext.com

より 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を選択します。

  • japanize と入力しjapanizeを選択します。

日本語化の設定

  • ライブラリーフォルダーを表示します。

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”」部分のブラウザ名を変更すれば任意のブラウザを起動できます。

W3CValidators