前端入门—开发工具篇

1.工具介绍

前端开发其对工具得要求很低,甚至于用TXT文档记事本都可以书写前端代码,但是一个好的代码工具不禁能帮助我们快速搭建代码框架,还能提升代码量,让我们在事半功倍,当然市面上得开发工具也是千变万化本篇就简单介绍几种。

介绍几款常见代码编写工具

  • HBuilder
    HBuilder是专为前端打造的开发工具,具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。

前端入门—开发工具篇_第1张图片

  • Sublime Text

    Sublime Text是一个代码编辑器也是HTML和散文先进的文本编辑器。漂亮的用户界面和非凡的功能,例如迷你地图,多选择,Python的插件,代码段,等等。完全可自定义键绑定,菜单和工具栏。Sublime Text的主要功能包括:拼写检查,书签,完整的Python API,Goto功能,即时项目切换,多选择,多窗口等等。
    IT技术传播

  • Dreamweaver

dreamweaver是个由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口,亦有HTML编辑的功能。
前端入门—开发工具篇_第2张图片

  • Visual Studio Code

Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器,软件功能非常强大,界面简洁明晰、操作方便快捷,设计得很人性化。软件主要改进了文档视图,完善了对 Markdown的支持,新增PHP语法高亮。
前端入门—开发工具篇_第3张图片

2.工具推荐及插件安装

这里推荐得是Visual Studio Code,也是小鱼常用得工具之一,下面简单列举一下该工具得特点。

  • 开源,免费

  • 自定义配置

  • 集成GIT

  • 智能提示

  • 支持各种文件格式

  • html/jade/css/js/less/sass/xml

  • 调试功能

  • 各种快捷键

  • 插件扩展

简单介绍一下常用插件
1.首先在官网下载Visual Studio Code官网地址:Visual Studio Code官网,然后安装打开

2.第一步先安装汉化插件(呃呃呃,你猜为什么这是第一步 〒▽〒)打开软件后找到红框位置,开始下载插件。
前端入门—开发工具篇_第4张图片
3.第二步在搜索框内输入 Chinese 回车,点击红框位置安装即可,(安装过后重启工具就能实现汉化啦)
前端入门—开发工具篇_第5张图片
4.第三步安装 LiveServer 可以实时预览页面,十分方便(使用时必须在文件夹打开)
前端入门—开发工具篇_第6张图片
5.第四步安装 HTML Snippets (HTML代码提示) 及HTML CSS Support (CSS代码提示)代码提示工具(我非常喜欢♪(*))
前端入门—开发工具篇_第7张图片
前端入门—开发工具篇_第8张图片
6.第五步安装 Auto Rename Tag(自动完成另一侧标签的同步修改)及Auto Close Tag (自动闭合HTML/XML标签)
前端入门—开发工具篇_第9张图片
前端入门—开发工具篇_第10张图片
7.第六步安装 open (默认浏览器打开) 及 open in browser (选择浏览器打开)
前端入门—开发工具篇_第11张图片
前端入门—开发工具篇_第12张图片
前端入门—开发工具篇_第13张图片
前端入门—开发工具篇_第14张图片
介绍一些常用快捷键

  • Ctrl+N 新建文件

  • Ctrl+Shift+N 新建窗口

  • Ctrl+O 打开文件

  • Ctrl+T 打开最近的文件

  • Ctrl+Z 撤销
    +Ctrl+Y 恢复

  • Ctrl+X 剪切

  • Ctrl+C 复制

  • Ctrl+V 粘贴

  • Ctrl+F 查找

  • Ctrl+H 替换

  • Ctrl+Shift+F 在文件中查找

  • Ctrl+Shift+H 在文件中替换

  • Ctrl+/ 切换行注释

  • Alt+Shift+A 切换块注释

  • Ctrl+A 全选

  • Atl+Shift+↑(up)向上复制一行

  • Atl+Shift+↓(down) 向下复制一行

  • Atl+↑(up) 向上移动一行

  • Atl+↓(down) 向下移动一行

  • Atl+Ctrl+↑(up) 在上面添加光标

  • Atl+Ctrl+↓(down) 在下面添加光标

  • Ctrl+D 添加下一个匹配

  • Ctrl+Shift+L 选择所有匹配项

  • Ctrl+Shift+L 选择所有匹配项

  • Ctrl+Shift+U 输出

  • Ctrl+Shift+M 问题

  • Ctrl+Shift+Y 调试控制台

  • Ctrl+J 切换面板

  • Ctrl+B 切换侧边栏

  • Alt+Z 切换自动换行

  • Ctrl++(=) 放大

  • Ctrl±(-) 缩小

3.经历这么多最重要的一步创建页面

请按照步骤一步一步来。
前端入门—开发工具篇_第15张图片
前端入门—开发工具篇_第16张图片
前端入门—开发工具篇_第17张图片
前端入门—开发工具篇_第18张图片
前端入门—开发工具篇_第19张图片
到这里你就完整的写出了你的第一页面,向着代码的世界发出属于你的声音,恭喜恭喜!!

结尾小留言:
本人是一个小小的博主,同时也是一个前端从业人员,致力于技术分享·生活分享·专业知识等,这是我第一次做分享博客和微信公众号,多有不足,文章表明原创的是百分之白原创,未标明得包含引用部分,请各位大佬多多指点!!!!
前端入门—开发工具篇_第20张图片

你可能感兴趣的:(前端,css,html,node.js,vue.js)