Kinchan's Blog

Jan 5th, 2024 - About Sublime Text - Written by

Sublime Text stylelint eslint の導入方法 -mac-

sublimeロゴ

だいぶ遅くなりましたが、先日sublimeText3からsublimeText4へバージョンアップを行いました。

いままでは構文チェックはなんとなくcsslintとjshintをずっと利用していたのですが、更新も止まっていたりと変化に対応していない部分が目立っていたので、stylelint eslintへの変更も一緒に行ったのですが、その際にいくつか躓いた部分があり、すんなり移行できなかったので、もし同じように誰かがつまずいた時に役立ったらいいなと忘備録的に記事を残して置きたいと思います。

１．必要な環境、パッケージ等

  • Node.js
  • npm
  • stylelint
  • stylelint-config-standard
  • eslint
  • SublimeLinter-stylelint
  • SublimeLinter-eslint

まず、macにNode.jsを入れnpmを使えるようにしておくことが必要になります。
自身のPCにNode.jsが入っているか？npmが使えるのか？などは調べればたくさん出てきますので、ここでは割愛させていただきます。

stylelint stylelint-config-standard eslintはnpmでインストールするパッケージとなり、ターミナルを起動しパソコン内にインストールします。

SublimeLinter-stylelint SublimeLinter-eslintはsublimeText内のコマンドパレット(shift + cmd + p)を利用してインストールするパッケージになります。

２．具体的な手順

ターミナルを起動します。

ターミナルの場所はFinderを起動させて、「アプリケーション」＞「ユーティリティ」の中にターミナル.appとしてあります。
もしくは、Launchpadを起動させ、特に配置設定を変えていなければ「その他」の中にターミナルはあります。

npm install -g stylelint 
npm install -g stylelint-config-standard
npm install -g eslint

と打ち込みます。

npm install -g stylelint stylelint-config-standard eslintとパッケージ名を続けて打てば一度にインストール出来るとは思いますが、上記では分けて打ち込む形で記述してあります。

ポイントは -g とオプションを付けることです。
これはグローバルという形でという指定になるのですが、-gを付けて実行するのとしないのではインストールされる場所が変わります。

sublimeTextの中で使う形の情報はネット上に少ないので、stylelintやeslintで調べるとグローバルのオプションを付けない形で記載されているモノばかりですが、グローバルの形でインストールしましょう。

stylelint-config-standardというのは、stylelintのルールセットパッケージです。

stylelintではどんな時にエラーを出すのかルールを決める必要があります。

自分で１つ１つ設定するのは大変ですし、特に初学者は何が基本なのかよくわからないと思いますので、こういったパッケージを利用し、不要な設定は自身で取り除く形にした方が使い勝手がよいと思いです。

次に、sublimeTextを起動し、コマンドパレットを起動します。

insと、検索バーに打ち込めば予測で「package Control:Install Package」と出て来ますので、選択します。

更に検索バーが出てきますので、stylelintを打ち込めば、予測で「SublimeLinter-stylelint」と記載されているパッケージがあがってきますので。それを選択すればインストールがはじまります。

SublimeLinter-eslintも同じようにインストールしてください。

次に、stylelintとeslintの設定ファイルを作成します。

制作する場所はどこでもいいのですが、sublimeTextの設定系ファイルがまとまっているフォルダに作成するのがよいと思います。

場所は、
/Users/◯◯◯(ユーザー名)/Library/Application Support/Sublime Text 3/Packages/User

私は、Sublime Text 3からバージョンアップしたので、フォルダ名がSublime Text 3となっていますが、4から、あるいは４をクリーンインストールしたひとはフォルダ名が違うと思います。

Finder開いて、「cmd + shift + g」 で出てきた入力欄に、上記パスをコピペ(ユーザー名は入力)すれば一発でたどり着けます。

そこに、stylelint用は「.stylelintrc」、eslint用は「.eslintrc」として作ります。

ファイルの先頭をピリオドで始まるファイル名にすると、不可視ファイル(隠しファイル)となり、通常の状態では表示されなくなってしまいますので、不可視ファイルが見える設定にしておく必要があります。

「cmd + shift + . 」で可視･不可視の設定切り替えが出来ます。

.stylelintrcファイルの中身は、

{
  "extends": [
    "stylelint-config-standard"
  ],
    "rules": {
    "color-function-notation": null,
    "function-url-quotes": never,
  }
}

こんな感じにします。

extendsの部分で、先程npmでインストールしたstylelint-config-standardを読み込みます。

rulesの部分には、自分のスタイルにあったルールを設定していきます。

https://stylelint.io/user-guide/rules/

上記URL先に指定できるルールは記載されています。
他に詳しく解説してくれている日本語のサイトもあるので、google検索で「stylelint ルール」などと打ち込んで調べてみるのもよいと思います。

.eslintrcの中身は、

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "globals": {
  },
  "rules": {
    "no-console": "warn"
  }
}

こんな感じにしておきます。

stylelintと同じ感じです。

extendsの部分に、eslint:recommendedとしておけば、自身で１つ１つ設定しなくてもルールを適用してくれます。

https://eslint.org/docs/latest/rules/

上記URL先に指定できるルールは記載されています。
こちらも日本語で解説してくれているサイトもありますので、よくわからなければ調べてみましょう。

次にこれらの設定ファイルをsublimeに読み込ませる設定をします。

その設定をするファイルは、先程作成したstylelintrcとeslintrcファイルと同じ階層にあるSublimeLinter.sublime-settingsで行います。

具体的なパスは、

/Users/◯◯◯(ユーザー名)/Library/Application Support/Sublime Text 3/Packages/User/SublimeLinter.sublime-settings

となります。

3から利用している人で、SublimeLinter系のパッケージを使っている人だと、既に記述が色々してあったりすると思います。

3のままなら問題ないと思いますが、４を使っている場合使えない記述が入っていたりするので、取り除く必要があります。

sublimeText上部メニューバーにある表示の中のコンソールをクリックし、コンソール画面を表示させます。

SublimeLinter.sublime-settingsを開いた状態で、保存をすると無効な指定が表示されると思いますので、無効になっている記述を１つ１つ削除しておきましょう。

それらを綺麗に取り除いたら、stylelintrcとeslintrcにパスを繋げる記述を書きます。

"linters": {
        "stylelint": {
            "@disable": false,
            "args": [
                "--config",
                "~/Library/Application Support/Sublime Text 3/Packages/User/.stylelintrc"
            ],
        },
        "eslint": {
          "@disable": false,
          "args": [
            "--config",
            "~/Library/Application Support/Sublime Text 3/Packages/User/.eslintrc"
        ],
      },
    },

こんな感じです。

全体的に雰囲気を記載すると、

// SublimeLinter Settings - User
{
    "debug": false,
    "delay": 0.25,
    "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
    "lint_mode": "background",
    "linters": {
        "stylelint": {
            "@disable": false,
            "args": [
                "--config",
                "~/Library/Application Support/Sublime Text 3/Packages/User/.stylelintrc"
            ],
        },
        "eslint": {
          "@disable": false,
          "args": [
            "--config",
            "~/Library/Application Support/Sublime Text 3/Packages/User/.eslintrc"
        ],
      },
    },
    "paths": {
        "linux": [],
        "osx": [],
        "windows": []
    }
}

こんな感じになってくると思います。

確か、sublimeText4だと最初の方に、”user”: { といったuserという部分があるとエラーを起こしますので、４では削除しましょう。

これで完成です。

sublimeTextを再起動してCSSファイルにてセミコロン抜けなどをすると、反応するようになると思います。

SublimeLinter.sublime-settingsファイル自体に、別ファイルに記述した「extends」や「rules」を記述してルールを決めることも出来るのですが、指定がneverやalwaysのモノがあると、エラーが出てしまうため別ファイルにしておいた方が無難です。

Categories: Sublime Text