- 装多了电脑反应慢
别名路径跳转
auto-close-tag
Auto Import
Auto Rename Tag
Git Graph
Git History
Git History Diff
GitLens — Git supercharged
Live Server
Code Runner
Prettier - Code formatter
CodeSnap // 代码查看图片缩略图 Image Preview
Trailing Spaces // 显示空格
Highlight Line 高亮当前一行
Tabnine AI 代码完成插件具有很强的记忆能力
JSON to TS json
npm Intellisense npm模块导入智能提示
Import Cost 依赖包大小提示
Add jsdoc comments 给方法添加JSDoc
jsdoc
HTML Snippets
Wrap Console Log Lite 快捷的输出变量
Quokka.js 直接显示变量结果
Path Intellisense 引用路径智能提示
Regex Previewer 边写正则边看结果
CSS Peek css定位器
Code Spell Checker 拼写检查
Sort Typescript imports import自动排序
Bracket Pair Colorizer 2 括号对齐利器
Javascript Code Snippets
Turbo Console Log
Regex Previewer
Panda Theme
indent-rainbow 彩虹缩进
indent-rainbow-palettes
GitHub Copilot 代码提示神器
turbo-console-log consol.log
highlight-matching-tag 高亮匹配标签
vscode-todo-highlight 高亮todo 注释
better-comments 人性化定制docs
vscode-import-cost 查看导入模块体积
Toggle Quotes 单引号双引号字符串模板切换
Template String Converter 它可以自动转换 JavaScript 的模板字符串。\
和 ToggleQuotes 不同的是,它是自动完成的。
htmltagwrap
当我们需要将某一段 DOM 标签包裹时,这个插件很管用。\
我们可以选择一段 DOM 标签,然后按住 Options+w,就可以在外层创建一个标签了。
Version Lens
可以查看项目中依赖的 npm 包的最新版本,以及升级最新版本
Material Icon Theme 图标
Live Share
你想要将自己的代码分享给别人进行实时地协作编辑和调试?这个插件可以将任何编程语言开发的项目或者任何类型的项目与其他人共享。对方可以直接在你的环境下编写代码,不需要额外安装任何环境或者 SDK。\
甚至可以直接在 Web 中协作编辑!
IntelliSense for CSS class names in HTML css 智能命民
Highlight Matching Tag 高亮标签
Chinese 中文vscode
Color Highlight 颜色高亮
Color Info
Error Gutters 错误提示
error lens 错误提示
Image preview 图片预览小图标
Indenticator 缩紧结构点击时
Trailing Spaces 把尾随空格显示出来。
VSCode Great Icons 文件图标
AZ AL Dev Tools/AL Code Outline 用来梳理代码结构的插件
CodeIf 变量命名
Code Spell Checker 单词拼写是否正确
Partial Diff 文件比较不同
Quokka.js 试试显示运行结果
change-case 快速切换变量格式,什么大坨峰,小驼峰,下划线等等
File Utils 创建,复制,移动,重命名,删除文件和目录的便捷方法,演示图片来自官网。
json2ts
Mithril Emmet 快速生成代码结构,不过好像新版本 `vscode` 已经内置了。
Console
snippets 代码片段
ESLint
Prettier
js文件跳转
jsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
通过配置 `compilerOptions` 中的 `baseUrl` 和 `paths`,设置别名,使得在项目中引用模块时,能够正确解析路径。
设置`jsconfig.json`文件后其实大部分情况下已经能实现组件跳转了
前提是引入的子组件必须为完整的路径。
参考
【利器篇】前端40+精选VSCode插件,总有几个你未拥有! - 掘金 (juejin.cn)