VSCode插件打造前端高效编程环境指南-VSCode-PHP中文网

Live Server、Prettier与ESLint组合可覆盖90%前端效率痛点：Live Server通过端口配置和代理解决冲突与跨域；Prettier与ESLint需通过eslint-config-prettier对齐规则，避免格式来回修改；插件生效依赖项目级配置文件位置及语言模式正确识别。

vscode插件打造前端高效编程环境指南

Live Server + Prettier + ESLint 这三个插件组合，就能覆盖 90% 前端日常开发的效率痛点。其他插件不是不重要，而是容易装错、配错、冲突错。

默认启动在 5500 端口，但很多本地服务（如 Python 的 SimpleHTTPServer、Vite、Webpack Dev Server）也爱占这个口，一开就报 address already in use。

直接在 settings.json 里设 "liveServer.settings.port": 8080，或设为 0 让它自动选空闲端口
跨域调试 API 时别硬刷页面——用 "liveServer.settings.proxy" 转发请求，比如把 /api 指向 http://localhost:3000/api
别依赖右键菜单的 “Open with Live Server”，它不读 proxy 配置；必须用工具栏的 “Go Live” 按钮或命令面板执行 Live Server: Start

常见现象是保存后代码来回跳：ESLint 提示加引号，Prettier 又删掉；ESLint 要分号，Prettier 把它抹了。这不是 bug，是规则没对齐。

前端设计-专业版

企业级前端设计工具,支持设计系统生成、组件库批量产出、多端适配,适配商业产品开发。

下载

先装 eslint-config-prettier，并在 .eslintrc.js 的 extends 末尾加上 'prettier'
VS Code 设置里关掉 "editor.formatOnSave" 对 ESLint 的启用（即不勾选 eslint.format.enable），只留 Prettier 做格式化
ESLint 只负责检查逻辑错误（如 no-unused-vars）、风格警告（如 no-console），别让它碰缩进、引号、换行这些 Prettier 的地盘

插件默认只激活 html 语言模式，.jsx 或 .vue 文件里改

 不会同步

，因为没被识别为“支持语言”。

打开设置 → 搜索 auto-rename-tag.activationOnLanguage → 编辑 JSON，补上 "javascriptreact" 和 "vue"
确认你当前文件右下角显示的是 JavaScript React（不是 JavaScript），否则插件根本不会监听
如果用了 Volar（Vue3 推荐插件），要关掉它的 volar.autoRenameTag，否则两个插件抢着改，标签可能被重命名两次

插件生效不是“安装完就 OK”，VS Code 有两层作用域：用户级配置全局生效，但项目级配置（如 .prettierrc、.eslintrc.js）优先级更高，且必须放在项目根目录。

settings.json 里的插件开关（如 editor.formatOnSave）只对当前工作区有效，多根工作区要逐个配
JSX 文件关联错误会导致 Prettier 不触发——检查右下角语言模式是否为 JavaScript React，如果不是，点击切换或加 "files.associations": {"*.jsx": "javascriptreact"}
Live Server 启动失败时，看状态栏左下角有没有显示 Go Live 按钮；没有的话，多半是当前文件不在可服务路径内（比如你在 /src 里打开 index.html，但 Live Server 默认从项目根启服务）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！