Closed14
Create React App 5.0 + Eslint(airbnb) + Prettier + Stylelint + Emotion + Storybook の開発環境構築
目的
Create React App V5.0.0がリリースされたので
スタータ開発環境を作成する
構築環境
- windows10 ( WSL2 )
- Ubuntu20.04
- node 16.13.1
- npm 8.1.2
create-react-app
npx のキャッシュ削除
これをしないとインストールができない・・
npx clear-npx-cache
インストール
npx create-react-app starter-create-react-app
.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
プロジェクトルートにjsconfig.jsonを追加
baseUrlを設定することで、プロジェクトルートからパスの記述ができるように
{
"compilerOptions": {
"baseUrl": "."
},
"exclude": [
"node_modules"
]
}
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のエラー修正
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"]
}
Emotionの導入|css-in-js
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;
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を使ってコード整形
PropTypes を用いた型チェック
- インストール
npm i prop-types
参考
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',
},
},
],
import React from 'react'; の整理
React 17からはインポートが不要になったため
公式指定通りに
npx react-codemod update-react-imports
完成
是非使ってやってください!!
追加
npm scriptでlint & formatを並列実行できるようにした
このスクラップは2021/12/30にクローズされました