Sublime Text 3 に SublimeLinter を導入してHTML5・CSS・JavaScriptのリアルタイム構文チェックをする

Mac

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 に変更すると、エラーが出ている箇所がより目立つ。

スクリーンショット画像

参考

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

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.
エラー表示サンプル

SublimeLinterのHTMLエラー表示(スクリーンショット画像)

必要なもの
手順
  • Terminalから以下を実行
$ brew install tidy-html5
  • Package Controlから「SublimeLinter」をインストール。

CSS

GitHub – SublimeLinter/SublimeLinter-csslint

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

エラー表示サンプル

SublimeLinter CSSのエラー表示(スクリーンショット画像)

必要なもの
手順
$ npm install -g csslint
/usr/local/bin/csslint -> /usr/local/lib/node_modules/csslint/dist/cli.js
+ 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.

エラー表示サンプル

SublimeLinter javascriptのエラー表示(スクリーンショット画像)

必要なもの
手順
  • node.jsはCSScomb導入時にダウンロード済なのでスキップ。
  • JSHintをインストールする
    • Terminalから以下を実行
npm install -g jshint
  • Package Controlから「SublimeLinter-csslint」をインストール

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'
(略)
$ 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

Comments

  • スパム対策のため、コメント本文にURLが含まれている場合は「承認待ち」となり、すぐに投稿が反映されません。ご了承ください。
  • 公序良俗に反する内容、個人が特定できる情報、スパム投稿と思われるコメント等については、予告なく編集・削除する場合があります。