vscode好用插件记录

1.序言

这里记录一下使用的好用的vscode插件,主要是给自己做一下备忘记录。

2.插件

通用插件

  • Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
    vscode的中文语言包
  • Settings Sync（配置同步到云端）
    可以让我们的vscode配置同步到云端，当我们跟换电脑或者再次安装vscode的时候，只需要登录账号即可同步配置了
  • Markdown Preview Enhanced
    让你拥有飘逸的 Markdown 写作体验。
  • :emojisense:
    :emojisense:可以为MarkDown文档或命令行输出表情，让编程更有趣

样式插件

  • Material Icon Theme
    VSCode文件图标
  • vscode-icons
    vscode-icons给VSCode文件更换更好看的图标。
  • One Dark Pro
    vscode主题

开发类

通用

  • Codelf
    变量命名神器 ,Codelf通过搜索在线开源平台Github, Bitbucket, Google Code, Codeplex, Sourceforge, Fedora Projec的项目源码，帮开发者从中找出已有的匹配关键字的变量名。这个搜索服务支持直接搜索中文。codeif支持中文查询，输入中文意思，codeif可以根据需要查询尽可能满足需要的结果，并展示与查询结果相关的支持各种编程语言的代码片段以及代码库。

  • koroFileHeader
    用于生成文件头部注释和函数注释的插件，支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！

  • GitLens — Git supercharged
    在每行代码的末尾，GitLens 都会公开最后一次提交的作者、提交的时间以及其他详细的备注信息。状态栏的备注显示类似的信息。将鼠标悬停在这些注释上将显示有关每行提交历史记录的更多详细信息。

  • Path Intellisense
    Path Intellisense是一款能够自动补全文件名的VSCode扩展。
    在以往，需要手动去找到指定的文件，然后拷贝路径。这样的繁琐过程对于少数文件处理还可以忍受，如果太多的话就成了一项非常影响效率的事情。
    Path Intellisense 就可以让你像补全代码一样去不全文件名，这样就会大大提升开发过程中的效率。

  • ESlint
    提供一个插件化的javascript代码检测工具,用于代码规范。

  • Prettier - Code formatter
    Prettier 是一个“有态度”的代码格式化工具。它通过解析您的代码并使用自己的规则重新打印它来强制执行一致的样式，这些规则将最大行长度考虑在内，并在每次保存的时候就能自动格式化代码了。

  • Better Comments
    BetterComments可以帮助你编写便于阅读的注释。
    清晰、方便理解的注释不仅对阅读代码的人有好处，对自己也非常有用。开发人员经常会遇到这种情况：过一段时间之后，阅读自己的代码都有困难。而编写描述性的注释对于自己和团队都有好处。
    使用Better Comments扩展，你可以将注释分为警告、询问、待办、重点等几大类。
    在双斜线后面使用下述字符做标记：
    * 表示重点
    ! 表示错误和警告
    ? 表示询问和问题
    // 表示删除
    TODO 表示待办事项

  • Bookmarks
    Bookmarks允许你在工作区中针对不同文件的特定行向代码添加书签。

  • CodeSnap
    CodeSnap可以轻松生成高分辨率，精美的代码图片,在 VS Code 中为你的代码截取漂亮的屏幕截图。
    使用方式很简单：
    使用命令将 Codesnap 调出
    复制要作为输出的一部分的代码
    保存图像到本地

html相关

  • Auto Close Tag
    自动闭合HTML/XML标签
  • Live Preview（VSCode里面打开浏览器）
    可以在vscode里面打开浏览器，一边编码一边查看
  • Auto Rename Tag
    可以在修改HTML 标签的时候,自动修改标签名称
  • HTML Boilerplate
    此扩展提供了所有web应用程序中使用的标准HTML样板代码，可以很快的生成HTML5的基本结构。

JS相关

  • Debugger for Chrome
    Debugger for Chrome将JS代码的调试嵌入Chrome浏览器。
  • Bracket Pair Colorizer（括号做颜色区分）
    给括号做颜色区分 目前已被vscode内置可以自己搜索开启 不需要再安装了
  • Auto Import
    可以自动找到、解析所有可用的导入，并提供代码操作和完成。
  • DotENV
    提供.env文件的语法高亮显示功能
  • JavaScript (ES6) code snippets
    ES6语法智能提示，以及快速输入
  • Import Cost
    Importcost可以在代码中显示导入的估计大小。编写项目时，很重要的一点就是不要导入过大的软件包，以免损害用户体验。避免导入过大软件包的方法之一就是随时跟踪软件包的大小。
  • Turbo Console Log
    用来快速生成、注释、删除console.log的插件。

vue相关

  • Vue Volar extension Pack
    该扩展包自带了众多vue3开发需要的插件。
    注意：安装扩展包后，要将vetur禁用，然后就可以正常使用了。
    包含:

    • Path Intellisense
    • Auto Close Tag
    • Auto Rename Tag
    • Sass (.sass only)
    • SCSS Formatter
    • Prettier - Code formatter
    • ESLint
    • Vue Language Features (Volar)
    • TypeScript Vue Plugin (Volar)

  • vetur
    vue2.x 的配套插件
    用于为.vue单文件组件提供代码高亮以及语法支持,缺点是对ts的支持不太好。使用vue2 js开发的时候会用这个。

  • Vue Language Features (Volar)
    vue3的配套插件 提供typescript和vue3的语法支持，使用vue3开发的时候会用到这个.

  • TypeScript Vue Plugin (Volar)
    用于支持在 TS 中 import *.vue 文件。

  • Vue 3 Snippets
    这个插件包含了所有的 Vue.js 2 和 Vue.js 3 的 api 对应的代码片段。

  • Vue 3 Support - All In One
    Vue3代码段，包含vue2和Vue3中常用的代码高亮显示、代码片段和格式。

  • Vue VSCode Snippets
    生成Vue模板代码使用大全

  • Sass (.sass only)
    缩进的Sass语法高亮显示，自动完成和格式化.

  • SCSS Formatter
    formate: CSS/LESS/SCSS formatter格式化CSS/LESS/SCSS以增强可读性。

posted @ 2023-03-23 15:19  DAmarkday  阅读(318)  评论(0)  编辑  收藏  举报