程式学徒

让每一个人都能学会编程

网页设计学徒03:VS Code专业程式编辑器【视频教学】

2018-04-23 Zack网页设计学徒

VS Code编辑器

工欲善其事,必先利其器。微软推出的VS Code编辑器可以让你更轻松地进行编程。

这是网页设计学徒的第三课。这一课我们会学习使用一个由微软推出的免费专业程式编辑器:VS Code。这个编辑器能够让你的编程事半功倍。

视频链接:

  1. YouKu
  2. BiliBili
  3. YouTube

这一课我们会学习VS Code的使用:

  1. VS Code的下载与安装以及语言设定

    1. Windows: F1 或 Mac:Command + Shift + P,进入指令输入
    2. 输入:Configure Language 或 配置语言
    3. 修改:"locale":"en""locale":"zh-CN"。繁体中文为“zh-TW”。
    4. 重启VS Code。
  2. VS Code输入提示与Emmet快速输入
  3. 更换VS Code主题,于扩展中搜索以下任一主题

    • Material Theme
    • Atom One Dark Theme
    • Dracula Official 安装后,前往Windows:文件/Mac: Code -〉 首选项 -〉 颜色主题,选择刚安装的主题
  4. 安装插件:vscode-icons 、 Chinese Lorem Ipsum 与 Live Server

VS Code下载链接

VS Code编缉器

若你实在不喜欢VS Code,还有两个同样十分受欢迎的专业编辑器,皆可免费使用:

  1. Sublime Text:虽是收费软件,但提供无限期免费试用,只是偶尔会弹出购买提示。其特点是速度非常快。

  2. Atom Text Editor:开源,且由GitHub开发,同样非常强大,只是速度较慢。

下一课我们会用VS Code来编写程式,并介绍一下网页的常见结构。

《网页设计学徒》课程链接:

  1. 网页设计学徒 01:什么是网页?
  2. 网页设计学徒 02:网页的语言、标题和图片
  3. 网页设计学徒 03:VS Code 专业程式编辑器
  4. 网页设计学徒 04:网页由哪些部分构成?
  5. 网页设计学徒 05:用 CSS 美化网页
  6. 网页设计学徒 06:CSS 盒子模型
  7. 网页设计学徒 07:CSS Grid 网页排版 2018
  8. 网页设计学徒 08:媒体查询与响应式网页设计
  9. 网页设计学徒 09:移动优先设计原则
  10. 网页设计学徒10:VS Code整合GitHub
  11. 网页设计学徒11:履历网页实作(1)
  12. 网页设计学徒12:履历网页实作(2)HTML篇
  13. 网页设计学徒13(完结):履历网页实作(3)CSS篇

《网页设计学徒》番外篇:

  1. CSS 中 px、em、rem 有什么分别?
  2. fr 介绍:CSS 网格带来的新单位
  3. CSS 网格(CSS Grid)完整教学
  4. 中文网页字体设定2018篇