【前端】工具链一本通

长期更新补充。

概述

• 定义：工具链 是指在前端项目开发过程中，用于辅助开发、优化构建、提高代码质量和开发效率的一系列工具的组合。
• 分类

• 链接
  typescript
  webpack

Vite

指引
配置
插件
后续更新内容…

Babel（JavaScript 编译器）

什么是编译器？
一个编译器是将用一种语言（源语言，Source Language）编写的程序转换成另一种语言（目标语言，Target Language）的程序。
Babel 为什么是 JavaScript 编译器？
Babel 的核心功能是将新版本（或非标准）的 JavaScript 代码作为源语言，转换成旧版本（或更广泛兼容）的 JavaScript 代码作为目标语言。

为什么不叫“解释器”？
解释器 (Interpreter) 是直接执行源代码的程序，而不是将其转换成另一种形式。JavaScript 引擎（如 V8）本身是 JavaScript 解释器/JIT 编译器，它直接执行 JavaScript 代码。
Babel 并不执行代码，它只转换代码。 它是一个代码转换工具链。

• 作用
  将现代 JavaScript（如 ES6+）代码转译成兼容旧浏览器的 ES5 代码
  支持 JSX、TypeScript、装饰器等语法扩展（需配置对应插件）
• 核心组成
  @babel/core: Babel 的核心模块
  @babel/preset-env: 根据目标浏览器转译 JS（常用配置）
  @babel/preset-react: 转译 JSX（React 项目必用）
  @babel/preset-typescript: 支持 TypeScript
  babel-loader: Webpack 中使用 Babel 的 loader
• 常见配置（babel.config.js）

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: 'defaults' }],
    '@babel/preset-react',
    '@babel/preset-typescript'
  ]
};

Prettier（代码格式化工具）

• 作用
  统一代码风格（自动格式化）
  专注“格式”，不检查语法逻辑错误（这由 ESLint 做）
• 常见配置（.prettierrc 或 package.json 中）

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "none"
}

• 常见搭配
  配合 ESLint 使用，防止两者冲突（需要关闭 ESLint 中的格式化规则）
  安装插件：eslint-config-prettier + eslint-plugin-prettier

ESLint（代码质量检查）

• 作用
  静态检查 JS/TS 代码是否符合规范、是否存在潜在错误
  可结合 Prettier，统一格式+质量检查
• 核心配置文件 .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended' // 让 Prettier 控制格式化相关规则
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'no-unused-vars': 'warn',
    // 更多自定义规则...
  }
};

• 使用

npm install eslint --save-dev
npx eslint --init #初始化配置
#这个命令会引导你选择项目的风格、使用的框架（React、Vue等）、
#是否使用 TypeScript 等，并生成一个配置文件（.eslintrc.js、.eslintrc.json 等）。
npx eslint yourfile.js #检查这个文件
npx eslint yourfile.js --fix #自动修复代码

比如：如果在main.js 声明个变量而不使用，则终端和网页都会报错，因为不严谨。

• 解决方式
  方式1: 手动/自动解决掉错误
  方式2: 暂时关闭eslint检查, 在vue.config.js中配置后重启服务

module.exports={
	//其他配置略
	lintOnSave:false//关闭eslint检查
}

• 常配合使用的插件/配置
  eslint-config-airbnb: Airbnb 代码规范
  eslint-plugin-react: 检查 React 项目
  eslint-plugin-import: 管理模块导入
  eslint-config-prettier: 配合 Prettier，关闭 ESLint 中和 Prettier 冲突的规则