Visual Studio Code

代码编辑器
推荐指数: ★★★★★
免费开源

Visual Studio Code 是微软开发的免费、开源的现代化代码编辑器，支持多种编程语言，拥有丰富的扩展生态系统。

核心特性

  • 智能代码补全（IntelliSense）
  • 内置Git支持
  • 强大的调试功能
  • 丰富的扩展市场
  • 集成终端
  • 多光标编辑
  • 代码片段
  • 主题自定义

安装与配置

下载地址: https://code.visualstudio.com/

推荐扩展

以下扩展可以极大提升前端开发效率：

扩展名称 功能描述 安装命令
ESLint JavaScript/TypeScript代码检查 ext install dbaeumer.vscode-eslint
Prettier 代码格式化工具 ext install esbenp.prettier-vscode
Live Server 本地开发服务器 ext install ritwickdey.liveserver
Auto Rename Tag 自动重命名HTML/XML标签 ext install formulahendry.auto-rename-tag
Bracket Pair Colorizer 括号配对颜色标识 ext install coenraads.bracket-pair-colorizer
GitLens 增强Git功能 ext install eamodio.gitlens

推荐配置

在VSCode的settings.json中添加以下配置：

{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "emmet.includeLanguages": { "javascript": "html", "vue": "html" }, "files.autoSave": "afterDelay", "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe" }

Webpack

构建工具
推荐指数: ★★★★☆
免费开源

Webpack 是一个现代JavaScript应用程序的静态模块打包工具，用于处理模块依赖关系，生成优化后的静态资源。

核心特性

  • 模块打包：支持CommonJS、AMD、ES6模块
  • 代码分割：实现按需加载
  • Loader系统：处理各种类型文件
  • 插件系统：扩展Webpack功能
  • 开发服务器：支持热模块替换
  • Tree Shaking：消除未使用代码

安装与使用

npm install webpack webpack-cli --save-dev

基础配置示例

// webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), clean: true }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource' } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], devServer: { static: './dist', hot: true, port: 3000 } };

常用Loader和插件

名称 类型 功能描述
babel-loader Loader 转换ES6+代码为ES5
css-loader Loader 处理CSS文件
style-loader Loader 将CSS插入到DOM
HtmlWebpackPlugin 插件 生成HTML文件
MiniCssExtractPlugin 插件 提取CSS为单独文件
CleanWebpackPlugin 插件 清理构建目录

Vite

构建工具
推荐指数: ★★★★★
免费开源

Vite 是一个现代化的前端构建工具，提供极速的开发服务器和优化的生产构建，特别适合Vue、React等现代前端框架。

核心特性

  • 极速的开发服务器启动
  • 按需编译，无需打包整个应用
  • 原生ES模块支持
  • 内置TypeScript支持
  • 优化的生产构建
  • 丰富的插件系统
  • 支持多种框架模板

快速开始

npm create vite@latest my-app -- --template vue

创建不同项目

# 创建Vue项目 npm create vite@latest my-vue-app -- --template vue # 创建React项目 npm create vite@latest my-react-app -- --template react # 创建TypeScript项目 npm create vite@latest my-ts-app -- --template vanilla-ts # 进入项目并安装依赖 cd my-app npm install # 启动开发服务器 npm run dev # 构建生产版本 npm run build

vite.config.js 示例

Vite的配置文件示例：

// vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, 'src') } }, server: { port: 3000, open: true, proxy: { '/api': { target: 'http://localhost:8000', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }, build: { outDir: 'dist', sourcemap: true, rollupOptions: { output: { manualChunks: { vendor: ['vue', 'vue