💅

JSX、TSX 内で Stylelint を使いたい、VSCode にも導入したい

2022/10/02に公開約1,300字

いきなり結論

PostCSS Syntax を使う。

https://stylelint.io/migration-guide/to-14/#syntax-option-and-automatic-inferral-of-syntax

他の言語や埋め込みスタイルについては、PostCSS Syntaxをお勧めします。

CSS-in-JS埋め込み(.js、.jsx、.tsなど)は、@stylelint/postcss-css-in-jsを使用します。

迷ったらドキュメント読めはガチ。

npm i -D postcss-syntax @stylelint/postcss-css-in-js
.stylelintrc.cjs
module.exports = {
  overrides: [
    {
      files: ["**/*.{jsx,tsx}"],
      customSyntax: "@stylelint/postcss-css-in-js",
    },
  ],
};

VSCode の設定

設定からstylelint.validateと検索するか、JSON のstylelint.validateを直接いじって
javascriptreacttypescriptreactを追加する。

settings.json
"stylelint.validate": [
    "javascriptreact",
    "typescriptreact"
  ],

ずっとjsxtsxって書いててハマった 😇

@stylelint/postcss-css-in-jsについて

(@stylelint/postcss-css-in-jsパッケージには問題があります。将来的には、1つのライブラリのみに焦点を当てた小さな構文を支持して廃止される可能性があります(この問題を参照)。

現状 JSX、TSX で Stylelint 使うには多分これしかないんだけど(postcss-jsx, postcss-styledは長らく更新されていない)、このパッケージにもちょっと問題があるらしい 😕

https://github.com/stylelint/stylelint/issues/4574
https://github.com/stylelint/postcss-css-in-js/issues/225

Discussion

ログインするとコメントできます