# Hello World

致力于将编程和艺术相结合,以直观、生动、有趣的方式呈现枯燥的编程概念和原理。

# IDE

IDE (Integrated Development Environment,集成开发环境)是含代码编辑、关键词高亮、智能感应、智能纠错、格式美化、版本管理等功能于一身的“高级代码编辑器

每个IT工程师都要有自己趁手的IDE,它是我们的武器

但是要知道无论使用什么IDE编写出来的代码,本质上都是底黑字”的,都是“纯文字”的

前端最常用的 IDE 有 Webstorm (opens new window)Sublime (opens new window)Atom (opens new window)VSCode (opens new window)HBuider (opens new window) 我们可以分别去它们的官网看一下。

image-20201229205522651

Webstorm 是最强大的收费编辑器,因为它拥有各种强大的插件和功能.

Sublime 同样非常好用,第一它免费,第二它轻量、高效,第三它插件非常多。

Atom 是 GitHub 出品的编辑器,免费并且插件丰富,而且跟 Sublime 相比风格上还有些小清新。

VSCode 是我日常使用编辑器 微软出品的轻量级(相对于 Visual Studio 来说)编辑器

  • 如果你要走大牛、大咖、逼格的路线,就用 Webstorm
  • 如果你走普通、屌丝、低调路线,就用 Sublime
  • 如果你走小清新、个性路线,就用 VSCode 或者 Atom
  • 如果你面试,最好有一个用的熟悉,其他都会一点

WARNING

最后注意:千万不要说你使用 Dreamweaver 或者 notepad++ 写前端代码,会被人鄙视的。

如果你不做 .NET 也不要用 Visual Studio ,不做 Java 也不要用 Eclipse。

Dreamweaver是曾经网页制作的王牌IDE,推崇“所见即所得”,用拖拽控件的方式进行网页开发。

但是近几年,前端开发技术、形式已经发生了根本性的变化, Dreamweaver现在不是前端开发工程师的主流选择了。

# Visual Studio Code简介

Visual Studio Code简称VS Code,来自微软公司

image-20201229212321868

优点:内置功能非常丰富、插件全且安装简单、轻量、有MAC版本

# VSCode颜色主题

  • vs code提供了不同风格的颜色主题
  • 在文件→首选项→颜色主题中,将主题改为Light+ (default light)

# ctrl +鼠标滚轮缩放字号

  • 如果能用ctrl+鼠标滚轮缩放字号,会非常方便
  • 我们需要进行相关的配置,打开配置中心,搜索“滚动”即可

image-20201229212710815

# vscode常用插件

chinese 汉化插件

open in browser 右键打开浏览器

Live Server 开启自动刷新功能

Prettier 代码格式化 让代码的展示更加美观

vscode-icons 根据文件的后缀名来显示不同的图标

Bracket Pair Colorizer 2 以不同颜色显示成对的括号,并用连线标注括号范围。简称彩虹括号

CSS Peak 在HTML通过对应标签的名字快速跳转到对应的CSS

Image preview 图片预览

# 快捷键

image-20201229212742850

ctrl+c 复制

ctrl+V 粘贴

ctrl+s 保存

ctrl+x剪切 也可以用于删除整行

ctrl+z 返回上一步

ctrl+y 撤销返回上一步

ctrl + f 查询/替换内容

Sublime快捷键扩展

  • Sublime是另外一个非常著名的编辑器,Sublime中的快捷键非常的经典,而VS Code可以集成Sublime的快捷键
  • 需要安装插件,在插件中心搜索Sublime,安装插件即可

image-20201229212909821

image-20201229212930396

# 跳转操作

Cmd +Pagedown/Pageup 在已经打开的多个文件之间进行 非常实用

Ctrl + Tab 在已经打开的多个文件之间进行

# 移动光标

方向键 在单个字符之间移动光标 地球人都知道

Alt+鼠标点击任意位 在任意位置,同时出现光标

Ctrl + D 将全文中相同的词逐一加入选择

# 工作区快捷键

Cmd +B 显示/隐藏侧边栏 很实用

Ctrl + \ 创建多个编辑器

Cmd + Shift+N 重新开一个软件的窗口

Ctrl + W 关闭当前文件

# 其他快捷键

shift + alt + f 代码格式化快捷键

shift + alt + ↓ 向下复制一份 : 选中要复制的内容

# 鼠标操作

在当前行的位置,鼠标三击,可以选中当前行。

用鼠标单击文件的行号,可以选中当前行。

# markdown文件

下载并安装 Typora 进行编写查看 .md 文件