4. 开发环境的准备 {ignore}

[toc]

1. 显示文件扩展名

大部分文件，它的文件名：名称.扩展名(后缀名)

扩展名决定了文件默认会被什么应用程序打开。

实际上扩展名为 .jpg 的图片文件，你也可以右键该文件，然后选择用浏览器打开（或者用其他的应用程序打开），只不过打开后能否正常的展示文件内容，这就无法确定了。

2. 安装浏览器

  • IE
  • Opera
  • Firefox
  • Chrome【推荐】
  • Safari

推荐使用 chrome 浏览器，并将chrome设置为默认浏览器。

3. 安装编辑器

  • windows记事本
  • Sublime
  • ATom
  • Dreamweaver
  • VSCode【推荐】

4. VSCode 推荐插件

  1. Auto Rename Tag 【标签名自动补全】
  2. background 【自定义背景图】
  3. Chinese (Simplified) Language 【汉化】
  4. CSS Formatter 【CSS代码格式化】
  5. HTML CSS Support 【CSS自动补全】
  6. Live Serve 【模拟以服务器的方式打开页面（在本地临时搭建服务器）】
  7. open in browser 【在浏览器中查看】
  8. Path Intellisense 【路径自动补全】
  9. vscode-icons 【美化图标】
  10. Markdown Preview Enhanced 【编辑 markdown 必备】
  11. Markdown All in One 【编辑 markdown 必备】
  1. 注：袁老师的教学视频中，按 Ctrl + Alt + V 可以直接复制图片到markdown笔记中，不过实际操作中，不能实现。可以安装一个插件 “paste image” 即可实现。

4. 开发环境准备 - 图1

补充

  • 如何配置显示的语言？

快捷键：Ctrl + Shift + P

输入：configure display language

选择：en -> 英文；zh-cn -> 中文。

4. 开发环境准备 - 图2

  • 活动栏显示设置

将鼠标移动至最左侧，右键，将想要在活动栏显示的内容勾选上即可。

4. 开发环境准备 - 图3

记录一下在录制视频时，袁老安装的其他插件：

  • Beautify
  • EJS language support
  • Git History
  • HTML Snippets
  • Jest
  • minapp
  • Paste Image
  • Reactjs code snippets
  • TSLint
  • Vetur
  • Vetur-wepy
  • Vue VSCode Snippets
  • XML Format

后面学习，也许会用到这些插件。

小结

本节主要都是一些实操。