本文主要寫項目創(chuàng)建到項目開發(fā)環(huán)境配置，里面包含有 react + ts + ant-design+sass/scss+redux +Eslint + Prettier。
項目創(chuàng)建
# 項目創(chuàng)建
npx create-react-app react-app
# ts項目創(chuàng)建
npx create-react-app react-ts-app --template typescript
安裝依賴
安裝ant-design前端架構+sass/scss
npm i sass scss antd --save
安裝完成后仆潮，將src目錄中css文件改為scss
App.css > App.scss
index.css > index.scss
相應代碼中import依賴也需要調整。
安裝react-app-rewired仿野、customize-cra插件
npm i react-app-rewired customize-cra --save-dev
配置package.json 替換腳本命令
{
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
}
...
}
根目錄創(chuàng)建config-overrides.js文件羊瘩，配置 webpack @ 指向 src 路徑
const {
override,
addWebpackAlias
} = require('customize-cra')
const path = require('path')
module.exports = override(
addWebpackAlias({
'@': path.resolve(__dirname, 'src')
})
)
需要ts環(huán)境生效@寫法需要在根目錄下創(chuàng)建tsconfig.extend.json文件沦零。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
}
}
}
然后在tsconfig.json中添加映射
{
"extends": "./tsconfig.extend.json",
"compilerOptions": {
...
}
}
安裝 Redux
npm i @reduxjs/toolkit react-redux
需要在src目錄添加以下文件&文件夾
src
├─ app
│ └─ store.ts
├─ features
│ ├─ counter
│ │ └─ counterSlice.ts
store.ts
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "@/features/counter/counterSlice";
export default configureStore({
reducer: {
// 可以添加更多模塊
counter: counterReducer,
},
});
實例代碼 counterSlice.ts
import { createSlice } from '@reduxjs/toolkit';
export interface CounterState {
value: number;
}
const initialState: CounterState = {
value: 0
};
export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
// Redux Toolkit 允許我們在 reducers 寫 "可變" 邏輯餐曼。
// 并不是真正的改變 state 因為它使用了 immer 庫
// 當 immer 檢測到 "draft state" 改變時，會基于這些改變去創(chuàng)建一個新的
// 不可變的 state
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
},
incrementByAmount: (state, action) => {
state.value += action.payload;
}
}
});
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
在src/index.ts里添加全局配置store
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from "react-redux";
import store from "./app/store"
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
使用Eslint + Prettier 作為代碼檢查自動格式化
vscode需要安裝 Eslint + Prettier插件
安裝依賴
npm i eslint@7.32.0 @typescript-eslint/eslint-plugin@5.0.0 @typescript-eslint/parser@5.0.0 @eslint/js@9.0.0 globals@15.0.0 --save-dev
npm i eslint-config-prettier eslint-plugin-prettier prettier --save-dev
在根目錄新建以下文件
├─ .vscode
│ └─ settings.json
├─ .eslintignore
├─ .eslintrc.js
├─ prettier.config.js
setting.json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
.eslintignore
# .eslintignore
build/
dist/
node_modules/
.eslintrc.js
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended'
],
settings: {
react: {
version: '999.999.999' //消除npm run lint時的警告信息
}
},
overrides: [
{
env: {
node: true
},
files: ['.eslintrc.{js,cjs}'],
parserOptions: {
sourceType: 'script'
}
}
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: ['@typescript-eslint', 'react'],
rules: {
'no-unused-vars': 'off',
'@typescript-eslint/no-var-requires': 0,
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/no-explicit-any': ['off']
}
};
prettier.config.js
// prettier.config.js
module.exports = {
// 一行最多 100 字符
printWidth: 100,
// 使用 2 個空格縮進
tabWidth: 2,
// 不使用縮進符德频，而使用空格
useTabs: false,
// 行尾需要有分號
semi: true,
// 使用單引號
singleQuote: true,
// 對象的 key 僅在必要時用引號
quoteProps: 'as-needed',
// jsx 不使用單引號苍息，而使用雙引號
jsxSingleQuote: false,
// 末尾不需要逗號
trailingComma: 'none',
// 大括號內的首尾需要空格
bracketSpacing: true,
// jsx 標簽的反尖括號需要換行
jsxBracketSameLine: false,
// 箭頭函數(shù)，只有一個參數(shù)的時候，也需要括號
arrowParens: 'always',
// 每個文件格式化的范圍是文件的全部內容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要寫文件開頭的 @prettier
requirePragma: false,
// 不需要自動在文件開頭插入 @prettier
insertPragma: false,
// 使用默認的折行標準
proseWrap: 'preserve',
// 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 換行符使用 lf
endOfLine: 'lf'
};
然后重啟vscode即可竞思。
