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

npx clear-npx-cache

npx create-react-app starter-create-react-app

# 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

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

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

  extends: [
    'react-app',
    'react-app/jest',
    'airbnb',
    'airbnb/hooks',
  ],

  rules: {
    'react/react-in-jsx-scope': 'off',
    'react/function-component-definition': [
      'error',
      {
        namedComponents: 'arrow-function', // 'function-declaration' | 'function-expression' | 'arrow-function'
      },
    ],
  },

  "scripts": {
    "lint:eslint": "eslint --ignore-path .gitignore . --ext .js,.jsx",
    "fix:eslint": "eslint --fix --ignore-path .gitignore . --ext .js,.jsx"
  },

npm i -D stylelint stylelint-config-recess-order stylelint-config-standard postcss-syntax @stylelint/postcss-css-in-js

{
  "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"
    }
  ]
}

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

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "css.validate": false,
  "stylelint.validate": ["css", "javascriptreact", "typescriptreact"]
}

npm i @emotion/react

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;

npm i -D prettier eslint-config-prettier stylelint-config-prettier

    "format:check": "prettier --check --ignore-path .gitignore './**/*.{js,jsx,json,css}'",
    "format:fix": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,json,css}'"

  extends: [
・・・省略
    'prettier',
  ],

  "extends": [
・・・省略
    "stylelint-config-prettier"
  ],

npm i prop-types

npx sb init

  overrides: [
    {
      files: ['**/*.stories.*'],
      rules: {
        'import/no-anonymous-default-export': 'off',
        'react/jsx-props-no-spreading': 'off',
      },
    },
  ],

npx react-codemod update-react-imports