Sublime Textの環境構築(随時更新予定)

Sublime Textのインストールから各種設定。

Sublime Textについて

• Sublime Text - Download
• 開発者に特化したテキストエディタ
• 有料
• Atomに比べ軽い
• 日本語が弱い

Package

Package Controlのインストール

Packageをインストールする前に、Package Controlのインストールが必要。

1. Installation - Package Controlにアクセス
2. 記載さているコード「import .......write(by)」をコピー
3. Sublime Textを開き、「View > Show Console」を選択後、コードをペーストしReturn
4. 再起動し、「Preference > Package Control」が選択できるようになっていたら完了

インストール方法

1. cmd+shift+p(もしくは「Tools > Command Palet」)を実行し、コマンドパレットを表示
2. 「install」と入力。「Package Control: Install Package」を選択
3. インストールしたいパッケージ名を入力して実行、インストールする

インストール済

• ConvertToUTF8：shift_jisのファイルを開いた際の文字化けを防ぐ
• Codecs33：同様に文字化けを防ぐ
• emmet：HTML、CSSの記述・編集を効率的に
• All Autocomplete：入力補完
• AutoFileName：ファイル参照強化
• SublimeCodeIntel：JavaScript、HTML等の入力補完
• BracketHighlighter：タグの開始・終了をハイライト
• Syntax-highlighting-for-Sass：sassのハイライト
• Alignment：コードの位置調整
• HTML5：htmlの入力補完
• Java​Script & Node​JS Snippets：JavaScriptの入力補完
• jQuery：jQueryの入力補完
• SublimeLinter：文法チェック
• SublimeLinter-jshint：JavaScriptの文法チェック
• SublimeLinter-jsxhint：JSXの文法チェック
• SublimeLinter-csslint：CSSの文法チェック
• SublimeLinter-contrib-scss-lint：SASSの文法チェック
• Color Highlighter：コードの色指定の色を表示
• Ecmascript Syntax：EcmaScriptのシンタックス追加
• SideBarEnhancements：サイドバー強化
• Can I Use：CSSのプロパティについて各環境の対応状況をチェックできる
• View in Browser：開いているHTMLを設定したブラウザで開く
• Advanced​New​File：ファイル制作を瞬時に行う
• SublimeCodeIntel：目的のfunctionが定義されているjsファイルにジャンプ
• React Snippets：Reactのスニペット
• Babel Snippets：Babelのスニペット

他、language packから利用する言語のハイライトを追加

• language syntax - Labels - Package Control

現状以下を追加している

• Angular2
• Babel
• TypeScript

Theme

たまにバグる為、デフォルトを利用。Matrialを入れる。「Preferences > Settings」の「color_scheme」「theme」を以下に変更。

"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
"theme": "Material-Theme.sublime-theme",

Settings

• 「Preferences > Settings」のUserの画面で以下をペースト

    {
    	"always_show_minimap_viewport": true,
    	"auto_complete_commit_on_tab": true,
    	"auto_complete_triggers":
    	[
    		{
    			"characters": "<>\"'-_qazwsxedcrfvtgbyhnujmikolpQAZWSXEDCRFVTGBYHNUJMIKOLP",
    			"selector": "text, source, meta, string, punctuation, constant"
    		}
    	],
    	"auto_match_enabled": true,
    	"bold_folder_labels": true,
    	"caret_style": "phase",
    	"color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
    	"create_window_at_startup": false,
    	"drag_text": true,
    	"draw_white_space": "all",
    	"ensure_newline_at_eof_on_save": true,
    	"find_selected_text": true,
    	"font_face": "Migu 1P Regular",
    	"font_size": 15,
    	"highlight_line": true,
    	"highlight_modified_tabs": false,
    	"ignored_packages":
    	[
    		"Vintage"
    	],
    	"line_numbers": true,
    	"line_padding_bottom": 2,
    	"line_padding_top": 2,
    	"match_tags": true,
    	"overlay_scroll_bars": "enabled",
    	"show_encoding": true,
    	"show_full_path": true,
    	"show_line_endings": true,
    	"smart_indent": true,
    	"tab_size": 2,
    	"theme": "Default.sublime-theme",
    	"translate_tabs_to_spaces": true,
    	"trim_trailing_white_space_on_save": true,
    	"word_wrap": true,
    	"fold_buttons": true,
    	"auto_indent": true,
    	"smart_indent": true
    }
  

• ※場所：~/Library/Application Support/Sublime Text 3/Packages/User

• 指定フォント：Miguフォント : M+とIPAの合成フォント

他の設定

JSX/Babel のハイライト

jsx記法のjsファイルを開いた際、デフォルトのJavaScriptシンタックスが正しく表示しないため設定

1. JSファイルを開く
2. 「View > Syntax > Open All with current...」から「Babel > JavaScript(Babel)」を選択

Cmd+bでブラウザで確認できるようにする(view in browser)

1. 「Preferences > Keybinds」を選択

2. Defaultの内容をUserにペースト

3. Userの方に以下を追加

    { "keys": [ "super+b" ], "command": "view_in_browser" },
   

4. ショーットカットキーのコンクリフト調整。「"super+b"」で検索して対象を削除

    「"super+b"」だけ削除
    { "keys": ["super+k", "super+b"], "command": "toggle_side_bar" },
    一行削除(もしくはコメントアウト)
    //{ "keys": ["super+b"], "command": "build" },
   

さらに、起動ブラウザをChromeにする場合は

1. 「Preferences > Package Settings > View in browser > Settings - Default」を選択

2. 内容をコピー

3. 「Preferences > Package Settings > View in browser > Settings - User」を選択

4. 内容をペースト

5. 一番下の「"browser": "firefox"」を以下に変更

    "browser": "chrome"
   

6. cmd+bで挙動を確認

※「Settings - Default」が空の場合があったので、以下に残しておく(OSX)

{
  "posix": {
    "darwin": {
      "firefox": "open -a \"/Applications/Firefox.app\"",
      "safari": "open -a \"/Applications/Safari.app\"",
      "chrome": "open -a \"/Applications/Google Chrome.app\"",
      "chrome64": "open -a \"/Applications/Google Chrome.app\""
    }
  },
  "browser": "chrome"
}

Linterの設定

Packageをインストール後、ターミナルを開き以下を実行

sudo npm install -g jshint
sudo gem install scss_lint
sudo npm install -g jsxhint

sublコマンドのインストール

ターミナルを開き以下を実行

sudo ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl

カレントディレクトリをsublimeで開く

subl .

emmetの設定

1. 「Preferences > Package Settings > Emmet > Settings - User」を選択

2. 以下のコードをペーストして保存

   {
       "snippets": {
           "variables": {
               "lang": "ja",
               "locale": "ja-JP",
               "charset": "UTF-8",
               "indentation": "\t",
               "newline": "\n"
           }
       }
   }
   

作業がはかどるショートカット

2分割

• cmd+option+2

ブラウザで開く(view-in-browser)

※上記が設定されていることが前提

• cmd+b

指定した行に飛ぶ

• Ctrl+g

ファイルを追加する(Advanced​New​File)

• cmd+alt+n

Java​Script & Node​JS Snippetsチート

JavaScript & NodeJS Snippets - Packages - Package Control

• [cl] console.log
• [gi] getElementById
• [ih] innerHTML

Snippet

保存場所

~/Library/Application Support/Sublime Text 3/Packages/User

作り方

1. 「Tools > Developer > New Snippet...」を選択

2. 以下「CDATA」で囲んである箇所を調整する

     <content><![CDATA[
    Hello, ${1:this} is a ${2:snippet}.
    ]]></content>
   

3. 保存。ファイル名が呼び出しキーワードになるので呼び出しやすいファイル名(英語)で保存の事

備考

• 呼び出し方はshift+cmd+pでパレットを呼び出し、保存したファイル名を入力
• 拡張子は「sublime-snippet」
• tabで飛び先を指定したい場合は「${1:this}」のように指定する。「this」はデフォルトで入る値