web前端开发---弃Hbuilder编辑器到Atom插件推荐,快捷键,快速编辑html 使用
1 ATOM
atom编辑器是Github专门为程序员推出的一个开源跨平台文本编辑器。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页编程语言。它支持宏,自动完成分屏功能,集成了文件管理器。并且是跨平台的,支持Linux,window,mac。
官网地址:https://atom.io/
文档介绍:https://atom.io/docs
或者去此处下载https://download.csdn.net/download/qq_30993595/10606731
2 安装ATOM
Mac
解压下载的zip安装包后, 将解压出的Atom
应用拖到应用目录下
或者通过Homebrew Cask安装
brew cask install atom
Windows
运行安装包安装
Linux
如果是基于Debian的发行版, 执行命令:
sudo dpkg -i atom-amd64.deb
如果是RedHat, 则执行:
rpm -i atom.x86_64.rpm
安装完成后运行Atom, 将会看到这样的界面, 说明我们已经安装成功了
3 快捷键
- 新建界面窗口 Ctrl + Shift + N
- 打开命令模式Ctrl + Shift +P
- 新建文件 Ctrl + N
- 打开文件 Ctrl + O
- 打开文件夹 Ctrl + Shift + O
- 关闭当前编辑文档 Ctrl + W
- 关闭编辑器 Ctrl + Shift + W
- 复制文档路径 Ctrl + Shift + C
- 选择编码格式 Ctrl + Shift +U
- 语法选择 Ctrl + Shift + L
- 跳转到某行 Ctrl + G
- 全屏 F11
- 从缓存器搜索 Ctrl + F
- 高级替换 Ctrl + Shift + F
- 启用注释 Ctrl + /
- 文件跳转面板 Ctrl + T
- 选定一行 Ctrl + L
- 复制光标所在行并自动换行 Ctrl + Shift + D
- 删除一行 Ctrl + Shift + K
- 删除光标处至词尾 Ctrl + Del
- 切换编辑的标签页 Ctrl + Tab
- 选定光标处至文档首行 就是光标处作为分割线,取文档上部分 Ctrl + Shift + Home
- 选定光标处至文档尾行 就是光标处作为分割线,取文档下部分 Ctrl + Shfit + End
4 常用插件安装
当你需要修改文字大小或者主题或其他的操作不来时请用第一个汉化插件所有的问题迎刃而解
① 怎么安装插件
步骤一:打开设置没有汉化也是在同样位置
步骤二:打开安装(同上)
步骤三:输入你所需要的插件名称
②本人必用几个比较---------叼炸天-----------插件
- 强大的汉化插件,将我们常用的菜单栏目汉化---------------- Simplified Chinese Menu
- git 与 GitHub 管理 (具体使用方法还未研究出来大方向如此,希望有会的能告知) ------------------- git-plus
- 敲代码自带抖动 震感 你懂得------------ Activate Power Mode
③ web前端实在的插件
- 美化代码HTML,CSS,JavaScript,PHP,Python,Ruby,Java,C,C ++,C#,Objective-C,CoffeeScript,TypeScript,Coldfusion,SQL等等样式------- atom-beautify
- 使用方法:单价右键选择beautify editor contents 、 或者使用快捷键Alte+Ctrl+B
- 就是用电脑默认浏览器预览我们编辑的文件-------- open in Browser
- 使用方法:单机右键选择Open in Browser、 或者快捷键Ctrl+shift+Q
- 用atom浏览器预览,直接在atom开启一个窗口查看---------- Browser-plus
- 使用方法:单机右键选择或者快捷键alt+ctrl+o
- 颜色选择器,写CSS或者样式表这个真的挺有效果的 ----------- color-picker
- 使用方法:可鼠标单击右键点击拾色器
- 提高HTML/css编写速度-------Emmet
- 它使用仿CSS选择器的语法来生成代码 自带代码提示
④ python 插件
- python代码运行,代码补全 --------- script
- 使用方法命令模式Ctrl + Shift + P 打开命令面板、输入script:run 运行
⑤ file-icons 插件
这是一个文件图标插件,用过AndroidStudio或者PyCharm,或者其它编辑器的童靴,应该注意到每次新建文件的时候,在左边树形目录这个文件名字旁边会对应一个符合文件性质的图标,这个插件就是这个作用,看上面的截图也应该能看出来
⑥ autocomplete-paths
插件这个还是很有必要的,作用就是自动补齐目录,如果自己手写,那你在引用CSS文件或者图片的时候,就得慢慢敲文件路径了,而且还容易出错
⑦ docblockr 插件
这个插件是为了方便注释用的,可以输入/** 然后敲回车,输入ctrl+/ 也可以注释
⑧ linter 插件
基本语法检查插件
⑩ linter-jshint 插件
基于 jshint 的 JavaScript 语法检查插件
⑪ linter-csslint 插件
同上,css语法检查插件
⑫ linter-htmlhint 插件
同上,html语法检查插件
⑬ minimap 插件
用过Sublime或者UItraEdit应该都知道,就是显示在编辑器右边的缩小版代码,也可以设置放在左边
5 快速编辑HTML
①输入id,class,文本等
②快速输入文本内容
③快速生成标签嵌套
④一次生成多个元素及其注意事项
CSS缩写
①css 简写宽高等属性
比如你输入宽度或者高度,可以直接输入w100或者h100,按下TAB键就可以得到
如果不想要以px做单位,而是以百分比,那就用p代替,w10p或者h10p
其它属性也是一样,比如m10或者p10
还有单位缩写如下
- p 表示%
- e 表示 em
- x 表示 ex
- 不写单位表示px
②css 添加字体
输入@f ,然后Tab键,可以快速引用字体
输入@f+,然后Tab键,可以加入更多属性
③css 通过模糊匹配
有时候你不太确定你要输入的缩写,Emmet可以通过模糊匹配找到你想要的
比如输入oh,ovh,ov-h等都可以匹配到overflow: hidden;
④css 渐变效果简写
想要渐变效果,输入lg(left,#fff 50%,#000),表示从左到右 颜色从白到黑渐变
更多Emmet快捷使用可在这里查看https://docs.emmet.io/cheat-sheet/
参考https://blog.csdn.net/qq_30993595/article/details/81712120
①②③④⑤⑥⑦⑧
转载于:https://www.cnblogs.com/520Girl/p/10226830.html
web前端开发---弃Hbuilder编辑器到Atom插件推荐,快捷键,快速编辑html 使用相关推荐
- WEB前端开发准备-Atom编辑器使用说明 Atom常用插件推荐 Atom快捷键
Atom 前言 ATOM node.js 插件 atom-beautify open in Browser Browser-plus color-picker Emmet 快速生成Html 快速生成元 ...
- 给 Web 前端开发人员推荐20款 CSS 编辑器
CSS 和 HTML,JavaScript 是网页的基础,作为前端开发人员,对这三者都要很熟悉.特别是未来流行全栈开发的时代,每项技术都是你知识结构中必要的一个节点. 在开发中,选择好工具是非常重要的 ...
- 超级棒的170+款web前端开发工具汇总,千万要收藏好!
作者:web前端开发 我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您 ...
- 快速入门Web前端开发的正确姿势
入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术栈肯定是需 ...
- web前端好学吗?如何能提高CSS编写技巧 提高Web前端开发效率
前端开发学习每个人都想走捷径,即想高效快速学习又想掌握当今最新的前端技术知识.其实,这样的想法是对的,找对学习方法就能达到这个效果.前端开发学习每个阶段都是非常重要的,一部分为专业知识.另一部分实战经 ...
- 最详细,快速入门Web前端开发的正确姿势
入门标准 入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术 ...
- es6标准入门第3版pdf_最详细,快速入门Web前端开发的正确姿势
入门标准 入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术 ...
- Web前端开发技术栈(前端干货)
Web前端开发技术栈 浏览器 Internet Explorer(需要了解,需不需要看公司业务需求) Chrome(建议学习使用) Firefox(建议学习使用) Safari(建议学习使用) Ope ...
- 快速入门Web前端开发
入门标准 入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术 ...
最新文章
- 重温Thinking in java
- 思科服务器查看生成树协议,CISCO中生成树协议的配置
- html:text中readonly,HTML Input Text readOnly用法及代码示例
- error: ‘::main‘ must return ‘int‘
- Apache CXF实战之六 创建安全的Web Service
- Linux查询端口的任务
- [转]地图的色彩设计——艺术与技术共存
- ssh免密码登陆远程服务器(3种方式)
- MEVN框架基础知识
- Linux之Shell编程详解
- 基于Java毕业设计中国古诗词学习平台源码+系统+mysql+lw文档+部署软件
- vue项目加载OCX控件以及控件的主动事件和回调事件的处理
- 16.子查询之exists型子查询
- 金启孮:普通话其实是满州人的蹩脚汉语
- 万字综述!命名实体识别(NER)的过去和现在
- 第12周前端学习周报
- 【pip】raise MaxRetryError(_pool, url, error or ResponseError(cause))
- ESXI中设置高格作为旁路由并设置双机热备(VRRP)
- python freshman day2
- html5光线传感器,基于一种可以测量光线强度的传感器电路设计
热门文章
- java 32位_Java知识点:创建节约内存的JavaBean
- python算法系列资料集(一)-2022.03.15
- 第49课 大大大(纯小数变整数) 《小学生C++趣味编程》
- 中希尔排序例题代码_十大经典排序算法最强总结
- Git笔记-Connection reset by 13.229.188.59 port 22 fatal: Could not read from remote repository.
- SQL笔记-使用not in在多个没有外键关联的表中查询
- Qt模仿游戏拖装备(换装备)
- 最小生成树(克鲁斯卡尔算法)
- 3dcaptcha php,php实现的Captcha验证码类实例
- 服务器系统架构的评估,系统架构师:性能评估