自分用にSublimeTextの設定を残しておくよ


# まえがき
開発で使用するエディタとしてSublimeTextを使っているのですが、
ふと見たら自宅ノートPCに入ってるものは諸々の設定がされていませんでした。。

なので、ついでにココに記録を残しておいて、
また新しいPCを使うときに利用しようかと思います。


# インストール
Sublime Text 3はここ。

[Download - Sublime Text](https://www.sublimetext.com/3)


# ライセンスの登録
すでに購入したものがメールに届いているので、
その本文に記載されたライセンスコードをコピペする。


# Package Control
[Installation - Package Control](https://packagecontrol.io/installation)

(2020/05/04追記)
いつの間にかコンソールからソース実行しなくてよくなったんですね。
コマンドパレット（ctrl+shift+p）開いて `Install Package Control` 入力だけでいいのは助かる。


# 各種設定ファイル
一部プラグインの設定もあるので、後で書いたほうがいいかもしれないけど、
そのまま忘れそうなのでここで記載する。

## Settings
```json:Preferences.sublime-settings
{
    "color_scheme": "Packages/Theme - Cobalt2/cobalt2.tmTheme",
    "default_line_ending": "unix",
    "draw_white_space": "all",
    "font_face": "MyricaM M",
    "font_options":
    [
        "no_italic"
    ],
    "font_size": 11,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
    ],
    "indent_guide_options":
    [
        "draw_normal",
        "draw_active"
    ],
    "show_encoding": true,
    "show_line_endings": true,
    "tab_size": 4,
    "theme": "Cobalt2.sublime-theme",
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true,
    "vintage_start_in_command_mode": true
}
```

- カラーテーマは`Cobalt2`を使ってる
- フォントは`MyricaM M`を使ってる（Myricaのインストールが必要）
- `ignored_packages`から`Vintage`を削除

あとは大体見たまんま。

## KeyBindings
```json:Default(Windows).sublime-keymap
[
  { "keys": ["ctrl+tab"], "command": "next_view" },
  { "keys": ["ctrl+shift+tab"], "command": "prev_view" },
  { "keys": ["ctrl+pagedown"], "command": "next_view_in_stack" },
  { "keys": ["ctrl+pageup"], "command": "prev_view_in_stack" },
  { "keys": ["ctrl+t", "ctrl+t"], "command": "goto_definition" },
  { "keys": ["ctrl+t", "ctrl+r"], "command": "jump_back" },
  { "keys": ["ctrl+t", "ctrl+y"], "command": "jump_forward" },
  { "keys": ["f5"], "command": "refresh_folder_list" },
  { "keys": ["ctrl+shift+h"], "command": "goto_documentation" }
]
```

- `GotoDocumentation`と`SublimeCodeIntel`の設定もあるけど気にしない
    - それぞれのところでも記載しておく

- デフォルトのタブ移動だと落ち着かないので書き換え

- たまにサイドバーが更新されないのでF5を入れとく



# プラグイン
入れてるプラグインを順不同で記載。
使ってるヤツだけ記載しているので、概ねこの通りにいれればいいハズ。。

## ConvertToUTF8
たまにSJISとかのファイルを開いたときに文字化けるので、
それを解消するために使ってる。

特に設定とかは不要で、インストールすればそれでOK。

## Case Conversion
名前の通り、文字列のケース変換が出来るプラグイン。
主にキャメルケース⇔スネークケースの変換で使ってる。

いろんなPrjを横断して作業してたりすると、
うっかり変数名などがスネークケースだったりキャメルケースだったり揺らいでしまうから。。

これもインストールのみ。

## DocBlockr
ファンクションコメントのテンプレートを表示してくれるヤツ。
書くのがクセになってはいるものの、イチから全部書くのはメンドくさいので。。。

これもインストールすれば全て終わり。

## GotoDocumentation
実行すると、いまカーソルがあたっている単語に対してマニュアルページをブラウザ表示してくれる。
プログラムの種類によって開くマニュアルは判断してくれるので、
PHP上でやればPHPマニュアル、JS上でやればMDNドキュメントが開く。

プログラム側で用意されている標準関数の引数やオプションが分からなくなったときに使う。

インストール後、KeyBindingsを変更する。

```json:Default(Windows).sublime-keymap
[
  { "keys": ["ctrl+shift+h"], "command": "goto_documentation" }
]
```

なんとなくこのショートカットキーが落ち着くので。

やってないけど、もし開くページ先を変えたい場合は、ユーザー設定に`docs`を用意すればいいハズ。

## SyncedSideBar
←のプロジェクトフォルダの表示位置を、いま開いているプログラムソースの位置にする。

これ、そろそろデフォルトの機能で用意してくれないのかなぁ・・・・。

## SublimeCodeIntel
定義ジャンプやコード補完をしてくれるプラグイン。

インストール後、KeyBindingsを変更する。

```json:Default(Windows).sublime-keymap
[
  { "keys": ["ctrl+t", "ctrl+t"], "command": "goto_definition" },
  { "keys": ["ctrl+t", "ctrl+r"], "command": "jump_back" },
  { "keys": ["ctrl+t", "ctrl+y"], "command": "jump_forward" }
]
```

昔使ってたエディタ（Eclipseだったかも？）の定義ジャンプが↑のショートカットキーだったので。

## OmniMarkupPreviewer
Qiita記事などのマークダウンファイルを書くときにもSublimeTextを使っているので、
そのプレビュー用に使ってる。

インストールすればOK・・・・のハズ。。

### エラーになった
ブラウザ上で表示しようとしたら404エラーになった。。。
調べたところ、そのものズバリなページがあった。

[OmniMarkupPreviewerでブラウザプレビューすると404エラーになる](http://mikan.lunarscape.net/2016/09/omp-404error.html)

助かるわぁ～(´▽｀)

## Color Highlighter
CSSとかをいじる際に地味に助かる、カラー表示用のプラグイン。
昔は別なのを使ってたハズなんだけど、それが見つからなかったのでコレを入れてる。

インストールだけでも使えるが、一応ユーザー設定。

```json:ColorHighlighter.sublime-settings
{
    "ha_style": "Filled",
}
```

色を塗りつぶすように変更。


## InputSequence
複数個所選択していると、そこに連番をいれてくれるプラグイン。
いつも使うものではないけど、ちょっとしたときに助かる。

Package Controlには非対応なので、READMEを参考に入れる。

[kazu1107/InputSequence](https://github.com/kazu1107/InputSequence)

使い方は、

1. 連番いれたい箇所を複数個指定
2. `ctrl+shift+0`をいれる
3. 画面下部に出る入力欄へ連番の最初の値をいれる

でOK。

## IMESupport

~~素の状態で日本語を入力すると、なんか画面外に入力欄が出てちと不便。。~~
~~IMESupportは、日本語入力でも適正位置に表示してくれるプラグイン。~~

~~[Sublime Text 3 のインストール手順と使い方をとにかく簡単にまとめてみる（2018春）](https://qiita.com/Hisamaro/items/4178177f709c41d3ebfd)~~


~~こちらで紹介されてました。~~
~~結構長く使ってたのに知らんかった・・・・(-_-;)~~

(2020/05/04追記)
新しくインストールしたら、素の状態で日本語入力ができるようになってました。
なので、不要。


## シンタックスハイライト
ソースのシンタックスハイライトのために入れているのは下記。

- Babel
- INI
- nginx
- Smarty

`Babel`以外はなくてもいい気がするけど、、、

入れたあとで、対象ファイルに紐づけるのを忘れずに。


## SublimeLinter
お馴染みSublimeLinter。

各Linterについて記載。

なお、いちいち書くのが面倒だったので端折ってるが、
各対応をしたあとで設定がSublimetextを再起動（閉じる→開く）して適用する。
じゃないと反映されたか確認ができない。。。


### SublimeLinter
インストールしてユーザー設定を用意する。
設定内容については[別に書いた](https://qiita.com/clustfe/items/8e8f2f433b68d0d7ae78)のでそっち見ればいけるはず・・・・。

### Sublimelinter-php
単純なPHPの構文エラー等をはじくもの。

大前提として、PHPをPCにいれる。
公式サイトからダウンロードしたものをどっかに置いとけばいい。

ユーザー設定に

```json:SublimeLinter.sublime-settings
    "linters": {
        "php": {
            "cmd": "/path/to/php/exe"
        }
    },
    "paths": {
        "linux": [],
        "osx": [],
        "windows": [
            "/path/to/php/dir"
        ]
    },
```

を追記する。
`linters`にはphp.exeまでのパスを、`paths`にはphp.exeがあるディレクトリまでのパスを入れる。


### Sublimelinter-phpmd
(2020/05/27 一部変更)

PHPMDは静的チェックツールで、

- 未使用の変数、メソッド、プロパティなどの検出
- 不適切な変数名、メソッド名、プロパティ名などの検出
- 巨大な、複雑な処理の検出

・・・・などなどをおこなうもの。
特に未使用変数のチェックとかしてほしかったので使用。

先にcomposerでPHPMDをインストールする。

`php composer global require phpmd/phpmd=*`

プロジェクト単位ではなく全体で使うのでグローバルにインストール。

インストール後、Sublimelinter-phpmd をインストールして、
以下をSublimelinterの設定に追記。

```json:SublimeLinter.sublime-settings
    "linters": {
        "phpmd": {
            "args": [
                "codesize",
                "design",
                "naming",
                "unusedcode"
            ]
        }
    }
```

phpmdをグローバルにインストールした場合、
パスを指定しなくても動くみたい。
指定する場合は `cmd` か `executable` で設定するのかな？（やってないので不明）

`args`はチェック時に使用するPHPMDのルール。
ざっくり↓な感じ


| ルール | 概要 |
| ------ | ---- |
| cleancode | 整形ルール。「見やすいコード、使いやすいコードにしようぜ」て感じっぽい |
| codesize | メソッド、クラスの長さやサイズルール。「もっと分割しなさい」的な指摘がメインっぽい |
| controversial | Controversial＝議論。キャメルケースとスネークケースの指摘 |
| design | 継承の親/子関係が多すぎる、デバッグ文がある、など「考え直せ」「見直せ」的な感じ |
| naming | ルール名通り、変数名やメソッド名などの名前に関するルール。 |
| unusedcode | ルール名通り、使ってないコードを指摘する。コレのためにPHPMDいれてる |

うるさいので`cleancode`と`controversial`は除いてる。。
`cleancode`はクラス定数を使っても怒られるのがイヤだった。
`controversial`は**ウルセー！！(ﾟДﾟ＃)**てなったのでナシに。


### Sublimelinter-phpcs
あまりコーディングルールについて気にするPrjがないので使ってない。
「使ってない」てことを書いておかないと「書き忘れた？！(；ﾟДﾟ)」と自分が混乱しそうなので残しとく。

### SublimeLinter-annotations
`@todo:`とか`FIXME:`をハイライトしてくれる。
ないと地味に困る。。

コイツは特段設定するものはない。


### Sublimelinter-eslint
ReactなJSを見たり書いたりするときに使ってる。

先にeslintをインストール。

`npm install -g eslint`

npmがなければnvmとかnodebrewとかを使ってインストールする。

次に、`.eslintrc`を用意する。
どうも、SublimeLinterがバージョン4になってからeslintのルール設定が必須になったっぽい。

```json:.eslintrc
{"rules": {}}
```

こんだけでいい。

で、Sublimelinter-eslintを入れた後、やっぱりユーザー設定を追記。

```json:SublimeLinter.sublime-settings
    "linters": {
        "eslint": {
            "@disable": false,
            "args": [
                "--config",
                "/path/to/.eslintrc"
            ],
            "excludes": []
        },
    }
```

### Babelに対応したSublimelinter-eslint
eslintだけだとES6に対応したチェックがされず、`import`で怒られたりしてうるさい。。。
ので、Babelに対応したeslintを入れる。

`npm install -g babel-eslint`

`.eslintrc`も変更

```json:.eslintrc
{
    "parser": "babel-eslint",
    "rules": {
    }
}
```

Sublimelinter-eslintの方は設定変更なし。

## カラーテーマ
ここら辺？

- Cobalt2 Flat Theme
- Theme - Cobalt2
- Material Theme

Material Themeはサイドバーでのアイコン表示とかで使ってるハズ。

まぁ、また時間みて試せばいいかな。。

# あとがき
これで普段つかってる環境っぽくなったので大丈夫・・・・だと思う。

ついでなので、何か新しくプラグインをいれたときはココに追記する予定。