让你事半功倍的VS Code插件大全

前言

最近在录视频，分享一些css知识点，发现大家对我的编辑器很感兴趣，于是想写一篇文章，介绍下我的编辑器和一些常用插件。帮助同行们 funny code！
视频是CSS每日进步一点点系列，主要发布在知乎平台，欢迎大家去look look~
贴个地址——捡代码的小女孩

1.我为什么使用vscode

在今年之前也也是个webstorm迷，webstorm被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。它强大的内置功能使它长期位居神坛。甚至刚进入工作时，不用webstorm会被认为是略low的开发者。那么我为什么转而使用vscode呢？相信大家都被 激活码已失效 时刻困扰着，隔三差五的需要去问度娘要激活码。不过让我下定决心放弃它的不是这个问题，而是它强大的内置功能带来的启动时间过慢，运行内存占用过高，让我内存本就不富裕的电脑时不时卡死。所以我便退而求其次，开始使用vscode。在习惯的过程中，爱上了vscode。

那么vscode较其他编辑器有什么优点呢？

• 【轻量级】-VScode是一款轻量级的编辑器，安装包非常小，而且启动速度非常快。
• 【丰富的插件系统】-VScode有着非常丰富的插件系统，无论你是编辑HTML、CSS、JS、TS、Vue、React等前端代码，还是JAVA、Python等后端代码。我们都可以找到相对应的插件，让我们如虎添翼，更快速地完成项目。
• 【代码跟踪功能】-VScode具有优秀的代码跟踪功能，可以非常明显地为我们标注代码更改。

所以如果你和我一样，被激活码和运行内存不足的问题困扰着，欢迎你和我一样改用并不逊色的vscode吧，vscode丰富的插件市场几乎可以满足你的所有幻想。如果你习惯了webstorm，但是又刚刚好需要破解版的话，可以私信哦~我可以分享给有需要的你们webstorm破解补丁。

2.VScode 主题

很多小伙伴问我编辑器主题是啥，这里对主题不做过多介绍，只分享下我用的主题是 Monokai，其他更多主题大家可以在 首选项 -> 颜色主题 中挑选设置~

3.VScode 插件

Chinese (Simplified) Language Pack for Visual Studio Code
适用于 VS Code 的中文（简体）语言包

• 安装后，在 locale.json 中添加 “locale”: “zh-cn”，即可载入中文（简体）语言包。要修改 locale.json，你可以同时按下 Ctrl+Shift+P 打开命令面板，之后输入 “config” 筛选可用命令列表，最后选择配置语言命令。
• 配置完成后，重启vscode就可以使用中文版的vscode啦

Beautify
自动格式化代码

• 可美化JS、JSON、CSS、Sass、HTML（其他类型的文件不行）

Better Comments
注释高亮美化，让你爱上写注释和读注释

• 主要是针对行注释，对不同类型的注释会附加不同的颜色
• 在better-comments.tags 中内置五中高亮颜色，可自行配置

Bracket Pair Colorizer
括号美化

• 为代码中的括号添上一抹亮色 ，成对括号一样的颜色，方便阅读

CodeSnap
代码截图工具

• ctrl + shift + p 打开首选项，选择codeSnap
• 选择代码片段即可截图，支持长截图

colorize
可视化颜色

• 让你网页上设置的颜色，在代码中一眼找到

Live Server
具有实时加载功能的小型服务器

• 让你编写完代码后不用刷新浏览器便可看到最新效果

open in browser
便捷的在浏览器中访问html页面

• 插件市场安装后，右键，选中open in default browser

Git Emoji Commit 中文版
git提交信息表情

JS-CSS-HTML Formatter
保存代码时，自动格式化

Path Intellisense
引用路径自动补全

Terminal
在vscode中内置终端

Todo Tree
纪录代码位置，快速定位代码

ESLint
代码检查插件，帮助检查和规范代码

Atom One Dark Theme
语法皮肤,美化代码

Auto Close Tag
自动闭合HTML标签

Auto Complete Tag
自动补全HTML标签

Auto Import
自动从外部导入依赖库/文件

🌈 Rainbow Fart Waifu
彩虹屁

• 一个非常有意思的插件，深受广大男程序员喜爱~
• 下载后说不定你会爱上敲代码 O(∩_∩)O哈哈~

background
给编辑区域设置背景图

• 赏心悦目的工作区加上一顿狂夸的彩虹屁
• 相信工作也会事半功倍吧

好啦~这些就是我的vscode安装的一下插件啦，还有一些针对性的snippets一般我们使用的框架，比如 Vue， antd，React，甚至 Flutter 等等，插件市场都有各路大神提供的snippets可用的，可以帮助我们快速生成相关的代码片段。站在巨人的肩膀上，简直太快乐啦！这类的插件大家只用在插件市场搜关键词（Vue…, React…）就可以搜出一堆，可以点进去看看插件简介，下载你需要的那一款，这里就不介绍啦。

【最后最后，再分享一个高逼格的打开vscode的方式】

1.打开vscode, 使用Command + shift + p, 输入shelll

2.选择在PATH中安装”code“命令

3.打开命令行窗口,进入项目所在的目录

4.在命令行输入 code .

————————————————————手动 end——————————————————————
——————————————————————————————————————————————