VSCode 推荐
本篇文章主要讲述VSCode相关配置和插件推荐。帮助你更好的投入开发
插件篇
vscode编辑器一个强大的特性就是插件市场。里面有各路大神提供了功能强大的功能插件。我们遴选了部分不错的列在下方。
这份表单也会随着时间推移进行同步。如果你有好的发现。也可尽管提出给架构组。
评分分为三个等级
- ⭐⭐⭐ 必须安装
- ⭐⭐ 推荐安装
- ⭐ 按需
需要注意的是。VSCode插件并不是安装的越多越好。并且并不是安装量越高就代表插件越厉害。相反。如果不假思索的安装插件。反而会导致一些问题
- 启动慢，很多扩展是启动 VSCode 的时候就开始加载的，所以不一定是 VSCode 自身变慢了，可能是你扩展装多了。你可以通过在 VSCode 的命令面板调用命令 Developer: Startup Performance 查看各个扩展的在 VSCode 启动时的加载时间。
- 扩展冲突，比如安装了多个会修改代码颜色的扩展，TODO highlight 和 Todo Tree 之间
- 功能重复，例如：IntelliSense for CSS class names in HTML 和 HTML CSS Support
- CPU 占用过高，很多被弃坑的 VSCode 扩展你去看它们 github issues 页面都可以看到一堆 issues 抱怨这个问题，例如 import-cost
公司插件
| 名称 | 描述 | 推荐指数 |
|---|---|---|
| wmeimob | 美萌插件 | ⭐⭐⭐ |
| wmeimob-aliyun | 阿里云上传图片 | ⭐⭐⭐ |
通用
| 名称 | 描述 | 推荐指数 |
|---|---|---|
| Auto Close Tag | 自动闭合HTML标签 （官方除vue组件。内置支持） | ⭐⭐ |
| Auto Import | import提示 | ⭐⭐ |
| Babelrc | .babelrc文件高亮提示 | ⭐ |
| Better Comments | 编写更加人性化的注释 | ⭐ |
| Bookmarks | 添加行书签 | ⭐ |
| Bracket Lens | 在闭合的括号处提示括号头部的代码 | ⭐ |
| Bracket Pair Colorizer 2 | 用不同颜色高亮显示匹配的括号 | ⭐⭐ |
| Code Runner | 运行选中代码段（支持多数语言） | ⭐ |
| Code Spell checker | 单词拼写检查 | ⭐⭐ |
| Color Highlight | 颜色值在代码中高亮显示 | ⭐ |
| Color Info | 小窗口显示颜色值，rgb,hsl,cmyk,hex等等 | ⭐ |
| Color Picker | 拾色器 | ⭐ |
| DotENV | .env文件高亮 | ⭐ |
| Edit csv | 编辑CSV文件 | ⭐ |
| EditorConfig for VS Code | EditorConfig插件 | ⭐ |
| Error Gutters | 在行号处提示错误代码 | ⭐⭐⭐ |
| ESLint | ESLint插件，高亮提示 | ⭐⭐⭐ |
| File Peek | 根据路径字符串，快速定位到文件 | ⭐⭐ |
| filesize | 状态栏显示当前文件大小 | ⭐ |
| Find-Jump | 快速跳转到指定单词位置 | ⭐⭐ |
| Git History(git log) | 查看git log | ⭐⭐⭐ |
| Git Tree Compare | Git树形比对，查看不同分支的差异 | ⭐ |
| gitignore | .gitignore文件语法 | ⭐ |
| GitLens | 显示文件最近的commit和作者，显示当前行commit信息 | ⭐⭐⭐ |
| Guides | 高亮缩进基准线 | ⭐ |
| Highlight Matching Tag | 高亮匹配选中的标签 | ⭐ |
| htmltagwrap | 包裹HTML | ⭐ |
| Import Beautify | import分组、排序、格式化 | ⭐⭐ |
| Import Cost | 行内显示导入（import/require）的包的大小 请注意。如果你的电脑性能不足。不建议尝试 | ⭐ |
| Indenticator | 缩进高亮 | ⭐⭐ |
| JS Refactor | 代码重构工具，提取函数、变量重命名等等 | ⭐ |
| JSON to TS | JSON结构转化为typescript的interface | ⭐ |
| Less IntelliSense | less变量与混合提示 | ⭐⭐⭐ |
| Log Wrapper | 生产打印选中变量的代码 | ⭐ |
| markdownlint | Markdown格式提示 | ⭐⭐ |
| Node modules resolve | 快速导航到Node模块 | ⭐ |
| Partial Diff | 对比两段代码或文件 | ⭐ |
| Parameter Hints | 在函数调用处指示参数名称 | ⭐ |
| Path Intellisense | 路径完成提示 编辑器已经支持。可以试试看 | ⭐ |
| Polacode | 将代码生成图片 | ⭐ |
| Prettier - Code formatter | prettier官方插件 | ⭐⭐⭐ |
| Project Manager | 快速切换项目 | ⭐ |
| React Playground | 为编辑器提供一个react组件运行环境，方便调试 | ⭐ |
| REST Client | 发送REST风格的HTTP请求 | ⭐ |
| Sass | sass插件 | ⭐⭐⭐ |
| String Manipulation | 字符串转换处理（驼峰、大写开头、下划线等等） | ⭐ |
| SVG Viewer | SVG查看器 | ⭐⭐⭐ |
| Todo Todo Tree | 收集代码中的TODO注释，支持快速搜索 | ⭐⭐ |
| Version Lens | package.json文件显示模块当前版本和最新版本 | ⭐ |
| vetur | Vue2插件 | ⭐⭐⭐ |
| Volar | ⭐⭐⭐ | |
| Vue - Official | Vue3插件 | ⭐⭐⭐ |
| vscode-icons | 文件图标，方便定位文件 | ⭐ |
| tongyi-lingma | 通义灵码-代码编程辅助工具 | ⭐⭐⭐ |
| vscode-random | 随机字符串生成器 | ⭐ |
| Vue Peek | 支持跳转到Vue组件定义文件 | ⭐⭐ |
| Wrap Console Log Lite | 对选中代码快速console.log | ⭐⭐⭐ |
编辑器设置
以下设置是在你原本编辑器基础上做增量
js
{
"breadcrumbs.enabled": true,
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.linkedEditing": true,
"eslint.validate": ["javascript", "javascriptreact", "vue"],
"eslint.autoFixOnSave": true,
"tslint.autoFixOnSave": true,
"todo-tree.general.tags": ["TODO:", "FIXME:"],
"todo-tree.highlights.defaultHighlight": {
"gutterIcon": true
},
"todo-tree.highlights.customHighlight": {
"TODO:": {
"foreground": "#fff",
"background": "#ffbd2a",
"iconColour": "#ffbd2a"
},
"FIXME:": {
"foreground": "#fff",
"background": "#f06292",
"icon": "flame",
"iconColour": "#f06292"
}
}
}