hi3103の備忘録

SublimeLinterとは

SublimeLinter
http://www.sublimelinter.com/

SublimeText上でコードの構文チェックをリアルタイムで行えるプラグイン

手順

1. 「SublimeLinter」本体をインストール
2. 言語ごとに必要なプラグインを別途インストール

本体のインストールと設定

SublimeLinterをインストール

GitHub – SublimeLinter
https://github.com/SublimeLinter

• Package Controlから「SublimeLinter」をインストール。

エラーアイコンを見やすくする

• 初期設定のエラーアイコンは、ErrorもWarningもただの●マークで視認性が悪いので、それぞれの表示を×と△がに変更する。

↓

• ツールバー > Preferences > Package Settings > SublimeLinter > Setting
  • またはコマンドパレット(cmd+shift+P)から Preferences: SublimeLinter Settings
• 右側のユーザー設定に以下を追記。

{
    "styles": [{
        "mark_style": "outline",
        "priority": 1,
        "scope": "sublimelinter.mark.warning",
        "icon": "triangle",
        "types": [
            "warning"
        ]
    }, {
        "mark_style": "outline",
        "priority": 1,
        "scope": "sublimelinter.mark.error",
        "icon": "x",
        "types": [
            "error"
        ]
    }]
}

• 上記の outline を fill に変更すると、エラーが出ている箇所がより目立つ。

参考

• Gutter Themes — SublimeLinter 3.4.24 documentation
• Mark Styles — SublimeLinter 3.4.24 documentation
• Icons in custom gutter theme · Issue #1125 · SublimeLinter/SublimeLinter · GitHub

言語別プラグインインストール

HTML

GitHub – SublimeLinter/SublimeLinter-html-tidy
Before installing this plugin, you must ensure that tidy or tidy5 are installed on your system. tidy5 will be used over tidy if available.

• Mac OS X – tidy comes preinstalled on recent versions of Mac OS X. You can install the html5 version by using Homebrew and brew install tidy-html5.

エラー表示サンプル

必要なもの

• HTML Tidy

手順

• Terminalから以下を実行

$ brew install tidy-html5

• Package Controlから「SublimeLinter-html-tidy」をインストール。

CSS

GitHub – SublimeLinter/SublimeLinter-csslint
Before installing this plugin, ensure that csslint (version 0.10.0 or later) is installed on your system.

エラー表示サンプル

必要なもの

• Node.js
• GitHub – CSSLint/csslint

手順

• node.jsはCSScomb導入時にダウンロード済なのでスキップ。
  • SublimeTextにCSScombを導入する
• csslintをインストールする
  • Terminalから以下を実行

$ npm install -g csslint
/usr/local/bin/csslint -> /usr/local/lib/node_modules/csslint/dist/cli.js
1.  csslint@1.0.5
added 3 packages from 25 contributors in 3.369s

• Package Controlから「SublimeLinter-csslint」をインストール

JavaScript

GitHub – SublimeLinter/SublimeLinter-jshint
Before installing this plugin, ensure that jshint (2.5.0 or later) is installed on your system.

エラー表示サンプル

必要なもの

• Node.js
• JSHint

手順

• node.jsはCSScomb導入時にダウンロード済なのでスキップ。
• JSHintをインストールする
  • Terminalから以下を実行

npm install -g jshint

• Package Controlから「SublimeLinter-jshint」をインストール

npmコマンド実行時にパーミッションエラーが出てしまった場合

• npmコマンド実行時にディレクトリの書き込み権限がないとエラーが出てしまった。

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
（略）

• 以下のエントリーを参考に対処する。
  • npm のグローバルインストールに失敗したら – Corredor
• 現状の権限を確認。

$ ls -l /usr/local/lib
（略）
lrwxr-xr-x    1 hi3103  admin    38 10 24 01:34 libxvidcore.a -> ../Cellar/xvid/1.3.5/lib/libxvidcore.a
drwxr-xr-x    3 root    wheel    96 10 24 21:37 node_modules
lrwxr-xr-x    1 hi3103  admin    41  3 21 22:11 openjpeg-2.3 -> ../Cellar/openjpeg/2.3.0/lib/openjpeg-2.3
（略）

• node_modules の所有者:グループがroot:wheelになっているので、ほかにあわせてhi3103(ユーザ名):adminに変更

$ sudo chown hi3103:admin /usr/local/lib/node_modules/
Password: →ログインパスワードを入力

• 確認

$ Alan:~ hi3103$ ls -l /usr/local/lib | grep 'node_modules'
drwxr-xr-x    3 hi3103  admin    96 10 24 21:37 node_modules

参考URL

• Sublime Text3で構文エラーをチェックするプラグインが超絶便利