使用Brackets_html/css_WEB-ITnose

 

Brackets功能还是很强大的。

官网：brackets.io
常见问题解决：https://github.com/adobe/brackets/wiki/Troubleshooting
快捷键：https://github.com/adobe/brackets/wiki/Brackets-Shortcuts

首次打开Brackets

 

首次打开有一个默认页面，右上角的波浪按钮用来预览，被打开的文件出现在左上角的Working Files选项下，Working Files同行右侧还有一个排序按钮，点击左上角Getting Started右侧的下拉按钮可以打开另外的工程，在Getting Started下显示了所有的工程文件，单击工程文件是预览，双击工程文件开始对文件编辑，在右下角可以改变文件的格式，如果文件有语法错误右下角还有一个圆形提示按钮，鼠标放到css文件上的颜色样式还可以预览颜色，如果是图片点击图片可在界面中预览图片以及图片相关信息。

 

汉化

 

dubug菜单→language→simple chinese

 

有关预览页面

 

● 预览页面显示不全

如果出现这种情况，就在chrome中打开：chrome://flags/， 并启用DirectWrite Windows项，启用之后还需重新启动浏览器。

 

● 打开预览页面

除了可以点击右上角的预览按钮，还可以用快捷键ctrl+alt+p

 

● 预览页面，审查某个元素，再此点击Brackets的预览按钮，原先的预览页面就失效了

此时，应该关闭或重新刷新原先的预览页面。

View 菜单项

 

● Increase Font Size，放大字体，快捷键ctrl++
● Decrease Font Size, 缩小字体，快捷键ctrl+-
● Restore Font Size, 恢复字体，快捷键ctrl+0
● Line Numbers
● Word Wrap
● Hightlight Active Line
● Hide Sidebar, 快捷键ctrl+alt+H
● Themes,右上角的Extension Manager可以获取到更多的themes

 

打开菜单项

 

● 快速导航：ctrl+shift+O
● 转到某行：ctrl + G
● 转到定义：ctrl + T
● tab跳转：ctrl + tab 和 ctrl + shift + tab

 

打开工程和文件

 

● 打开工程，即文件夹

→ 方法一：点击当前项目右侧，下拉箭头(快捷键ctrl+alt+R)，点击"Open Folder"
→ 方法二：点击当前项目右侧，下拉箭头(快捷键ctrl+alt+R)，点击选择其他工程,当在不同的工程切换的时候，Working Files会记录下切换前的打开文件
→ 方法三：File菜单下的Open Folder
→ 方法四：把工程文件夹直接拖到软件界面区域

 

● 打开文件

→ 方法一：打开工程中的文件
→ 方法二：右键文件，选择Brackets这种打开方式
→ 方法三：直接把文件拖动到软件界面区域
→ 方法四：File菜单下的Open

 

文件相关

 

● 新建文件:右键左侧面板，New File，或ctrl+N。如果新建一个文件，保存为hello.js,Brackets会自动为我们检测语法错误，右下角的文件类型自动变为JavaScript,
● 重命名：单击文件名进行重命名
● 在资源管理器中打开：右键文件，Show in Explorer
● 快速打开某个文件：ctrl+shift+o
● 在文件中查找关键字：右键文件，Find in
● 在文件中替换：邮件文件，Replace in

 

插件

 

→ 点击右上角的"扩展管理器"
→ 搜索emmet
→ 点击"安装"，安装成功后，关闭"扩展管理器"
→ 在菜单栏上出现"Emmet"菜单项
  
创建一个文件，保存命名为main.html。输入p,按tab键，就自动补全为

。输入div.hello按tab键,就自动补全为

。输入span*4,再输入tab，会出现4对span。

 

常用的插件

 

● Brackets Git：集成Git
● Code Folding:代码折叠，比如折叠js的function
● Beautify:会出现在"编辑"菜单项下
● Emmet:html,css自动补全
● Documents Toolbar:出现横向的tab
● HTMLHint:有关html的错误提示
● Minimap:界面右侧出现缩略导航

 

插件更新

 

当"扩展管理器"出现绿色提示，就说明有安装的插件更新了。

 

Emmet更多的用法

 

● ul>li自动补全为：

 

   
• 
  

 

● ul#item>li*4，自动补全为：

 

   
• 
     
• 
     
• 
     
• 
  

 

● ul.menu>li*4>{Item $}，自动补全为：

   
• Item 1

   
• Item 2

   
• Item 3

   
• Item 4

  

 

● table>tr*4>td+td+td，自动补全为：

 

   
       
       
       
   
   
       
       
       
   
   
       
       
       
   
   
       
       
       
   

 

● p*4>lorem，自动补全为：

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure impedit ducimus culpa quisquam eaque veritatis, reprehenderit quia numquam asperiores cupiditate consectetur eligendi libero corporis quibusdam, porro voluptatem, aperiam repellendus vitae!

Dolorem quis laudantium odit modi excepturi officiis amet atque dolor sint, ut officia illum ratione qui aut magni molestias ipsa error assumenda quae voluptas in vero numquam aspernatur. Veniam, commodi?

Totam quibusdam ipsam, assumenda maxime hic repudiandae ipsa, unde sunt. Necessitatibus reiciendis, doloribus nihil quisquam quasi, non voluptas ipsam ducimus dolor pariatur maiores, cum tempora laboriosam dolorem fugit, officiis aspernatur.

Architecto praesentium harum aspernatur nesciunt deleniti quis repellendus, dignissimos facere tenetur provident iure est quae et voluptas numquam iusto minus ab saepe odio vitae soluta cum enim veritatis. Ea, recusandae.

 

● 在css文件中，m10,自动补全为：

 

margin: 10px;

 

● 在css文件中，m10e,自动补全为：

 

margin: 10em;

 

● 更多在这里：http://docs.emmet.io/

 

主题

 

在"扩展管理器"安装主题，在"视图"菜单下的"主题"中设置。

 

Lint for css

 

→ 点击右上角的"扩展管理器"
→ 搜索csslint
→ 点击"安装"，安装成功后，关闭"扩展管理器"

 

其它快捷键

 

● ctrl+A 全选
● ctrl+S 保存
● ctrl+C 复制
● ctrl+V 粘帖
● // 注释,或快捷键ctrl+/
● 复制行，把鼠标放在行的任意处，ctrl+D
● 复制多个连续字母，拖选要选择的的字母，ctrl+D
● 在文件中查找款关键字：ctrl+F
● ctrl+E, 把光标放在类名或元素上后ctrl+E