LoginSignup
9

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-11-20

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

Sublime Textについて

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から利用する言語のハイライトを追加

現状以下を追加している

  • 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」はデフォルトで入る値

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9