vscode插件

196 阅读3分钟
  • 装多了电脑反应慢
别名路径跳转
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)

30 个极大提高开发效率超级实用的 VSCode 插件 - 掘金 (juejin.cn)

mp.weixin.qq.com/s/E1594qTcv…