开发工具
目前市面上有很多的开发工具
- 记事本 (万能工具)
- Hbuilder:
- 内置插件,打开慢,运行易容卡顿,编辑器中内置浏览器的显示效果
- webstorm:
- 内置了很多插件,很多开发中会用到的插件提前安装好了,对电脑内存要求比较大,配置低电脑,容易卡退
- sublime:
- 轻量级的开发工具,插件需要自己下载,按需下载。后期开发的框架搭建环境稍微麻烦一点。
- Dreamweaver:
- 更新太慢,可以直接拖拽组件使用
- vscode:(推荐)
- 微软发布的一个工具,目前市场上前端最主流的开发工具,不仅可以开发前端,还可以开发java、Python等等。轻量化、需要什么插件在工具中即可下载安装,运行效率比较高,内存消耗不大。插件生态非常好,全球程序员一起来维护插件生态。
官网:https://code.visualstudio.com/Download
安装步骤:一直点击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代码时,语法错误智能提示
vscode常用快捷方式
- Ctrl + C 复制
- Ctrl + X 剪切
- Ctrl + V 粘贴
- Ctrl + S 保存文件
- Ctrl + F 查询
- Ctrl + H 替换
- Ctrl + | 分屏显示
- alt+B 默认浏览器快速解析代码
- Ctrl + N 新建文件
- Ctrl + O 打开文件所在路径
- Ctrl + B 侧边栏显示隐藏
- Ctrl + /- 放大 / 缩小