学习前端开发需要进行的操作

程序员浩浩
100 阅读2分钟

前端开发软件

  • DreamWare
  • Sublime
  • WebStrom
  • HBuilderX
  • VSCode

VSCode是微软曾经的一个web项目，后来瞄准了Github团队推出Atom编辑器时，开发的一个框架Electorn。

1. 安装VSCode

1.1 下载地址

code.visualstudio.com/ 官方地址 官方地址下载太慢，我们可以使用国内的下载位置
建议使用

1.2 搜索VSCode

image.png

1.3. 安装VSCode

下载完成后，我们会得到安装文件。
image.png
双击安装程序进行安装
image.png
这一步很重要！！！！！！一定要把所有的选项都选中
image.png
选中后，未来我们可以直接通过右键打开我们的vscode和对应的文件。
image.png

2. 配置VSCode

2.1. 插件

安装插件的过程非常简单
image.png
在我们的VSCode中选中左侧的最后一个图标image.png，点击之后就可以搜索插件并且安装了
image.png
点击右侧安装即可安装。

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 汉化插件

一般情况下，我们第一次打开VSCode，就会提示安装汉化插件，在右下角，点击安装即可
image.png
安装完成后就会变成中文的界面。
image.png

Open In Default Browser 在默认浏览器中打开页面

image.png
装第一个

Auto Rename Tag 自动修改标签名

image.png

Path Intellisense 路径提示

image.png

2.2. 设置

单击文件 -> 首选项 -> 设置，打开设置界面
image.png

修改文字大小

找到Font Size 修改大小可以设置文字的大小
image.png

修改缩进

建议修改为 2
image.png

Emmet设置

在设置中搜索emmetimage.png
找到搜索结果中的倒数第二个
image.png
勾选上。

3. 常见用法

3.1. 新建文件

在VSCode中创建文件。
image.png
点击对应的图标，可以新建文件
image.png
在打开的输入框中，输入文件名

3.2. 快捷键

  • 复制 Ctrl + C
  • 剪切 Ctrl + X

未来如果我们想要删除某一行，我们只需要把光标放到某一行上，直接剪切就可以删除对应的内容。
复制时也可以实现对应的效果，光标在哪一行，就可以直接复制一整行

  • 粘贴 Ctrl +V
  • 撤回 Ctrl + Z
  • 取消撤回 Ctrl + Y
  • 保存 Ctrl + S 可以保存文件

在我们编辑文件的时候，没有保存是一件很可怕的事情
image.png
没有保存的文件，是一个实心圆，保存过的文件，没有这个圆
如果我们忘记了保存文件，建议大家开启自动保存。更建议养成习惯，随手Ctrl + S

  • 软换行 Alt + Z

如果单行文本过长，会出现横向滚动条，横向滚动条不利于我们编写内容，所以我们可以使用软换行。

avatar
文章
阅读
粉丝