styled-componentsでStylelintを使う方法2022
Google検索するとstylelint-config-styled-components
とstylelint-processor-styled-components
を使うやり方が出てきましたが、それではうまく動きませんでした。
試行錯誤の結果@stylelint/postcss-css-in-js
を使うとうまくいくことがわかったので、記録を残しておきます。
-
stylelint
とconfigに加えて、postcss-syntax
と@stylelint/postcss-css-in-js
をインストールyarn add -D stylelint stylelint-config-standard postcss-syntax @stylelint/postcss-css-in-js
-
stylelint.config.js
を作成し、JavaScript/TypeScriptファイルにはcustomSyntax: '@stylelint/postcss-css-in-js'
が適用されるよう設定stylelint.config.jsmodule.exports = { extends: 'stylelint-config-standard', overrides: [ { files: ['**/*.{js,jsx,ts,tsx}'], customSyntax: '@stylelint/postcss-css-in-js' } ] }
- 以下のコマンドでlintを実行
stylelint ./src/**/*.{css,js,jsx,ts,tsx}
- (任意)CSS in JSでは誤検知が多い
function-name-case
とfunction-no-unknown
を無効化stylelint.config.jsmodule.exports = { extends: 'stylelint-config-standard', overrides: [ { files: ['**/*.{js,jsx,ts,tsx}'], customSyntax: '@stylelint/postcss-css-in-js', rules: { 'function-name-case': null, 'function-no-unknown': null } } ] }
Author And Source
この問題について(styled-componentsでStylelintを使う方法2022), 我々は、より多くの情報をここで見つけました https://zenn.dev/ciffelia/articles/a42434cd8c1abc著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol