工欲善其事,必先利其器
对于我们每一位软件工程师来说,都要有自己顺手的 IDE 开发工具,它就是我们的武器。
一个好用的 IDE 不仅能提升我们的开发效率,还能让我们保持愉悦的心情,这样才是非常 Nice 的状态 ^_^
那么,什么是 IDE 呢 ?
what
- IDE(Integrated Development Environment,
集成开发环境
)是含代码编辑器、关键词高亮、智能感应、智能纠错、格式美化、版本管理等功能于一身的"高级代码编辑器"
- 每个 IT 工程师都要有自己顺手的 IDE,它是我们的武器
- 要理解无论使用什么 IDE 编写出来的代码,本质上都是 "白底黑字" 的,都是 "纯文字" 的
目前,前端开发主流的 IDE 有以下 5 个
IDE 名称 | 公司 | 是否免费 | 功能强大度 |
---|---|---|---|
Visual Studio Code | 微软 | 是 | 强大(推荐) |
Sublime | 个人开发者 | 是(需要注册) | 适中 |
Atom | GitHub | 是 | 适中 |
WebStorm | JetBrains | 否 | 非常强大 |
HBuilder | DCloud | 是 | 非常强大 |
为什么现在不用 Dreamweaver
- Dreamweaver 是曾经网页制作的王牌 IDE,推崇
"所见即所得"
,用拖拽控件的方式进行网页开发 - 但近几年,前端开发技术,形式已经发生了根本性的变化,Dreamweaver 现在不是前端工程师的主流选择了
故事得从 2017 年说起
第一次
关注到微软公司的 VSCode ,还是在 Vue 创始人尤雨溪的社交账号上看到尤大说 "正式转投 VSCode 了" ,从那时起自己也开始慢慢用起来,确实越用越 Nice 了。
事实上目前 VSCode 已经成为了各大厂前端开发人员的首选 IDE 开发工具了
![](https://pic3.zhimg.com/80/v2-823d0a960cdaa59881d942bc938b75b2_1440w.jpg)
![](https://pic4.zhimg.com/80/v2-0624a2c71c9fce4c42ddd00aa292a8b3_1440w.jpg)
![](https://pic4.zhimg.com/80/v2-c1bc83dcb6aa16bb55985ac692ac3dbb_1440w.jpg)
![](https://pic4.zhimg.com/80/v2-2011ce32e64dc571b190f2b435a00e57_1440w.jpg)
上图是 Vue 创始人尤雨溪社交平台截图
下边我们开始玩转 VSCode
正式开始
- Visual Studio Code 简称 VSCode ,2015 年由微软公司发布。
- 可用于 Windows,macOS 和 Linux。它具有对 JavaScript,TypeScript 和 Node.js 的内置支持,并具有丰富的其他语言(例如 C++,C#,Java,Python,PHP,Go)
- 优点:内置功能非常丰富、插件全且安装简单、轻量、有 MAC 版本
![](https://pic2.zhimg.com/80/v2-6864ba30291878fa28373287a5b040bd_1440w.jpg)
VSCode 下载、安装
官网下载
在官方网站:https://code.visualstudio.com/ (opens new window)
下载最新版本的 VSCode 即可
![](https://pic3.zhimg.com/80/v2-a260f44b066948ed0f02541f630fe88e_1440w.jpg)
提示
蓝色按钮会自动识别电脑操作系统,到适合的版本,只需要点击下载即可
Window 版 VScode 安装流程
1、下载 Vscode 安装文件
![](https://pic3.zhimg.com/80/v2-f7827dcda08df4ea17aa6380db440d56_1440w.jpg)
提示
点击上面的下载之后,它会跳转至一个新页面
2、下载完成单击运行,然后我们开始进行安装
![](https://pic1.zhimg.com/80/v2-bb1c3f14c989054909166b5f442c7a50_1440w.jpg)
3、选择安装的位置
安装目录文件所在,可选择、可默认
![](https://pic3.zhimg.com/80/v2-fd91d327a4619e34c3f64c33a71647de_1440w.jpg)
4、选择开始菜单文件夹
你想在哪里放置程序的快捷方式,默认即可
![](https://pic2.zhimg.com/80/v2-66b6f38b29b20d9d5dfb92854f8465a9_1440w.jpg)
5、选择附加任务
提示
- 将以下四项都勾选上,桌面快捷方式需要就添加即可
- 添加到 PATH:添加到系统环境变量中,勾选后,即可在命令行中使用
code .
即可打开 Vscode
![](https://pic2.zhimg.com/80/v2-e1d3f1a04ca80ec512b0de9063bfcea1_1440w.jpg)
6、准备安装
![](https://pic3.zhimg.com/80/v2-788809b2c24f5306c62c8afe43be3b6a_1440w.jpg)
7、正在安装
![](https://pic4.zhimg.com/80/v2-0672fdc67deeab920ce1c926888c3cdb_1440w.jpg)
8、安装完成
![](https://pic3.zhimg.com/80/v2-e5047b373bb60107d4a7ec0a07c4411a_1440w.jpg)
9、安装完成后,第一次打开 VSCode
![](https://pic1.zhimg.com/80/v2-c67ace673714ea6f6c4402bdb48acf94_1440w.jpg)
VSCode 常见插件安装
1、简体中文语言包
插件名称:Chinese 中文(简体)语言包
- 作用:将 VSCode 操作界面转换为中文,对英语不好的朋友,非常友好
![](https://pic2.zhimg.com/80/v2-8c95cd4447b3a9e0b83277d1a8f0601d_1440w.jpg)
安装完成,重启 VScode 即可
![](https://pic3.zhimg.com/80/v2-4b19b5ce6afe5f53dc897fba60757f72_1440w.jpg)
查看中文操作界面
![](https://pic1.zhimg.com/80/v2-b4e6a47f9fc431f3466cf7e48a19ec88_1440w.jpg)
2、编辑器主题选择、设置
建议浅色系对眼睛友好
管理 -> 颜色主题 -> 选择自己喜欢的主题即可
![](https://pic4.zhimg.com/80/v2-43aee8517ea1d6bee523771f657d54bb_1440w.jpg)
提示
- 选择自己喜欢的主题
- Quiet Light
![](https://pic1.zhimg.com/80/v2-0d8168a0efb693cc23d4e50b3a878eb0_1440w.jpg)
查看代码效果
![](https://pic4.zhimg.com/80/v2-2f56ed0d21c58554167ce78a771dbde3_1440w.jpg)
浅色 + (默认浅色)
![](https://pic3.zhimg.com/80/v2-8c245a25e55b30702928da7e573f63a6_1440w.jpg)
![](https://pic1.zhimg.com/80/v2-64743c25136587c770c5a458f6e81c6c_1440w.jpg)
3、vscode-icons 显示代码图标
插件名称:Material Icon
- Theme 作用:显示 Vscode 文件、文件夹的图标
- 在 VScode 扩展插件中搜索 “Material Icon Theme” 即可安装
![](https://pic2.zhimg.com/80/v2-4ef2d577412df953eceb132f4ec374fd_1440w.jpg)
![](https://pic1.zhimg.com/80/v2-fa13ac4cdb370274d059afd27c3d0580_1440w.jpg)
![](https://pic3.zhimg.com/80/v2-74c5177a2821c26415c3bdc60e8ec6c2_1440w.jpg)
4、open in brower 通过编辑器直接打开默认浏览器
插件名称:open in brower
- 作用:该插件可通过编辑器打开默认浏览器显示代码效果
![](https://pic2.zhimg.com/80/v2-7e5c9d4e19c21c90cb8722e67014ef35_1440w.jpg)
![](https://pic1.zhimg.com/80/v2-1b9b5a1968aa9dc43cd18a055fe3d0e4_1440w.jpg)
5、Live Server 开启本地服务器
插件名称:Live Server
- 作用:通过插件可以开启本地服务
- 优点:一边编写代码一边保存,即实时刷新预览,大大提升开发测试效率
![](https://pic2.zhimg.com/80/v2-6f6c357ce15f3b02c5a0f9480d815881_1440w.jpg)
![](https://pic2.zhimg.com/80/v2-0d2798e5124b814b24b52dc05184e375_1440w.jpg)
![](https://pic2.zhimg.com/80/v2-f6d392293e8ee04dc1e7362859169885_1440w.jpg)
6、Auto Rename Tag 自动修改标签对名称
插件名称:Auto Rename Tag
- 作用:修改标签,自动帮你完成头部和尾部闭合标签的同步修改
![](https://pic1.zhimg.com/80/v2-07ee6850dbe3e7aafa4ec5d8b1497684_1440w.jpg)
![](https://pic2.zhimg.com/80/v2-f5ad02cfaca223359912b1ce4504032d_1440w.jpg)
7、carbon-now-sh 将代码生成一张图片
插件名称:carbon-now-sh
- 作用:可提升逼格的插件,在实际开发中遇到技术问题或者做部分代码片段分享,可以使用该插件将代码生成一张图片
- 使用方法:
- 在 VSCode 中,选中需要生成图片的代码
- 打开命令托盘:Windows:Ctrl + Shift + P,Mac:Cmd + Shift + P
- 输入 Carbon,回车
![](https://pic2.zhimg.com/80/v2-c8a9d55c81ac96f20df113fe543b0075_1440w.jpg)
![](https://pic2.zhimg.com/80/v2-454a5d0b4b01e657bc077029b7097cf9_1440w.jpg)
![](https://pic1.zhimg.com/80/v2-3bb666ee0efc375ccc6a285c399411e8_1440w.jpg)
8、prettier 格式化代码
插件名称:prettier
- 作用:格式化美化代码
- Ctrl + s 保存会自动格式化
![](https://pic4.zhimg.com/80/v2-312e8c91591bd8667166a5545bdf4a53_1440w.jpg)
![](https://pic4.zhimg.com/80/v2-e25352e4bb2df9a38c0c965093a16587_1440w.jpg)
相关设置
1、字体设置
管理 -> 设置
- 字体大小: 20
- 字体系列:
JetBrains Mono
![](https://pic3.zhimg.com/80/v2-75627a4adb3ae1bdec0e992d059c25c2_1440w.jpg)
注
在 VSCode 中 "控制字体系列" 添加字体名称 (优先级:从左至右)
同时还要在对应的电脑操作系统中安装字体才能生效
- 在 VSCode 中推荐使用
JetBrains Mono
编程专用字体 - JetBrains 公司最新出了一个字体 JetBrains Mono,据称是
专为改善看代码体验而生
2、 下载字体
TIP
JetBrains Mono 官方下载地址 :https://www.jetbrains.com/lp/mono/(opens new window)
点击Download font
下载
![](https://pic1.zhimg.com/80/v2-fe5b85aaff8e554ed4d85fe8bb11fc2c_1440w.jpg)
3、在电脑中安装字体
安装
- 下载后解压,进到
ttf 文件夹下
,会有一堆文件,全选后安装 - 所有的字体都叫 JetBrains Mono,全选安装的目的是为了响应各种特殊字体(比如斜体、意大利体、粗体、如果不需要这些花里胡哨的只需安装 Regular.ttf)
![](https://pic4.zhimg.com/80/v2-bfa6348b8b29176e3fe9dcbc6fccdaeb_1440w.jpg)
4、 在 VSCode 中启用查看字体
![](https://pic2.zhimg.com/80/v2-aedb0197477dcc8bbd04363579e97905_1440w.jpg)
如需要 Consolas 字体:如下
windows 下 VScode 使用 Consolas 下载地址
https://www.fonts.net.cn/font-33390313417.html(opens new window)
5、光标设置,平滑插入动画
![](https://pic1.zhimg.com/80/v2-4d0b8d83e796a065ec7e52bb82fee0dc_1440w.jpg)
6、关闭代码缩略图,不占用新资源
![](https://pic4.zhimg.com/80/v2-0d8056bbfc81dc20e294f7fc3d2e3977_1440w.jpg)
7、Ctrl + 鼠标滚轮缩放字体大小
如果能用 Ctrl + 鼠标滚轮缩放字号,会非常方便
- 我们需要进行相关的配置,在 管理 -> 设置 -> 搜索:输入 "滚动" 即可看到
![](https://pic1.zhimg.com/80/v2-995f1861bd427e6cc016155c40be823c_1440w.jpg)
VSCode 快捷键
1、Window 版快捷键
常用快捷键
- 注释:
- 单行注释:
ctrl + k ctrl + c 或 ctrl + /
- 取消单行注释:
ctrl + k ctrl + u
(按下 ctrl 不放,再按 k+u) - 多行注释:
alt + shift + A
- 多行注释 :
/**/
- 移动行:
alt + up/down
- 显示/隐藏左侧目录栏
ctrl + b
- 复制当前行:
shift + alt + up/down
- 删除当前行:
shift + ctrl + k
- 控制台终端显示与隐藏:
ctrl + ~
- 查找文件/安装 vscode 插件地址:
ctrl + p
- 代码格式化:
shift + alt + f
- 新建一个窗口:
ctrl + shift + n
- 多行编辑:
Ctrl + Alt + up/down
2、Mac 版快捷键
Mac
Command + X
剪切(未选中文本的情况下,剪切光标所在行)Command + C
复制(未选中文本的情况下,复制光标所在行)Option + Up
向上移动行Option + Down
向下移动行Option + Shift + Up
向上复制行Option + Shift + Down
向下复制行Command + Shift
+ K 删除行Command + Enter
下一行插入Command + Shift + Enter
上一行插入Command + Shift + \
跳转到匹配的括号Command + [
减少缩进Command + 1
增加缩进Home
跳转至行首End
跳转到行尾
作为优秀的开发者,熟练的用好快捷键也是非常重要的技能之一
Emmet 语法
TIP
- 作为大厂资深的前端工程师们,都会熟练的使用 Emmet 语法
- 在实际开发中可以大大的提升开发效率
- Emmet 官方文档:https://docs.emmet.io/cheat-sheet/(opens new window)
![](https://pic2.zhimg.com/80/v2-25aa4afcca6159049c0b5e138cf0c029_1440w.jpg)
上述内容源自于:arry老师的博客-艾编程,用代码将梦想照进现实。arry老师的博客-艾编程www.arryblog.com/
![](https://pic2.zhimg.com/v2-87e4611aa85e57523f864bee1fb96871_180x120.jpg)