38、VS code必备前端插件
安装完成后，默认显示英文，我们可以通过安装中文语言包插件来显示中文，操作如下：
打开vscode，点击插件图标（或 + + X），在搜索框中输入“chinese”，安装
使用快捷键“ + + P”打开vscode的命令框，输入 display ，点击“Configure Display Language”，切换语言
如果不喜欢VS code本身的主题色，也可以更换默认主题，在命令框中输入 color theme ，回车，会进入主题列表，通过上下键切换主题，还不满足，没关系，点击安装其他颜色主题，在左侧会出现各式各样的主题插件，选择一个安装即可。
推荐一款图标插件 vscode-icons ，安装成功后，会根据不同的文件类型添加不同的图标样式，看起来会更有趣。
自动闭合 HTML/XML 标签
自动重命名 HTML/XML 标签
解析CSS并自动添加前缀
用于着色匹配括号，让你的代码分层更清晰
运行代码片段或多种语言的代码文件
源代码拼写检查器，提示代码中单词拼写错误
允许查看css，并从HTML文件定位到css文件，文件定义跳转
支持.env文件语法，高亮显示
在VS code中绘制流程图，随时记录你的idea，不要太方便
代码格式校验工具，配合项目中的校验规则，实现保存时格式化代码，开发必备，你值得拥有！
配置文件，在setting.json中添加，可以参考一下
突出显示匹配的标签
当你引入时在左侧会显示图片的缩略图，方便预览
在编辑器中展示引用包的大小，让你更了解你引入的包
帮助你更快速的添加console和删除console，确实方便
在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！
代码插件，在导入语句中自动完成NPM模块
允许你在默认浏览器或应用程序中打开当前文件。
自动识别文件路径，引用更方便
非常喜欢的一款代码格式化工具，在项目中也可以配置自己的规则
方便svg文件预览
快速搜索编辑器中添加的标签，如todo和fixme，并在资源管理器窗格中的树视图中显示。单击树中的todo将打开文件并将光标放在包含TODO的行上。
突出显示尾随空格并快速删除它们！
你的代码很强大，释放它！
......
大家有什么好用的插件，也可以推荐一下哈~
八个提高效率的VSCode必备扩展插件
Visual Studio Code 是用于构建当前 Web 应用程序的源代码编辑器。它是一个免费的开源管理器。它支持可用于 Web 应用程序改进的各种增强功能。这里是提高工作效率的10个必备VSCode 扩展：
1. 代码拼写检查器
一个基本的拼写检查器，适用于驼峰式代码。
此拼写检查器的目标是帮助捕获常见的拼写错误，同时将误报数量保持在较低水平。
2. Compareit
Compareit 扩展可帮助您比较两个文件，您可以从当前项目和计算机或剪贴板上的其他目录中进行选择。
3. stepsize
有时您会遇到技术债务或其他应该修复的技术问题。您可能没有时间立即修复它，但您想让它可见并提出问题。
Stepsize 允许您为代码添加书签、直接从编辑器跟踪技术债务以及创建 TODO。它还允许您与您的团队成员协作进行维护和重构工作。
直接从 VSCode 报告技术债务
4. WakaTime
WakaTime 允许您查看从您的编程活动自动生成的指标、见解和时间跟踪。
您将准确了解编码花费的时间，因为它会在您开始和停止输入时自动跟踪，并提供项目、文件、分支、提交/PR、功能等的详细指标。
5. Quokka.js
Quokka.js 是用于快速 JavaScript / TypeScript 原型设计的开发人员生产力工具。运行时值会在您键入时更新并显示在您的代码旁边。它使 JavaScript / TypeScript 的原型设计、学习和测试速度更快。
6. Chrome 调试器
在 Chrome 浏览器或任何其他支持 Chrome 调试器协议的目标中调试您的 JavaScript 代码
7. 剪贴板 历史
保留复制项目的 历史 记录，并在需要时重新粘贴。
8. 配置文件切换器
允许您在您创建的不同配置文件之间切换。此扩展允许您表征各种设置配置文件，而无需在它们之间进行太多拉伸切换。
以上插件下载：八个提高效率的VSCode必备扩展插件
作为一个前端开发，vscode有哪些值得安装的插件
1. Open-In-Browser
由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项。
2. Quokka
Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用。
3. Faker
使用流行的 JavaScript 库 – Faker，能够帮你快速的插入用例数据。Faker 可以随机生成姓名、地址、图像、电话号码，或者经典的乱数假文段落，并且每个类别还包含了各种子类别，你可以根据自身的需求来使用这些数据。
4. CSS Peek
使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。
5. HTML Boilerplate
通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。
6. Prettier
Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint，那么还有个 Prettier – Eslint 插件，你可不要错过咯！
7. Color Info
这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
8. SVG Viewer
此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。
9. TODO Highlight
这个插件能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务。在默认的情况下，它会查找 TODO 和 FIXME 关键字。当然，你也可以添加自定义表达式。
10. Icon Fonts
这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
11. Minify
这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier，与 JavaScript、CSS 和 HTML 协同工作。
12. Change Case
虽然 VSCode 内置了开箱即用的文本转换选项，但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等。
13. Regex Previewer
这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项。
14. Language and Framework Packs
VSCode 默认支持大量的主流编程语言，但如果你所使用的编程语言不包括在内，也可以通过下载扩展包来自动添加。同时，你还可以添加一些像 React Native 与 Vue 的相关 Web 开发插件包。
15. Themes
当然，在众多的实用插件中，岂能少了漂亮的主题呢？你每天都会与你的 VSCode 编辑器进行“亲密的接触”，为何不把它打扮得更漂亮些呢？这里有一些帮助你更改侧边栏的配色方案，以及图标的相关主题，与大家分享：
• One Monokai
• Aglia
• One Dark
• Material Icon
如何开发一个vscode插件
前端开发者对于vscode想必不陌生，它插件市场中拥有很多开发者开发的插件，让这个编辑器能力的潜力变得无限可能。如果你觉得vscode的功能不能满足你的要求，你完全可以自己去开发拓展一个插件，来增强自己vscode的功能。
我现在有一个需求，就是可以快速复制文件夹或者文件的名称。
这个该怎么做呢。让我们左手开发吧。
运行生成器，填好下方配置，比如插件名啥的。这里我选择的开发方式是typescript
先看看构建好的目录，主要文件就是package.json 和 extension.ts（因为我选择的语言是typescript
package.json
以上主要的配置就是 package.json 中的主要内容，我已经加以注释
接下来我们在 src/extension.ts 中实现
我们只需要点击 Run Extension 即可，此时将打开一个新的 vscode 窗口，显示 Extension Development Host
可以看到我们右键的菜单上成功多了一个功能。点击后成功给出提示，并能粘贴
至此，一个简单的功能便完成了。
打包成 vsix 文件
打开发布市场 官方网站 , 创建自己的发布账号，然后记录下自己的个人 token ， 即可开始发布。
输入自己的账号，和 token 之后就可以发布了。等待几分钟后就可以在网页看到自己的项目
在vscode中也可以搜索到
VS Code 插件开发文档
vscode Extension API
