Closed14

Create React App 5.0 + Eslint(airbnb) + Prettier + Stylelint + Emotion + Storybook の開発環境構築

warugakiwarugaki

.editorconfigを追加

.editorconfig
# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
warugakiwarugaki

プロジェクトルートにjsconfig.jsonを追加

baseUrlを設定することで、プロジェクトルートからパスの記述ができるように

{
  "compilerOptions": {
    "baseUrl": "."
  },
  "exclude": [
    "node_modules"
  ]
}
warugakiwarugaki

Eslintの導入

自動設定

npx eslint --init

対話式で選択

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript

Eslint の設定を更新

  • 既存のEslint拡張ルールを.eslintrc.jsに移動と削除&追加
  extends: [
    'react-app',
    'react-app/jest',
    'airbnb',
    'airbnb/hooks',
  ],
  • eslintのrules を追加
  rules: {
    'react/react-in-jsx-scope': 'off',
    'react/function-component-definition': [
      'error',
      {
        namedComponents: 'arrow-function', // 'function-declaration' | 'function-expression' | 'arrow-function'
      },
    ],
  },
  • npm scriptsを追加

  "scripts": {
    "lint:eslint": "eslint --ignore-path .gitignore . --ext .js,.jsx",
    "fix:eslint": "eslint --fix --ignore-path .gitignore . --ext .js,.jsx"
  },
  • ESlintのエラー修正
warugakiwarugaki

Stylelintの導入

  • パッケージのインストール
npm i -D stylelint stylelint-config-recess-order stylelint-config-standard postcss-syntax @stylelint/postcss-css-in-js
  • Stylelintの設定ファイルを作成
.stylelintrc
{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recess-order"
  ],
  "rules": {},
  "overrides": [
    {
      "files": [
        "**/*.jsx",
        "**/*.tsx"
      ],
      "rules": {
        "no-empty-first-line": null
      },
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ]
}
  • npm scriptsの追加

lint & fix コマンド

    "lint:stylelint": "stylelint --ignore-path .gitignore ./src/**/*.{css,jsx}",
    "fix:stylelint": "stylelint --fix --ignore-path .gitignore ./src/**/*.{css,jsx}"

※追記:--ignore-path .gitignore

  • vscodeの設定を追加
.vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "css.validate": false,
  "stylelint.validate": ["css", "javascriptreact", "typescriptreact"]
}
warugakiwarugaki

Emotionの導入|css-in-js

https://emotion.sh/docs/introduction

npm i @emotion/react
  • emotionサンプルコード
import PropTypes from 'prop-types';
/** @jsxImportSource @emotion/react/ */
import { css } from '@emotion/react';

const Demo = ({ large }) => {
  const demoCss = css`
    & {
      color: #333;
    }

    p {
      font-size: 14px;
    }

    &.large p {
      font-size: 28px;
    }


    @media (min-width: 1024px) {
      p {
        font-size: 28px;
        transition: opacity .3s ease-out;
      }

      p:hover {
        opacity: 0.5;
      }

      &.large p {
        font-size: 56px;
      }
    }
  `;

  return (
    <>
      <div className={`demo ${large ? 'large' : ''}`.trim()} css={demoCss}>
        <p>Demo</p>
      </div>
    </>
  );
};

Demo.propTypes = {
  large: PropTypes.bool,
};

Demo.defaultProps = {
  large: false,
};

export default Demo;
warugakiwarugaki

pritterの導入

  • インストール
npm i -D prettier eslint-config-prettier stylelint-config-prettier
  • npm scriptsを追加
    "format:check": "prettier --check --ignore-path .gitignore './**/*.{js,jsx,json,css}'",
    "format:fix": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,json,css}'"
  • prettierのルールとeslint競合ルールを無効化
.eslintrc.js
  extends: [
・・・省略
    'prettier',
  ],

prettierのルールとstylelint競合ルールを無効化

.stylelintrc

  "extends": [
・・・省略
    "stylelint-config-prettier"
  ],
  • npm scriptsを使ってコード整形
warugakiwarugaki

storybookの導入

npx sb init
  • package.jsonに追加されたeslintルールを.eslintrc.jsに移動させる
  overrides: [
    {
      files: ['**/*.stories.*'],
      rules: {
        'import/no-anonymous-default-export': 'off',
        'react/jsx-props-no-spreading': 'off',
      },
    },
  ],
warugakiwarugaki

追加

npm scriptでlint & formatを並列実行できるようにした

このスクラップは2021/12/30にクローズされました