本篇文章主要记录一下前端工程化的一些内容。

项目工程化

editorconfig.ts

用来统一团队代码开发风格，即使是不同IDE也遵循一致代码规范。

# 根目录标识（必须放在最顶部）
root = true

[*] # 匹配所有文件
charset = utf-8 # 文件编码（推荐 UTF-8）
end_of_line = lf # 换行符（React 推荐 LF，兼容 Unix/macOS 和现代 Windows）
insert_final_newline = true # 文件末尾自动添加空行
trim_trailing_whitespace = true # 自动删除行尾空白字符
indent_style = space # 缩进使用空格（React 社区主流选择）
indent_size = 2 # 缩进为 2 个空格（JSX/TSX 常用）

# 针对 JavaScript/TypeScript 文件（.js, .jsx, .ts, .tsx）
[*.{js,jsx,ts,tsx}]
quote_type = single # 引号使用单引号（可选，也可配置为 double）
max_line_length = 100 # 单行最大长度（TS/JS 推荐 100，避免长行）

# 针对 CSS/SCSS/LESS 文件（.css, .scss, .less）
[*.{css,scss,less}]
indent_size = 2 # 保持与 JS 一致的缩进
quote_type = single # CSS 引号（可选，部分场景用双引号）

# 针对 JSON 文件（.json）
[*.json]
indent_size = 2 # JSON 推荐 2 空格缩进

# 针对 Markdown 文件（.md）
[*.md]
trim_trailing_whitespace = false # Markdown 保留行尾空白（如换行符）
max_line_length = 80 # Markdown 正文推荐 80 字符宽度

eslint配置

创建.eslintconfig.js

module.exports = {
  // ... 基础配置（env、parserOptions）

  // 插件列表（以 eslint-plugin- 开头，省略前缀）
  plugins: [
    'react', // React 基础规则
    'react-hooks', // React Hooks 规则（如闭包陷阱检测）
    '@typescript-eslint', // TypeScript 规则（需配合 @typescript-eslint/parser）
    'import', // 导入/导出规范
    'jsx-a11y', // JSX 可访问性
  ],

  // 扩展规则集（优先使用推荐规则）
  extends: [
    // ESLint 官方推荐规则（基础语法）
    'eslint:recommended',
    // React 推荐规则（覆盖 JSX、Hooks 等）
    'plugin:react/recommended',
    // React Hooks 专用规则（必须）
    'plugin:react-hooks/recommended',
    // TypeScript 推荐规则（需在 parserOptions 中指定项目 TS 配置）
    'plugin:@typescript-eslint/recommended',
    // 导入规范规则（如禁止循环依赖、排序）
    'plugin:import/recommended',
    'plugin:import/typescript', // TypeScript 导入支持
    // 可访问性规则（可选）
    'plugin:jsx-a11y/recommended',
    // 关闭 Prettier 冲突规则（必须放在最后）
    'plugin:prettier/recommended',
  ],
}

prettier

使用vite创建文件或者创建vue项目以及使用vscode插件会默认配置代码格式化，但是有些情况可能无法自动格式化代码(比如使用webpack创建项目，或者专用其他软件编写代码)，所以配置一下prettier比较规范.

npm i prettier -D
pnpm add prettier -D

创建.prettierrc和.prettierignore两个文件

.prettierrc # 格式化run time 配置

{
    "semi": true, // 保留分号
    "singleQuote": true, // 单引号
    "tabWidth": 2, // 2 空格缩进
    "useTabs": false, // 不用 Tab
    "trailingComma": "all", // 所有可能的位置加尾随逗号（ES5+）
    "printWidth": 100, // 单行最大 100 字符
    "jsxSingleQuote": true, // JSX 用单引号
    "bracketSpacing": true, // 对象括号加空格：{ key: value }
    "arrowParens": "always", // 箭头函数参数加括号：(param) => {}
    "overrides": [ // 针对特定文件覆盖规则
        {
            "files": "*.md", // Markdown 文件
            "options": {
                "printWidth": 80, // Markdown 单行限制 80 字符
                "proseWrap": "preserve" // 保留原换行
                }
            },
        {
            "files": "*.html", // HTML 文件
            "options": {
                "htmlWhitespaceSensitivity": "ignore" // 忽略 HTML 空白
            }
        }
    ]
}

.prettierignore # 格式化忽略文件

# 构建输出目录
dist/
build/
out/

# 依赖目录
node_modules/

# 静态资源
public/
assets/
images/
fonts/
icons/

# 配置文件
.env
.env.local
.env.development
.env.production
.editorconfig
.eslintrc.js
.prettierrc.js

# 测试/覆盖率报告
coverage/
.nyc_output/
*.test.js
*.spec.tsx

# IDE/编辑器缓存
.vscode/
.idea/
*.suo
*.ntvs*
*.njsproj
*.sln

# 其他
*.log
*.tmp
.DS_Store

一次性格式化多个文件命令配置：

{
  "scripts": {
    "prettier": "prettier --write ."
  }
}