読者です 読者をやめる 読者になる 読者になる

Sublime Text 3のインストールと設定

Sublime Text 3のインストールと設定のメモです。

Sublime Text

普段スクリプト言語を書くときは、昔はサクラエディタでしたが、ここ数年?はsublime text3を使うことが多いです。
今人気のあるエディタはEmacs, vim, sublime text, Atomあたりだと思います。
https://job-draft.jp/articles/30
http://homeonrails.com/2016/05/how-to-be-productive-with-almost-any-editor/

sublime textの気に入っているところはフリーで多言語対応なのは当たり前ですが、
軽快な動作と、豊富なプラグインで自分の好み通りにどんどん拡張できる点です。

sublime textには2と3があって、昔は3に対応していないプラグインも多かったですが、
今はほとんど対応していると思うので、3を使ったほうがいいです。

インストール

本家サイトからwindowsインストーラをダウンロードして実行すればOK
Sublime Text - Download

Package Controll

パッケージをインストールして好みにカスタマイズしていきます。

まずはパッケージコントロールというのをインストールします。
わかりにくいのですが、まずパッケージを簡単にインストールするためのパッケージコントロールをインストールし、
その後、パッケージコントロールを利用して他のパッケージをインストールすることになります。

で、そのパッケージコントロールのインストールがちょっと面倒です。
ですが、これをインストールすれば他のパッケージは簡単にインストールできるので、我慢してインストールします。
「ctrl+`」をクリックして、下記ソースを貼り付けてEnterを押します。

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

f:id:pppurple:20161120025838p:plain

インストールすると、「Ctrl + Shift + P」を押して、「insta」まで入力すると
でPackage Controll:Install Packageを呼び出せます。

f:id:pppurple:20161120025848p:plain

ここでインストールしたいパッケージを入力するだけで
インストールできるようになります。

f:id:pppurple:20161120025856p:plain

Package

いつも入れているパッケージです。

人気のパッケージは下記から見れます。
Popular Packages - Package Control

Japanize

メニューの日本語化です。
インストールした後、表示された方法にしたがってファイルを移動すると日本語化されます。

IMESupport

日本語入力でインライン化できるようにします。

ConvertToUTF8

Shift_JISEUC-JPなどSublime Textでサポートされていない文字コードに対応するパッケージです。

Alignment

複数行で変数を定義する際に「=」の位置をそろえるパッケージです。
範囲選択して「ctrl + alt + a」で整列します。

デフォルトでは「:」には対応していないので、
[Preferences]-[Package Settings]-[Alignment]-[Settings - User]で
下記の設定を追記すると「:」でも動作するようになります。

{
  "alignment_chars": ["=",":"],
}
BracketHighlighter

下記の様なブラケットをハイライトするパッケージです。

[], (), {}, "", '', #!xml <tag></tag>
BlockCursorEverywhere

Sublime Textのデフォルトのカーソルが線なので、ブロックカーソルにしてくれるパッケージです。

All Autocomplete

デフォルトのオートコンプリート機能を強化してくれるパッケージです。

SublimeCodeIntel

下記言語の自動補完、関数のツールチップ表示をしてくれるパッケージです。
JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

Nodejs

Node.jsのシンタックススニペットです。

HTML-CSS-JS Prettify

HTML、CSS、JavaScrip、JSONのフォーマッターです

Smart Delete

行末で改行を削除した際に、次の行の先頭にあるスペースをまとめて削除するパッケージです。

SublimeLinter

Sublime Text用のリンターのフレームワークです。
これを入れた後、各言語用のリンターをインストールします。

SublimeLinter-jshint
 js用のLinterです。npmでインストールします。
 npm install -g jshint
 
 ES6に対応させるために、下記を実施。
 .jshintrcファイルを作成し、下記を記載。
 {
  "esversion": 6
 }

 .jshintrcファイルをホームディレクトリに配置
 例)C:\Users\(User Name)\.jshintrc

SublimeLinter-csslint
 css用のLinterです。npmでインストールします。
 npm install -g csslint

SublimeLinter-html-tidy
 html用のLinterです。
 https://github.com/htacg/tidy-html5/releasesから
 zipをダウンロードして展開して適当な場所に配置(スペースを含まないパス)

 環境変数Pathにtidy.exeを置いたフォルダへのパスを通す
 例)C:\Users\(User Name)\Desktop\tidy-5.2.0-win64\bin

SublimeLinter-flake8
 python用のLinterです。pipでインストールします。
 pip install flake8

Vintageous

Vimエミュレータです。

setting

基本設定 - ユーザ

個人用の設定。

{
  "auto_indent": true, // オートインデント
  "use_tab_stops": true, // trueの場合、次のタブストップまでスペースを削除
  "detect_indentation": true, // インデント幅、タブ/スペースを自動設定
  "smart_indent": true, // スマートインデント
  "draw_indent_guides": true, // インデントのガイドを表示
  "indent_to_bracket": true, // 括弧までインデントする
  "tab_size": 4, // タブサイズ(1タブのスペースの数)
  "translate_tabs_to_spaces": true, // タブではなくスペースを使用する
  "indent_guide_options": // インデントの深さのガイドラインの縦線を表示
  [
  	"draw_normal",
  	"draw_active"
  ],
  "drag_text": false, // 選択したテキストのドラッグ機能を不可に
  "draw_white_space": "all", // すべての空白にマークを表示する
  "ensure_newline_at_eof_on_save": true, // 最後の行を空白行にして保存
  "match_tags": true, // 対応する開きタグと閉じタグを強調する
  "trim_automatic_white_space": true, // キャレットを行から外したときにオートインデントで追加された空白を削除する
  "trim_trailing_white_space_on_save": true, // 保存時に行末の空白を自動で削除する
  "font_face": "Consolas", // フォントを設定
  "highlight_line": true, // 選択している行をハイライトする
  "gutter": true, // ガーターを表示する
  "line_numbers": true, // ガーターに行番号を表示
  "highlight_modified_tabs": true, // 変更されたタブをハイライトする
  "open_files_in_new_window": false, // 新しいファイルを開くときに新しいウィンドウで開かない
  "show_full_path": true, // ファイルのフルパスを表示する
  "word_wrap": "auto", // テキストがプログラムのソースコードなら折り返しが無効、それ以外は有効になる
  "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?", // 単語の区切り文字を設定する(ハイフンを外す)
  "ignored_packages": // 不要なパッケージを無効化
  [
  	"Vintage"
  ],
  "vintageous_use_ctrl_keys": true, // vintageousの設定 ctrlキーを使用するvimのショートカットを有効にする
  "vintageous_reset_mode_when_switching_tabs": false, // ファイルを開いたときにコマンドモードで始まるようにする
  "vintage_use_clipboard": true, // vintageousのヤンクとクリップボードの同期
  "vintageous_use_sys_clipboard": true,
}

キーバインド

基本設定 - キーバインド - ユーザ

キーバインドを自由に上書きできます。
Vintageousをインストールすると、Vim用のキーバインドになりますが、
自分用のVimキーバインド設定を追記してます。

// vintageous用設定
[
    {
        "keys": ["ctrl+alt+l"],
        "command": "reindent" ,
        "args": { "single_line": false } },
    {
        "keys": ["ctrl+["],
        "command": "_enter_normal_mode",
        "args": {"mode": "mode_insert"},
        "context": [{"key": "vi_insert_mode_aware"}]
    },
    {
        "keys": ["j", "j"],
        "command": "_enter_normal_mode",
        "args": {
            "mode": "mode_insert"
        },
        "context": [{"key": "vi_insert_mode_aware"}]
    },
    {
        "keys": ["ctrl+e"],
        "command": "move_to",
        "args": {"to": "eol", "extend": false}
    },
    {
        "keys": ["ctrl+a"],
        "command": "move_to",
        "args": {"to": "hardbol", "extend": false}
    },
    { "keys": ["alt+right"], "command": "next_view" },
    { "keys": ["alt+left"], "command": "prev_view" },
]

終わり。