FC2ブログ
ESLint でJavaScript のチェック (Sublime Text 3)
Sublime Text 3 が動作軽いので使い始めた。

で、最近必要があって JavaScript を書いてる。

ところが、 SublimeLinter-jshint が ES6 に非対応っぽく、class 使うとエラーだと指摘されてしまうのでなかなか不便だ。

jshint の設定方法もよくわからないので、ES6 対応だと評判の SublimeLinter + ESLint へ移行してみたので、備忘録。


( まずは Package をインストール )

(参考) ESLint を試す
https://akabeko.me/blog/2015/04/eslint/

上のリンクはわかりやすい。

Preferences -> Package Control -> Package Control: Install Package

から、

 ・SublimeLinter
 ・SublimeLinter-ESLint

の2つをインストール。


( jslint は無効に )

もし今まで SublimeLinter-JSLint を使っていたなら、エラー表示がダブってくるので Package Contol: Disable Package から Disabled しておくこと。もちろんアンインストールでもいい。


( ruby / npm のインストール )

ruby とか npm とかのインストール方法は割愛。
自分のPC環境では、sass+compass を使っていた時にインストール済み。


( eslint のインストール )

Windowsキー -> そのまま「ruby」と入力し、Command Pronpt with Ruby のコマンドラインを起動。

npm i -g eslint

と入力して eslint をインストール。

こいつが eslint の本体だはず。


( ESLint の設定)

ユーザーフォルダ c:\users\xxx (xxxはユーザー名) に .eslintrc という名前の設定ファイルを作成。

そのファイルをエディタで編集する。

書き込む設定内容は、

(参考) ESLintのルールを全部手動で設定するのは大変だからやめておけ
https://qiita.com/khsk/items/0f200fc3a4a3542efa90

あたりを参考に。

正直、初心者には

"extends": [
"eslint:recommended",
],


のオススメ設定的なのを加えるのが一番カンタンだ。"真の男" になりたいのなら別だが。

↑のはオススメ設定ではないようです。

設定は拡張することができて、その中で特にオススメな部分、のようです。

なのでやはり設定はどっかで拾ってくる必要あり。

( ESLint 本家 )
ESLint
https://eslint.org/

ここで設定のわからない部分を検索するといい。


( 個人的に必須な設定 )

jsを複数ファイルに分割して作業している場合に、他のファイルで定義されている変数や関数などを参照していると、「定義されていない」というエラーになってしまう。これはかなり鬱陶しいので回避したいところ。

この設定だ。

no-undef
https://eslint.org/docs/rules/no-undef#disallow-undeclared-variables-no-undef

↑ これ見るだけだとオフにするしかなさそうだが、

Configuration - Specifying Globals
https://eslint.org/docs/user-guide/configuring#specifying-globals

↑ によると、各ファイルの先頭にコメントで変数を global 指定?することでエラー表示を回避できるそうだ。

/* global var1, var2 */

みたいな感じで書く。

また、

/* global myclass */



のようにクラス名も指定できるようだ。

/* global myfunc */



のようにグローバルな関数も指定できた。便利だ。


( ESLint をコマンドラインでテスト )

適当なフォルダに target.js などを作成し、内容も適当に入力しておく。

Command Prompt with Ruby 上で、

eslint target.js

と打つと、eslint コマンドが正常に働いてくれるのがわかる。
ただし、設定ファイルが何か間違ってたりするとズラーッとエラーで怒られるので注意。


( Sublime上で確認 )

開いていたjsファイルを閉じて開き直すと(もしくは他のタブを見てから戻ってくると)、ところどころ赤丸&赤枠で囲まれているがわかる。
これで快適な JavaScript コーディングができそうだ。


P.S.
途中でいろいろ試行錯誤したので、何か抜けている部分があるかも。

スポンサーサイト
2019-04-29 Mon | ソフトウェア | トラックバック:0 | コメント:0
Thank you for visiting me !
プロフィール

kobuchicken

  • 管理人: kobuchicken
  • Linux 初心者です。XP 無しで過ごした長い長い 98 の日々。Ubuntu & 派生ディストリの有難さを感じる今日この頃です。フリーの OS がもっと身近になりますように。
  • RSS
カレンダー
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -
03月 « 2019/04 » 05月
ブログ内を検索
Search this site.