使用Brackets

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键,就自动补全为<p></p>。输入div.hello按tab键,就自动补全为<div class="hello"></div>。输入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>
    <li></li>
</ul>

● ul#item>li*4,自动补全为:

<ul id="item">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

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

<ul class="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

● table>tr*4>td+td+td,自动补全为:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

● p*4>lorem,自动补全为:

<p>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!</p>
<p>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?</p>
<p>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.</p>
<p>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.</p>

● 在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

时间: 2024-10-25 14:32:11

使用Brackets的相关文章

CF149D. Coloring Brackets[区间DP !]

不知道为什么居中了,先把代码放这 #include<iostream> #include<cstdio> #include<algorithm> #include<cstring> using namespace std; const int N=705,MOD=1e9+7; char s[N]; long long n,f[N][N][5][5]; int st[N],top=0,m[N]; void match(){ for(int i=1;i<=

POJ 2955 Brackets (动规)

Brackets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2999   Accepted: 1536 Description We give the following inductive definition of a "regular brackets" sequence: the empty sequence is a regular brackets sequence, if s is a reg

Codeforces 552E Vanya and Brackets(贪心 + 表达式计算)

题目链接 Vanya and Brackets 题目大意是给出一个只由1-9的数.乘号和加号组成的表达式,若要在这个表达式中加上一对括号,求加上括号的表达式的最大值. 我们发现,左括号的位置肯定是最左端或者某个乘号右边,右括号的位置肯定是最右段或者某个乘号左边. 而乘号最多只有15个,那么暴力枚举就可以了. #include <bits/stdc++.h> using namespace std; #define rep(i, a, b) for (int i(a); i <= (b);

POJ 2955 Brackets

Brackets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6622   Accepted: 3558 Description We give the following inductive definition of a “regular brackets” sequence: the empty sequence is a regular brackets sequence, if s is a regular

前端开发利器-Brackets IDE

是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器, 最懂得web设计. With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. 专注可视化工具

POJ1141 Brackets Sequence

Description Let us define a regular brackets sequence in the following way: 1. Empty sequence is a regular sequence. 2. If S is a regular sequence, then (S) and [S] are both regular sequences. 3. If A and B are regular sequences, then AB is a regular

codeforces 552 E Vanya and Brackets

题意是这样,给出一个运算符只有+跟*,数字都在1到9之间的算式,要你加入一对括号,使得算式的结果尽可能的大,保证最多十五个乘号. 很显然,若要让加入的括号能够影响原本运算的结果,必然是要影响乘法,那么加入的这对括号中必然至少有一个跟乘号是相邻的,恰好乘号的数目很小,那么直接枚举括号的位置即可,每次算出当前解更新ans即可. #include<map> #include<string> #include<cstring> #include<cstdio> #i

Winter-2-STL-B Brackets 解题报告及测试数据

Time Limit:2000MS     Memory Limit:65536KB Description Given a string consisting of brackets of two types find its longest substring that is a regular brackets sequence. Input There are mutiple cases in the input file. Each case contains a string con

我使用的brackets插件

livereload atom dark theme autoprefixer auto save files on window blur beautify brackets file icons brackets sass emmet extensions rating interactive linter javascript globals jslint markdown preview match highlighter monokai dark soda rust for brack

Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows.Linux 以及 OS X 平台. Brackets 的特点是简约.优雅.快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等.和 Sublime Text.Everedit 等通用代码编辑器