目前市面上有很多的开发工具
-
记事本 (万能工具)
-
Hbuilder:
-
内置插件,打开慢,运行易容卡顿,编辑器中内置浏览器的显示效果
-
-
webstorm:
-
内置了很多插件,很多开发中会用到的插件提前安装好了,对电脑内存要求比较大,配置低电脑,容易卡退
-
-
sublime:
-
轻量级的开发工具,插件需要自己下载,按需下载。后期开发的框架搭建环境稍微麻烦一点。
-
-
Dreamweaver:
-
更新太慢,可以直接拖拽组件使用5t
-
-
vscode:(推荐)
-
微软发布的一个工具,目前市场上前端最主流的开发工具,不仅可以开发前端,还可以开发java、Python等等。轻量化、需要什么插件在工具中即可下载安装,运行效率比较高,内存消耗不大。插件生态非常好,全球程序员一起来维护插件生态。
-
官网:Download Visual Studio Code - Mac, Linux, Windows
安装步骤:一直点击next(下一步)
vscode插件安装
-
chinese
汉化 -
Auto Rename Tag
自动将结尾标签补全 -
HTML CSS Support
在HTML文档中支持CSS的提示 -
HTML snippets
自动生成html代码,专门对html代码格式化比如输入HTML5能够生成一个HTML5文件的标准模板代码。 -
Image preview
能够在编辑代码时查看所使用图片的缩略图。 -
IntelliSense for CSS class names in HTML
可以在HTML代码中智能提示CSS代码中的class 名 -
Live Server
可以将vscode作为一个服务器,让浏览器来访问(可以开启一个服务器,执行我们所写 的前端文件,并且实时更新,也就是说,以后可以无需刷新页面就可以查看效果了) -
open in browser
可以指定浏览器打开网页 -
stylelint
编写CSS代码时,语法错误智能提示 -
Code Runner 终端运行快捷方式
vscode常用快捷方式
-
Ctrl + C 复制
-
Ctrl + X 剪切
-
Ctrl + V 粘贴
-
Ctrl + S 保存文件
-
Ctrl + F 查询
-
Ctrl + H 替换
-
Ctrl + | 分屏显示
-
alt+B 默认浏览器快速解析代码
-
Ctrl + N 新建文件
-
Ctrl + O 打开文件所在路径
-
Ctrl + B 侧边栏显示隐藏
-
Ctrl + /- 放大 / 缩小