2024前端vscode必备插件

前端vscode必备插件

• • 一、基础的
  • • Auto Rename Tag⭐
    • Code Runner⭐
    • CSS Peek
    • DotENV
    • Error Lens⭐
    • ESLint
    • GitLens — Git supercharged⭐
    • jsdoc
    • open in browser
    • Path Intellisense⭐
    • Prettier - Code formatter
    • Smart Click
    • GitHub Copilot⭐⭐
    • Turbo Console Log
    • vscode extension for ECharts
    • i18n Ally⭐
    • Tailwind CSS IntelliSense⭐
    • vue-helper
    • JSON to TS
    • 二、Vue相关的
    • • Vue Language Features (Volar)⭐⭐⭐
      • TypeScript Vue Plugin (Volar)
      • Vue 3 Snippets
      • Vue VSCode Snippets
      • vue-component
      • 三、美化
      • • Material Icon Theme⭐
        • Vitesse Theme⭐⭐⭐

          一、基础的

          Auto Rename Tag⭐

          修改标签会同步修改

          Code Runner⭐

          快速运行 调试js

          CSS Peek

          跳转对应 css

          DotENV

          高亮ENV文件

          Error Lens⭐

          实时显示错误

          ESLint

          GitLens — Git supercharged⭐

          git相关操作，git 相关在每行代码查看代码是谁修改的

          现在已经收费，不过对于个人开放的仓库不会影响使用

          jsdoc

          快速生成函数注释

          open in browser

          CTRL + B 在浏览器打开

          Path Intellisense⭐

          智能路径引入

          Prettier - Code formatter

          Smart Click

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

          GitHub Copilot⭐⭐

          在编写代码时提供智能的自动完成和代码建议, 提效神器

          Turbo Console Log

          快速高效的Console Log

          vscode extension for ECharts

          智能提示 echarts 的 options

          i18n Ally⭐

          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"],}

          Tailwind CSS IntelliSense⭐

          智能提示 Tailwind CSS语法

          vue-helper

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

          JSON to TS

          Json数据一键转Ts

          二、Vue相关的

          Vue Language Features (Volar)⭐⭐⭐

          vue项目必开插件

          注意！！！Vuter 和 Volar 两个插件不可以共同使用，否则会冲突报错！！！，现在不管是vue2 还是 vue3 都使用这个插件

          TypeScript Vue Plugin (Volar)

          Vue3项目使用的插件

          Vue 3 Snippets

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

          Vue VSCode Snippets

          也是一个vue的代码片段

          vue-component

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

          三、美化

          Material Icon Theme⭐

          文件图标

          Vitesse Theme⭐⭐⭐

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