Webapck 配置

安装 - 插件

npm install webpack webpack-cli webpack-dev-server webpack-merge webpack-stats-plugin webpackbar html-webpack-plugin css-minimizer-webpack-plugin mini-css-extract-plugin purgecss-webpack-plugin fork-ts-checker-webpack-plugin webpack-bundle-analyzer hard-source-webpack-plugin copy-webpack-plugin clean-webpack-plugin @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/preset-react @babel/preset-typescript @types/webpack-env ip glob cross-env chalk console-grid @babel/runtime-corejs3 -D

安装 - loader

npm install css-loader style-loader babel-loader file-loader url-loader less less-loader autoprefixer postcss-loader postcss-normalize postcss-preset-env postcss-flexbugs-fixes -D

安装 - ts

npm install typescript @types/react @types/react-dom -D
tsc --init

React 相关

npm install react react-dom --save-dev

项目 Eslint、Prettier、EditorConfig 配置

引言

团队多人协同开发项目中，不同的开发者编码习惯不同、代码风格迥异，为了代码高可用、可维护性，制定统一规范来进行约束

目的

为了项目有统一的编码规范，我们使用 eslint + prettier + editorconfig 来进行约束

1. 配置 Eslint

初始化 eslint

npx eslint --init

安装

npm i eslint eslint-plugin-import eslint-import-resolver-typescript eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

模块	描述
eslint	语法规则和代码风格检查
eslint-plugin-import	验证正确的模块导入方式
eslint-plugin-jsx-a11y	jsx 语法规范检测
eslint-plugin-react	react 语法规范检测
eslint-plugin-react-hooks	react hook 语法规范检测
@typescript-eslint/eslint-plugin	typescript 语法规范检测
@typescript-eslint/parser	解析 typescript
eslint-import-resolver-typescript	支持模块导入ts/tsx

配置文件 .eslintrc.js

const ERROR = 2

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:unicorn/recommended',
    'plugin:promise/recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    semi: 0,
    'comma-dangle': [ERROR, 'never'],
    'import/no-unresolved': 0,
    'import/extensions': [
      ERROR,
      'ignorePackages',
      {
        ts: 'never',
        tsx: 'never',
        json: 'never',
        js: 'never'
      }
    ],
    'react/jsx-filename-extension': [ERROR, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    '@typescript-eslint/no-use-before-define': ['React']
  },
  settings: {
    'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
    'import/parsers': {
      '@typescript-eslint/parser': ['.tsx', '.ts']
    },
    'import/resolver': {
      typescript: {
        directory: './tsconfig.json'
      },
      node: {
        extensions: ['.tsx', '.ts', '.js', '.json']
      }
    }
  }
}

2. 配置 Prettier

配置文件 .prettierrc

{
  "trailingComma": "all", // 对象末尾要不要添加 ','
  "tabWidth": 2, // 代码缩进大小
  "semi": false, // 末尾的分号要不要添加
  "singleQuote": true, // 是否单引号
  "jsSingleQuote": true, // 是否单引号
  "endOfLine": "lf", // 回车换行
  "printWidth": 120, // 单行代码字符长度，超过换行
  "bracketSpacing": true, // 在对象中的括号打印空格
  "arrowParens": "always" // 箭头函数有没有参数都用括号包裹
}

3. 配置 EditorConfig

EditorConfig 主要核心：抹平差异，有助于同一项目多个开发且在跨多个编辑器使用时保持一致的编码风格。

配置文件 .editorconfig

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

# top-most EditorConfig file
root = true

[*]
# 缩进风格 tab / space
indent_style = space
# 缩进大小
indent_size = 2
# 换行符 lf ｜ cr ｜ crlf
end_of_line = lf
# 编码格式
charset = utf-8
# 去除多余的空格
trim_trailing_whitespace = true
# 尾部插入一行
insert_final_newline = true

[.md]
# 删除markdown文件航伟空格自动删除问题
trim_trailing_whitespace = false

• 注意：更多配置请参考官方文档