Vscode 插件推荐

::: details 目录

目录

  • ​Vscode 插件推荐​
  • ​​Font. 1: 字体推荐​​
  • ​​Them. 2: Ayu 主题​​
  • ​​Them. 3: Spacegray VSCode​​
  • ​​Plug. 4: Vetur vue2工具​​
  • ​​Plug. 5: volar vue3工具​​
  • ​​Plug. 6: Tabnine AI - 必备​​
  • ​​Plug. 7: Favorites 插件​​
  • ​​Plug. 8: 别名路径跳转 插件​​
  • ​​Plug. 9: Auto Close Tag​​
  • ​​Plug. 10: Auto Rename Tag​​
  • ​​Plug. 11: Beautify 插件​​
  • ​​Plug. 12: Prettier - Code formatter​​
  • ​​Plug. 13: Bracket Pair Color DLW​​
  • ​​Plug. 14: Chinese 插件​​
  • ​​Plug. 15: CSS Navigation​​
  • ​​Plug. 16: Draw.io Integration​​
  • ​​Plug. 17: EditorConfig for VS Code​​
  • ​​Plug. 18: Error Lens 插件​​
  • ​​Plug. 19: ESLint 插件​​
  • ​​Plug. 20: Git History 插件​​
  • ​​Plug. 21: npm 插件​​
  • ​​Plug. 22: Npm Intellisense​​
  • ​​Plug. 23: npm-links 插件​​
  • ​​Plug. 24: Path Intellisense​​
  • ​​Plug. 25: Paste Image 插件​​
  • ​​Plug. 26: Project Manager​​
  • ​​Plug. 27: Live Server​​
  • ​​Plug. 28: SFTP​​
  • ​​Plug. 29: Template String Converter​​
  • ​​Plug. 30: TypeScript Importer​​
  • ​​Plug. 31: Visual Studio IntelliCode​​
  • ​​Plug. 32: vue-helper 自动跳转​​
  • ​​Plug. 33: Dyno File Utils​​


:::

vscode 作为前端开发，需要搭建下开发环境，改的地方还是挺多的。

Font. 1: 字体推荐

开发环境 一个好字体，至关重要

// settings.json
"editor.fontFamily": "'Fira Code', '霞鹜文楷等宽 Light', Consolas,  'Courier New'",

Them. 2: Ayu 主题

主题相当重要，整个风格会一下子高大上起来

  • ​​Ayu Mirage​​ 这是一款暗黑色的主题
  • 插件搜索 ​​Ayu​​​ 作者 ​​teabyii​​ 下载量 138万
// settings.json
"workbench.colorTheme": "Ayu Mirage",

Them. 3: Spacegray VSCode

之前用的一款主题 ​​Base 16 Eighties​​ 这个风格我就特别喜欢

  • 插件搜索 ​​Spacegray VSCode​​​ 作者 ​​Mihai Vilcu​​

Plug. 4: Vetur vue2工具

开发vue2的vscode官方插件

  • 插件搜索 ​​Vetur​​​ 作者 ​​Pine Wu​​

Plug. 5: volar vue3工具

开发vue3的vscode官方插件 ​​Vue Language Features (Volar)​​

  • 插件搜索 ​​Volar​​​ 作者 ​​Vue​​
  • 还有一个ts的插件 具体看需要用哪个

Plug. 6: Tabnine AI - 必备

代码智能提示 用了就回不去了 关键是免费

  • 插件搜索 ​​Tabnine AI​​​ 作者 ​​TabNine​​

Plug. 7: Favorites 插件

当前项目 收藏重要的页面

  • 插件搜索 ​​Favorites​​​ 作者 ​​kdcro101​​ 下载量 3万
  • 根目录会生成 .favorites.json 配置文件

Plug. 8: 别名路径跳转 插件

ctrl + 鼠标左键 点击 变量 函数名 自动跳转

  • 插件搜索 ​​别名路径跳转​​​ 作者 ​​lihuiwang​​
  • 要有 ​​jsconfig.json​​ 文件支持

Plug. 9: Auto Close Tag

自动闭合标签 插件

  • 插件搜索 ​​Auto Close Tag​​​ 作者 ​​Jun Han​​

Plug. 10: Auto Rename Tag

标签自动改名 插件

  • 插件搜索 ​​Auto Rename Tag​​​ 作者 ​​Jun Han​​

Plug. 11: Beautify 插件

代码格式化插件 这个插件用做vetur的html 格式化工具

  • 插件搜索 ​​Beautify​​​ 作者 ​​HookQR​​
  • 这个插件不要启用全局 我记得会和eslint有冲突

Plug. 12: Prettier - Code formatter

代码格式化插件 这个插件用做vetur的css less 格式化工具

  • 插件搜索 ​​Prettier​​​ 作者 ​​Prettier​​
  • 这个插件不要启用全局 我记得会和eslint有冲突

Plug. 13: Bracket Pair Color DLW

彩虹括号 插件

  • 插件搜索 ​​Bracket Pair Color DLW​​​ 作者 ​​Bracket Pair Color DLW​​

Plug. 14: Chinese 插件

简体中文 全称是 ​​Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code​​

  • 插件搜索 ​​Chinese​​​ 作者 ​​Microsoft​​

Plug. 15: CSS Navigation

css 自动跳转

  • 插件搜索 ​​CSS Navigation​​​ 作者 ​​pucelle​​

Plug. 16: ​​Draw.io Integration​​

画图软件 必备

  • 插件搜索 ​​Draw.io​​​ 作者 ​​Henning Dieterichs​​

Plug. 17: EditorConfig for VS Code

项目编码的基础设施

  • 插件搜索 ​​EditorConfig​​​ 作者 ​​EditorConfig​​

Plug. 18: Error Lens 插件

错误信息直接显示在当前行的后面 特别直观

  • 插件搜索 ​​Error Lens​​​ 作者 ​​Alexander​​

Plug. 19: ESLint 插件

代码校验插件 属于必备插件

  • 插件搜索 ​​ESLint​​​ 作者 ​​Dirk Baeumer​​

Plug. 20: Git History 插件

git提交的历史记录 看看谁改出的bug 😃

  • 插件搜索 ​​Git History​​​ 作者 ​​Don Jayamanne​​

Plug. 21: npm 插件

执行 package.json 的 script 脚本，必装插件

  • 插件搜索 ​​npm​​​ 作者 ​​egamma​​

Plug. 22: Npm Intellisense

导入导出 包名 的自动联想，必装插件

  • 插件搜索 ​​Npm Intellisense​​​ 作者 ​​Christian Kohler​​

Plug. 23: npm-links 插件

显示依赖包的文件位置 主要看全局依赖包的位置，必装插件

  • 插件搜索 ​​npm-links​​​ 作者 ​​Dolov​​

Plug. 24: Path Intellisense

路径的自动联想 必装插件

  • 插件搜索 ​​Path Intellisense​​​ 作者 ​​Christian Kohler​​

Plug. 25: Paste Image 插件

截图后粘贴到vscode里面，这个不常用，因为 ​​Obsidian​​​ ​​Typora​​支持直接显示

  • 插件搜索 ​​Paste Image​​​ 作者 ​​mushan​​

Plug. 26: Project Manager

将多个项目都显示在左侧列表 好切换，由于我用rolan，所以这个不太常用

  • 插件搜索 ​​Project Manager​​​ 作者 ​​Alessandro Fragnani​​

Plug. 27: Live Server

在html文件右键 直接开服务 很方便

  • 插件搜索 ​​Live Server​​​ 作者 ​​Ritwick Dey​​

Plug. 28: SFTP

自动将代码传送到ftp空间，自动脚本发布代码用的

  • 插件搜索 ​​SFTP​​​ 作者 ​​liximomo​​

Plug. 29: Template String Converter

字符串里面输入变量 "Menu:" -> `Menu:${candy}`

  • 插件搜索 ​​Template String Converter​​​ 作者 ​​meganrogge​​

Plug. 30: TypeScript Importer

ts开发使用 自动搜索ts定义 导入等等

  • 插件搜索 ​​TypeScript Importer​​​ 作者 ​​pmneo​​

Plug. 31: Visual Studio IntelliCode

vscode 自动联想插件

  • 插件搜索 ​​Visual Studio IntelliCode​​​ 作者 ​​Microsoft​​

Plug. 32: vue-helper 自动跳转

代码自动跳转

  • 插件搜索 ​​vue-helper​​​ 作者 ​​shenjiaolong​​

Plug. 33: Dyno File Utils

​​2022年09月08日 星期四​​

Dyno File Utils - VSCode Extension 新建目录 新建文件 很好用

  • 插件搜索 ​​Dyno File Utils​​​ 作者 ​​Dyno Nguyen​​
  • 这个插件找了1个多小时

---------------------------------------------
生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果是对自己行动的嘉奖。
↑面的话，越看越不痛快，应该这么说：

生活的意义就是你自己知道你要做什么，明确目标。没有目标，后面都是瞎扯！

新博客 ​​​https://www.VuejsDev.com​​ 用于梳理知识点