讲师中心 微信公众号
AI工具推荐 视频效率加速

VSCode必备神级插件有哪些 - 2024年最受欢迎的提升效率扩展盘点

落杰酱_5194

落杰酱_5194

发布时间:2026-03-30 15:11:58

|

342人浏览过

|

来源于php中文网

原创

ESLint 与 Prettier 需分工协作:ESLint 负责逻辑与规范检查,Prettier 专管格式化;通过配置 eslint-config-prettier 关闭 ESLint 格式规则,并在 VSCode 中禁用 eslint.format.enable、启用 Prettier 为默认格式化器,可避免冲突。

vscode必备神级插件有哪些 - 2024年最受欢迎的提升效率扩展盘点

ESLint + Prettier 怎么配才不打架

ESLint 检查代码逻辑和规范,Prettier 负责格式排版,两者默认规则会冲突——比如 ESLint 要求分号,Prettier 默认删分号,保存时反复拉扯,光标乱跳、报错红波浪线不断闪。

  • 先装插件:ESLint(Microsoft 官方)和 Prettier - Code formatter,别用其他同名非官方版本
  • 项目根目录运行 npx eslint --init 生成 .eslintrc.cjs,选“JavaScript modules (import/export)”和“Node”环境,最后一步选“JSON”或“JavaScript”都行,但别跳过
  • 在 .eslintrc.cjs 的 extends 数组里加 'prettier',再额外安装 eslint-config-prettier 并加入 extends,顺序必须是:自定义规则 → eslint-config-prettier → prettier
  • VSCode 设置中启用 editor.formatOnSave,并设 editor.defaultFormatter 为 esbenp.prettier-vscode;同时关掉 eslint.format.enable(它只该做检查,不该抢格式化权)

Auto Rename Tag 改了 <div> 为什么 </div> 没同步

常见于 Vue/JSX 文件里标签嵌套深、或用了自定义组件名(如 <MyButton>),插件默认只对 HTML 标准标签生效,且依赖语言模式识别是否准确。

  • 确认当前文件右下角显示的是 Vue 或 JavaScript React,不是 Plain Text 或 HTML;点一下切换正确语言模式
  • 检查设置里 auto-rename-tag.activationOnLanguage 是否包含 vue 和 javascriptreact,默认值可能只含 html
  • 如果用了 JSX 片段(如 rfc 快捷生成函数组件),确保 Auto Rename Tag 插件是最新版(2025 年后已支持 JSX 闭合标签自动更新)
  • 别在 template 外的 script 区域期待它工作——它只管模板结构,不管 JS 变量名

Path Intellisense 提示路径时总漏掉 src/utils 这类深层目录

不是插件坏了,而是它默认只扫描当前打开文件夹下的直接子目录,遇到软链、符号链接、或未在 VSCode 工作区里显式包含的子文件夹,就会“看不见”。

VSCode
VSCode

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

下载
  • 打开 VSCode 左侧资源管理器,右键项目根文件夹 → Add Folder to Workspace,确保所有要用的模块目录都在工作区范围内
  • 如果用了 tsconfig.json 或 jsconfig.json 配置了 baseUrl 和 paths,Path Intellisense 默认不读这些——得手动在 settings.json 里加 "path-intellisense.mappings" 映射
  • 例如:"path-intellisense.mappings": { "@": "${workspaceFolder}/src", "@utils": "${workspaceFolder}/src/utils" }
  • 注意:node_modules 内包名补全是开箱即用的,但自定义别名必须显式配置,否则输入 import xxx from '@utils/xxx' 时不会提示

GitLens 行内 blame 显示 “No author info”

不是 GitLens 没装好,而是当前文件没被 Git 跟踪,或者你正编辑的是未提交的新建文件、暂存区外的修改、或分支上某次 rebase 后的孤立提交。

  • 执行 git status 确认文件状态:如果是 untracked,先 git add .;如果是 modified 但没 git add,blame 仍可能为空
  • 检查 VSCode 底部状态栏是否显示了正确的 Git 分支名,如果显示 No source control providers,说明没识别到 Git 仓库——确认项目根目录有 .git 文件夹
  • GitLens 默认只显示最近一次 commit 的作者信息,若某行是刚改的、还没 commit,就显示空白;按 Ctrl+Shift+P 输入 GitLens: Toggle Blame Annotations 可强制刷新
  • 团队协作中,如果同事用 --author 覆盖了提交作者,而你本地没配置 user.name/email,也可能导致 blame 显示异常

真正卡住人的,往往不是插件装不装,而是装完后没意识到 ESLint 和 Prettier 的控制权要切分清楚、GitLens 的 blame 依赖真实 commit 记录、Path Intellisense 的映射得手动写进 settings —— 这些地方一漏,插件就“失灵”,但错误又不报,只能靠排查意识兜底。

热门AI工具

更多
Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2035

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2962

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

996

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3339

2025.09.10

format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

1669

2023.07.31

python中的format是什么意思
python中的format是什么意思

python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1211

2024.06.27

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4036

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1275

2023.07.28

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

100

2026.09.30

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn