前端vscode必备插件推荐(开发必备)

2024-03-01 0 203
目录
  • 一、基础的
    • 1、Auto Rename Tag⭐
    • 2、Auto Import – ES6, TS, JSX, TSX
    • 3、Code Runner⭐
    • 4、CSS Peek
    • 5、DotENV
    • 6、Error Lens
    • 7、ESLint
    • 8、GitLens — Git supercharged⭐
    • 9、JavaScript (ES6) code snippets
    • 10、jsdoc
    • 11、npm Intellisense
    • 12、open in browser
    • 13、Path Intellisense⭐
    • 14、Prettier – Code formatter
    • 15、Smart Click
    • 16、Tabnine AI⭐⭐
    • 17、Turbo Console Log
    • 18、vscode extension for ECharts
    • 19、vscode-element-helper
    • 20、path-alias
    • 21、i18n Ally⭐
    • 22、Tailwind CSS IntelliSense
    • 23、vue-helper
    • 24、JSON to TS
  • 二、Vue相关的
    • 1、Vue 3 Snippets
    • 2、Vue VSCode Snippets
    • 3、vue-component
    • 4、Vue Language Features (Volar)⭐⭐⭐
    • 5、TypeScript Vue Plugin (Volar)
  • 三、美化
    • 1、Material Icon Theme⭐
    • 2、Vitesse Theme⭐⭐⭐
  • 总结

    一、基础的

    1、Auto Rename Tag⭐

    前端vscode必备插件推荐(开发必备)

    修改标签会同步修改

    2、Auto Import – ES6, TS, JSX, TSX

    前端vscode必备插件推荐(开发必备)

    自动查找、解析并为所有可用导入提供代码操作和代码完成。适用于 JavaScript (ES6) 和 TypeScript (TS)

    3、Code Runner⭐

    前端vscode必备插件推荐(开发必备)

    快速运行 调试js

    4、CSS Peek

    前端vscode必备插件推荐(开发必备)

    前端vscode必备插件推荐(开发必备)

    跳转对应 css

    5、DotENV

    前端vscode必备插件推荐(开发必备)

    高亮ENV文件

    6、Error Lens

    前端vscode必备插件推荐(开发必备)

    显示错误

    7、ESLint

    8、GitLens — Git supercharged⭐

    前端vscode必备插件推荐(开发必备)

    在每行代码查看代码是谁修改的

    9、JavaScript (ES6) code snippets

    前端vscode必备插件推荐(开发必备)

    ES6代码块

    10、jsdoc

    前端vscode必备插件推荐(开发必备)

    快速生成函数注释

    11、npm Intellisense

    前端vscode必备插件推荐(开发必备)

    智能npm引入 >>> 没啥用

    12、open in browser

    前端vscode必备插件推荐(开发必备)

    CTRL + B 在浏览器打开

    13、Path Intellisense⭐

    前端vscode必备插件推荐(开发必备)

    智能路径引入

    14、Prettier – Code formatter

    15、Smart Click

    前端vscode必备插件推荐(开发必备)

    双击标签,选中标签包裹的内容

    16、Tabnine AI⭐⭐

    前端vscode必备插件推荐(开发必备)

    代码提示

    17、Turbo Console Log

    前端vscode必备插件推荐(开发必备)

    快速高效的Console Log

    18、vscode extension for ECharts

    前端vscode必备插件推荐(开发必备)

    智能提示 echarts的 options

    19、vscode-element-helper

    前端vscode必备插件推荐(开发必备)

    智能提示element-ui

    20、path-alias

    前端vscode必备插件推荐(开发必备)

    一个可以解决路径别名提示,跳转的vscode插件 >>> 我测试的时候没啥用

    21、i18n Ally⭐

    前端vscode必备插件推荐(开发必备)

    i18n插件,实时预览,非常的好用,

    记得在settings.json中配置下面的代码

    {
    \”i18n-ally.localesPaths\”: \”locales\”,
    \”i18n-ally.keystyle\”: \”nested\”,
    \”i18n-ally.sortKeys\”: true,
    \”i18n-ally.namespace\”: true,
    \”i18n-ally.enabledParsers\”: [\”yaml\”, \”js\”],
    \”i18n-ally.sourceLanguage\”: \”en\”,
    \”i18n-ally.displayLanguage\”: \”zh-CN\”,
    \”i18n-ally.enabledFrameworks\”: [\”vue\”],
    }

    22、Tailwind CSS IntelliSense

    前端vscode必备插件推荐(开发必备)

    前端vscode必备插件推荐(开发必备)

    智能提示 Tailwind CSS语法

    23、vue-helper

    前端vscode必备插件推荐(开发必备)

    Vue2 组件跳转源码 包括 Element-UI 和 vux 和 iView,也可以比如输入el-table,可以生成一个骨架

    24、JSON to TS

    前端vscode必备插件推荐(开发必备)

    Json数据一键转Ts

    二、Vue相关的

    1、Vue 3 Snippets

    前端vscode必备插件推荐(开发必备)

    这个插件基于最新的 Vue 2 及 Vue 3 的 API 添加了 Code Snippets(代码片段)。

    2、Vue VSCode Snippets

    前端vscode必备插件推荐(开发必备)

    也是一个vue的代码片段

    3、vue-component

    前端vscode必备插件推荐(开发必备)

    智能引入自己写的组件 + 跳转组件 >>> 详情去看官方说明

    4、Vue Language Features (Volar)⭐⭐⭐

    前端vscode必备插件推荐(开发必备)

    vue项目必开插件注意!!!Vuter 和 Volar 两个插件不可以共同使用,否则会冲突报错!!!,现在不管是vue2 还是 vue3 都使用这个插件

    5、TypeScript Vue Plugin (Volar)

    前端vscode必备插件推荐(开发必备)

    Vue3项目使用的插件

    三、美化

    1、Material Icon Theme⭐

    前端vscode必备插件推荐(开发必备)

    文件图标

    2、Vitesse Theme⭐⭐⭐

    前端vscode必备插件推荐(开发必备)

    主题 >>> 推荐使用 Vitesse Dark Soft

    总结

    到此这篇关于前端vscode必备插件推荐的文章就介绍到这了,更多相关前端vscode必备插件内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

    您可能感兴趣的文章:

    • VsCode插件整理(小结)
    • 详解vscode中vue代码颜色插件
    • VsCode工具开发vue项目必装插件清单(推荐!)
    • vsCode安装使用教程和插件安装方法
    • vscode常用插件整理汇总

    收藏 (0) 打赏

    感谢您的支持,我会继续努力的!

    打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
    点赞 (0)

    悠久资源 编程综合 前端vscode必备插件推荐(开发必备) https://www.u-9.cn/biancheng/bczonghe/180966.html

    常见问题

    相关文章

    发表评论
    暂无评论
    官方客服团队

    为您解决烦忧 - 24小时在线 专业服务