コンテンツにスキップ

VSCode で Stylelint

Getting started | Stylelint

GitHub - stylelint/vscode-stylelint: The official Visual Studio Code extension for Stylelint

VSCode の拡張機能のStylelintをインストールする。

npm パッケージも要るようなのでプロジェクトにインストールする。

1
$ npm i -D stylelint stylelint-config-recess-order stylelint-config-standard-scss

.stylelintrc.jsonを作成する。

.stylelintrc.json
1
2
3
{
  "extends": ["stylelint-config-standard-scss", "stylelint-config-recess-order"]
}

.vscode/settings.jsonに以下を設定する。

.vscode/settings.json
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "[css]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": "explicit"
    }
  },
  "stylelint.configFile": "./.stylelintrc.json"
}

lowerCamelCase のクラス名を許容する

.stylelintrc.json
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{
  "rules": {
    "selector-class-pattern": [
      "^[a-z][a-zA-Z0-9]*$",
      {
        "message": "クラス名は lowerCamelCase で命名してください。"
      }
    ],
    "keyframes-name-pattern": [
      "^[a-z][a-zA-Z0-9]*$",
      {
        "message": "クラス名は lowerCamelCase で命名してください。"
      }
    ]
  },
  "extends": ["stylelint-config-standard-scss", "stylelint-config-recess-order"]
}