Vscode 插件推荐 ​

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

Font. 1: 字体推荐 ​

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

• Fira Code 程序员字体 https://github.com/tonsky/FiraCode/releases/
• 霞鹜文楷等宽 Light 下载
• Consolas 程序员字体 下载
• Courier New 是 Windows 的缺省等宽字体

// 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个多小时