前言
最近在录视频,分享一些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——————————————————————
——————————————————————————————————————————————