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 組のスパンが表示されます。

よく使用されるプラグイン

● ブラケット Git: 統合された Git
● コードの折りたたみ: js 関数の折りたたみなどのコードの折りたたみ
● 美化: 「編集」メニュー項目の下に表示されます
● Emmet: html 、css オートコンプリート
● ドキュメント ツールバー: 水平タブが表示されます
● HTML ヒント: html に関するエラー プロンプト
● ミニマップ: インターフェイスの右側にサムネイル ナビゲーションが表示されます

プラグインの更新

Extension Manager」という緑色のプロンプトが表示されます。これは、インストールされているプラ​​グインが更新されたことを意味します。

Emmet のその他の使用法

● ul>li は次のように自動的に完成します:

● ul#item>li*4、オートコンプリートは次のとおりです:

< ; li>


• 項目 1


• 項目 2
• gt;項目 3
• 項目 4< & lt;td>
  ;/td>

  gt ;

  ;

  ;/ td>
  < td>
  ;
  < ;/tr> ;
  
  
  

  ● p*4>lorem、オートコンプリートは次のとおりです:

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.です、非難します体を自由に動かし、人生を生き抜くためには、ヴェニアム、商品の誤謬はありませんか?

  
  
  ● CSS ファイルの m10 では、オートコンプリートは次のようになります:
  
  
  
  margin: 10px;
  
  
  
  ● CSS ファイルでは、m10e、オートコンプリート すべて:
  
  
  
  margin: 10em;
  
  
  
  ● 詳細はこちら: http://docs.emmet.io/
  
  
  

  Theme
  の「拡張機能マネージャー」の「表示」メニューの「テーマ」でテーマを設定します。

  
  CSS 用の lint
  
  

  →右上隅の「拡張機能マネージャー」をクリック
  →csslintを検索
  →「インストール」をクリックし、インストールが成功したら「拡張機能マネージャー」を閉じます

  その他のショートカットキー

  ● ctrl+Aですべて選択
  ● ctrl+S 保存
  ● ctrl+C コピー
  ● ctrl+V 貼り付け
  ● // コメント、またはショートカット キー ctrl+/
  ● 行をコピーし、行内の任意の場所にマウスを置き、ctrl+D
  ● さらにコピー連続した文字、ドラッグして選択したい文字を選択、ctrl+D
  ● ファイル内のキーワードを検索: ctrl+F
  ● ctrl+E、クラス名または要素にカーソルを置き、ctrl+E