VSCode插件在前端开发中的多场景应用

浅宇吖_8758

浅宇吖_8758

2026-09-14

763人浏览

原创

应禁用eslint中与格式相关的规则,配置prettier为唯一格式化工具,确保vscode仅启用prettier自动格式化、关闭eslint自动修复,并正确配置别名路径、auto rename tag对vue支持及hmr环境。

vscode插件在前端开发中的多场景应用

怎么让 Prettier 和 ESLint 不打架

保存时格式化和语法检查同时触发,常导致代码被反复修改、报错闪烁、甚至 import 语句被删掉。根本原因是两者职责重叠:Prettier 管样式,ESLint 管逻辑,但某些规则(比如 semiquotes)ESLint 也管。

实操建议:

  • 禁用 ESLint 中与格式相关的规则,在 .eslintrc.js 里加 "prettier" 插件并执行 extends: ["eslint:recommended", "plugin:prettier/recommended"]
  • 确保 editor.defaultformatter 设为 esbenp.prettier-vscode,且 editor.formatonsavetrue
  • 不要同时开启 ESLint 的 fix on save —— 这会和 Prettier 冲突;只保留 Prettier 的自动格式化
  • 若用 Vue 或 TS,额外安装 @vue/eslint-config-prettier@typescript-eslint/eslint-config-prettier 关闭对应规则

别名路径跳转为什么点不动

import Header from '@/components/Header.vue',Ctrl+单击却没反应,不是插件没装,而是配置没对齐。

常见卡点:

  • jsconfig.jsontsconfig.json 里没配 baseUrlpaths,例如缺失:"compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }
  • 项目根目录下没有 jsconfig.json(TS 项目必须有 tsconfig.json,JS 项目必须显式加 jsconfig.json
  • VSCode 没识别到配置文件变更 —— 关闭再重启窗口,或运行命令 Developer: Reload Window
  • 插件本身不处理 ~ 别名,只认 @ 或你自定义的前缀(如 src/),别名必须和配置完全一致

Auto Rename Tag 在 Vue 模板里失效

改了 <div class="card">,但 <code>

没同步,尤其在 <template></template> 块里。

原因很直接:

VSCode
VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载
  • 插件默认只启用 HTML 和 XML 语言模式,Vue 文件需手动开启支持:打开设置,搜 auto rename tag,勾选 Auto Rename Tag: Enable Auto Rename Tag For Vue
  • 如果用了 <script setup></script> 语法,确保插件版本 ≥ 0.1.12(老版本不识别 setup 语法块内的标签)
  • 部分主题或其它插件(如 Volar)可能劫持了 Vue 文件的语言服务,可临时禁用 Volar 测试是否冲突
  • 别在未闭合的标签里测试,比如 <div><p>xxx 少了 <code>

,插件无法推断配对关系

垂直分屏时 CSS 修改不实时生效

左边开 Button.vue,右边开 Button.css,改完 CSS 保存,浏览器没更新 —— 不是热更新坏了,是编辑器没联动。

关键动作:

  • 确认你用的是真实开发服务器(如 Vite、Vue CLI),不是静态预览插件(如 Live Server);后者不监听 CSS 变更,只刷新 HTML
  • 确保两个文件都在同一工作区根目录下,且 CSS 是通过 @import<link> 正确引入的,而不是复制粘贴进 <style></style> 块里硬编码
  • VSCode 分屏本身不触发构建,只是视图切分;真正生效靠的是框架的 HMR(热模块替换),所以要盯住终端里是否有 [vite] hot updated: 日志
  • 如果用的是 SCSS/Less,检查是否装了对应预处理器插件(如 Easy SCSS),否则保存后不会编译成 CSS

插件不是装上就灵,每个都卡在具体配置、语言模式、项目结构这些细节里。最容易忽略的是:插件之间有隐式依赖,比如 Auto Import 要 Volar 或 TypeScript 插件先跑起来,而 Volar 又得配合正确的 tsconfig.json 才能解析组件。调不通时,先看控制台输出(Help > Toggle Developer Tools),比瞎试快得多。

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

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2023

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4283

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5410

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

4838

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

683

5

vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

2023.06.30

1135

18

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.21

2232

3

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1789

12

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1587

8

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程