lint機能つきで導入の簡単なHTML ＋ JavaScriptエディタ

『Brackets』『Atom』『Visual Studio Code』を試してみました。

いずれも、ESLintを使用するには拡張機能のインストールが必要だったり、拡張機能同士で依存関係があったり、npm install eslintする必要があったり、.eslintrcファイルの作成が必要だったり、「constはES6でないと使用できない」などの警告を出してくるので対応させたり……

と、導入にかなり労力を使ってしまいました。

それでも

"use strict";
gkawlgafa = galwiflajw + gauheafs;

などのめちゃくちゃなコードを宣言なしで書いてみても何も言われないので、まだまだ設定が必要なのか……　と思うとそろそろうんざりしてきます。

もちろん、色々こだわって設定したくなったり、ESLintのバージョン管理などを考えたりするならこういう形式がいいのかもしれませんけれど。
（3つのエディタを一気に試して比較しようとしてみたせいもありますが、もう3時間になります）

Chrome拡張機能の『Tampermonkey』のエディタは、そういった導入の手間もなく最初から優秀なヒント機能などを備えていたため、気に入っていたのですが……
（単に下線を引くのでなく、行頭にエラーアイコン的なものを表示してくれるため、とても見やすく助かっていました）

デフォルトでこういう機能を備えているエディタって何かないのでしょうか？

PlayCodeやThimbleなどのWebサービスが使えればいいのかもしれませんが、HTML内で画像を大量に使う必要があるため難しそうです（ローカルファイルは確かクロスドメインだと読み込めませんよね？）

今のところ思い浮かぶ中では、HTML + CSS部分だけBracketsなどのエディタを使い、
JavaScript部分はTampermonkeyのエディタで書いてエクスポートする…　というのが最良の方法のように感じますが
これはこれでちぐはぐ感が拭えないのもまた事実ですね…

行動規範の内容に同意します

回答1件

ベストアンサー

ESLintはカスタマイズできるのが特徴なので、自分の要求に合うまで多少のconfigの調整が必要なのは仕方ないと思います。一度configを作れば、以降のプロジェクトでそのまま使い回せます。

めちゃくちゃなコードを宣言なしで書いてみても何も言われないので

とりあえず"extends": "eslint:recommended"(eslintが推奨するルールセット)を入れておいて、そこから調整するのがいいと思います。どのルールがrecommendedに含まれているかはこのページで確認できます(チェックマークがついているもの)。以下のconfigでは少なくとも質問文にある要求は満たせると思います。

.eslintrc

json
1{
2    "parserOptions": {
3        "ecmaVersion": 6,
4        "sourceType": "script"
5    },
6    "env": {
7        "browser": true
8    },
9    "rules": {
10        "semi": ["error", "always"]
11    },
12    "extends": "eslint:recommended"
13}

VS CodeでしかESLintを使ったことはないですが、VS Coddeと拡張機能ESLintを使った場合、下線でエラー、警告が別の色で表示されますし、マウスをホバーすれば何のルールに違反しているか表示されます。

電球アイコンをクリックすれば、(可能なら)自動で修正、この行でのみ該当のルールを無効にするなどの操作ができます。

右のスクロールバーにもエラー・警告の場所が表示され、PROBLEMSタブでプロジェクト全体でのエラー・警告一覧も見れます。