ホームページ  >  記事  >  ウェブフロントエンド  >  フロントエンド技術開発およびデバッグツール_html/css_WEB-ITnose

フロントエンド技術開発およびデバッグツール_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:46:20890ブラウズ

ページ制作用の開発ツールとデバッグツール (1)

開発ツールの紹介

開発ツールは、一般的にテキストエディタと統合開発環境(IDE)の2種類に分けられます

よく使われるテキストエディタ: Sublime Text 、Notepad++、EditPlus など

よく使用される IDE: WebStorm、Intellij IDEA、Eclipce など

ここでは主に、フロントエンド開発ツールのニーズを基本的に満たす Sublime Text エディターの使用方法を紹介します。

1. Sublime Text の特徴:

クロスプラットフォーム、高速起動

複数行選択

様々な実用的なプラグイン

スニペット

VIM互換モードをサポート

Sublime Text 取得アドレス: http://www.sublimetext.com/

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

Package Control: 他のプラグインをインストールする前に、まず Package Control をインストールしてください

要素: Web開発者ツールキット、HTML と CSS のワークフローを大幅に改善できます

SublimeCodeIntel: コードのヒント

DocBlocker: コメント js コード

JSFormat: js コードのフォーマット

ターミナル: m コマンド

2.1 パッケージ制御

他のプラグインをインストールする前に、まず Package Control をインストールします。 具体的な手順は次のとおりです:

Ctrl+` ショートカット キーを使用するか、[表示] -> [コンソールの表示] メニューからコマンド ラインを開き、

Sublime text3 貼り付けます。次のコード:

import urllib.request,os; pf = 'PackageControl.sublime-package'; ipp = sublime.installed_packages_path();urllib.request.install_opener( urllib.request.build_opener(urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf),'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace('','%20')).read())

Sublime text2 次のコードを貼り付けます:

import urllib2,os; pf='PackageControl.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs(ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf),'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( '','%20' )).read()); print( 'Please restart Sublime Text to finishinstallation')

すべてがうまくいけば、[環境設定] メニューに [パッケージ設定] メニューと [パッケージ コントロール] メニューが表示されます。

さまざまな理由により、コードを使用してインストールできない場合があります。その場合は、次の手順でパッケージ コントロールを手動でインストールできます:

a.パッケージ コントロールのダウンロード アドレス:
b. [設定] >[パッケージの参照] メニューをクリックします
c. に入る ディレクトリの上位ディレクトリを開き、Installed Packages/ ディレクトリに入ります
d.Package Control.sublime-package をダウンロードし、Installed Packages/ ディレクトリにコピーします
e.SublimeText を再起動します。

2.2 Emment

Emment は、HTML と CSS のワークフローを大幅に改善できる Web 開発者用のツールキットです。

基本的に、ほとんどのテキスト エディタでは、「スニペット」と呼ばれるコードのチャンクを保存して再利用できます。スニペットは生産性を向上させるのに最適ですが、ほとんどの実装には最初にコード スニペットを定義する必要があり、実行時にコード スニペットを拡張できないという欠点があります。 Emmet はフラグメントの概念を新しいレベルに引き上げます。動的に解析できる CSS 形式で式を設定し、入力した略語に基づいて対応するコンテンツを取得できます。 Emmet は成熟しており、HTML/XML および CSS コードを作成するフロントエンド開発者に適していますが、プログラミング言語にも使用できます。

2.2.1 Emment のインストール

a、 ショートカット キーの組み合わせ ctrl+shift+P を使用してコマンド パネルを呼び出します
b、 パネルに「install package」と入力して Enter キーを押します
c、次に「 Emment」と入力し、インストールが完了するまで待ちます。

2.2.2 Emment の使用 1) HTML の初期化

「!」または「html:5」を入力して Tab キーを押します:

html:5 または !: HTML5 ドキュメントタイプ
html:xt : XHTML の移行ドキュメント タイプに使用されます
html:4s: HTML4 厳密なドキュメント タイプに使用されます

2) head タグ内の操作

外部スタイル シートの導入: link:css+tab

<link rel="stylesheet" href="style.css">

内部スタイル シートの導入:style+tab

<style></style>

外部jsファイルを導入: script:src+tab

<script src=""></script>

内部jsファイルを導入: script+tab

<script></script>

ウェブサイトアイコンを追加: link:favicon +タブ

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

文字エンコーディングを設定します: meta:utf+tab

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

互換性モードを設定します meta:compat+tab

<meta http-equiv="X-UA-Compatible" content="IE=7">

次のようなデモ:

3) 本文コンテンツの編集

●タグ: タグ名(+tab)

●id: タグ名#+クラス名(+tab)、その後に複数のクラスを続けることも可能

クラス: タグ名.+id name (+tab) の後に続く ID は 1 つだけです

.item のみを入力すると、Emmet は親タグ (通常は div ) に基づいて判断します。たとえば、ff6d136ddc5fdfeffaf53ff6ee95f185 に .item と入力すると、9604d36f5470805d630707577fa3eb63bed06894275b65c1ab86501b08a632eb が生成されます。

すべての暗黙のタグ名は次のとおりです:

li:用于ul和ol中
tr:用于table、tbody、thead和tfoot中
td:用于tr中
option:用于select和optgroup中

●标签的内容:标签名{内容}

标签内的属性:标签名[属性名=属性值],如:a[href=www.baidu.com]

补充:

表单method属性

form:post(get)

input属性添加缩写(部分)

input->inp
input:hidden->input:h
input:text->input:t
input:password->input:p
input:checkbox->input:c
input:radio->input:r
input:submit->input:s
input:button->input:b

●嵌套

>:子元素符号,表示嵌套的元素
+:同级标签符号
^:可以使该符号前的标签提升一行

●分组()
可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码:

●定义多个元素*
要定义多个元素,可以使用*符号。比如,ul>li*3可以生成如下代码

●计数器 $
在我们做”轮播“时,给元素的命名(id或者class),都会有一个计数位,这个时候,我们就可以使用 $ 它来实现了,如下:

可以合理组合各种操作来写出复杂样式的代码块。

2.2.3 CSS缩写 1).  值

比如要定义元素的宽度,只需输入w100,即可生成

width: 100px;


除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下

height: 10%;  margin: 5em;

单位别名列表p 表示%、e 表示 em、x 表示 ex

2).  附加属性

@f+

3).  模糊匹配

如果有些缩写你拿不准,Emmet会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:

overflow: hidden;

4).  供应商前缀

如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入trf,则会生成:

-webkit-transform: ;  -moz-transform: ;  -ms-transform: ;  -o-transform: ;  transform: ;

如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:

前缀缩写如下: w 表示 -webkit-、m 表示 -moz-、 s 表示 -ms-、o 表示 -o-

5).  渐变

输入lg(left, #fff 50%, #000),会生成如下代码:

background-image: -webkit-linear-gradient(left, #fff 50%, #000);background-image: -o-linear-gradient(left, #fff 50%, #000);background-image: linear-gradient(to right, #fff 50%, #000);

2.3、常用的快捷键 1)、命令板(Ctrl+Shift+p)

常用,新建文件时(为对文件进行保存),设置文件的语境:按Ctrl+Shift+p调出命令板,键入sshtml设置html语境sshtml,键入sscss设置css语境,键入ssjs设置js语境,这样进行所在语境的代码高亮和提示。

2)、查找(Ctrl+p)

: 查找行数,如::300,查找300行

@  定位js里的函数、css里的选择器,如:@show,定位js文件中的show方法

# 查找关键字,如:#this,查找this

3)、将光标移动到img或background-image标签上,按下ctrl+u,Emmet会自动读取图片的尺寸并添加。 4)、多行选择

选中一个关键字,按Ctrl+d,可以选择多个相同的关键字(每按一次,增加一个),如下:

5)、编辑点快捷键分别为ctrl+alt+left、ctrl+alt+right。 6)、快速的移除多余的匹配的开始标签与闭合标签,快捷键:ctrl+k。

在一些大型的HTML代码中,有时标签嵌套的太多,通过Emmet移除标签这一功能。

7)、数字递增/递减,可以以0.1、1和10三个值进行递增/递减

快捷键分别是:alt+up/down、ctrl+up/down、和alt+shift+up/down

8)、上下移动移动代码位置,ctrl+shift+alt+up/down 9)、数学计算表达式

有了Emmet在HTML和CSS文件中都可以进行简单的数字运算,神奇了,输入4*8再按ctrl+shift+y,Emmet能给出最终的结果。

2.4 DocBlocker

安装

a、通过快捷键组合ctrl+shift+P唤出命令面板
b、在面板中输入“install package”后回车
c、接着输入“DocBlocker”,等待安装完成

使用

在要注释函数的上方,按‘/**’+tab键对代码进行注释。

2.5 SublimeCodeIntel

SublimeCodeIntel是一个非常强大的代码提示插件。

a、通过快捷键组合ctrl+shift+P唤出命令面板
b、在面板中输入“install package”后回车
c、接着输入“SublimeCodeIntel”,等待安装完成。

2.6 JSFormat

安装

a、首先通过以下路径打开用户按键绑定文件:
     Preferences → Key Bindings ? User
b、然后在其中添加以下代码(如果你有需要的话,其中的快捷键组合是可以自己定义的):
    {"keys": ["ctrl+shift+r"], "command": "reindent" , "args": {"single_line": false}}

c、安装JSFormat
    ●通过快捷键组合ctrl+shift+P唤出命令面板
    ●在面板中输入“install package”后回车
    ●接着输入“format”(即格式化的意思),在弹出的列表中找到对应你所想要进行格式化操作的语言,这里我们是对js格式化,选择JSFormat,等待安装完成。

使用

选中没有格式化的代码,按‘Ctrl+Shift+r’对代码进行格式化。

2.7 Terminal

安装

a、通过快捷键组合ctrl+shift+P唤出命令面板
b、在面板中输入“install package”后回车
c、接着输入“Terminal”,等待安装完成。

使用

任意处按esc键进入vim命令状态,可以使用vim命令。退出,按a。

三、snippet

Snippet 是插入到文本中的智能模板并使这段文本适当当前代码环境。程序员总是会不断的重写一些简单的代码片段,这种工作乏味无聊,而Snippet的出现会让Code更加高效。

Snippet可以存储在任何的文件夹中,Snippet文件是以.sublime-snippet为扩展的XML文件,可以命名为XXX.sublime-snippet,创建自己的snippet的方式为菜单栏Tools->New Snippet

3.1 新建的文件如下:

<snippet>    <content><![CDATA[Hello, ${1:this} is a ${2:snippet}.]]></content>    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->    <!-- <tabTrigger>hello</tabTrigger> -->    <!-- Optional: Set a scope to limit where the snippet will trigger -->    <!-- <scope>source.python</scope> --></snippet>

为了方便理解简化以上代码:

<snippet>    <content><![CDATA[Type your snippet here]]></content>    <!-- Optional: Tab trigger to activate the snippet -->    <tabTrigger>hello</tabTrigger>    <!-- Optional: Scope the tab trigger will be active in -->    <scope>source.python</scope>    <!-- Optional: Description to show in the menu -->    <description>My Fancy Snippet</description></snippet>

简要介绍一下snippet四个组成部分:

content:其中必须包含2963dcafef8686bc91e578183ecdbb7f,否则无法工作, Type your snippet here用来写你自己的代码片段
tabTrigger:用来引发代码片段的字符或者字符串, 比如在以上例子上, 在编辑窗口输入hello然后按下tab就会在编辑器输出Type your snippet here这段代码片段
scope: 表示你的代码片段会在那种语言环境下激活, 比如上面代码定义了source.python, 意思是这段代码片段会在python语言环境下激活.
description :展示代码片段的描述, 如果不写的话, 默认使用代码片段的文件名作为描述

常用的scope(语言类source,标签类text):

HTML: text.html
CSS: source.css
Javascript: source.js
JSON: source.json
SASS: source.sass
XML: text.xml
Markdown: text.html.markdown
Ruby: source.ruby
PHP: source.php
Latex: text.tex.latex

Java: source.java

JSP: text.html.jsp

3.2 修改新建的文件如下:

<snippet>    <content><![CDATA[<div>hello world!</div>]]></content>    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->    <tabTrigger>hello</tabTrigger>    <!-- Optional: Set a scope to limit where the snippet will trigger -->    <scope>text.html</scope></snippet>

3.3 在html里输入hello,按回车,显示如下:

<div>hello world!</div>

四、 [F5] Web开发免刷新(保存即刷新)

[F5]是支持所有编辑器和浏览器的网页开发免刷工具,让你在保存代码的同时,自动刷新页面。

获取地址:http://getf5.com/

4.1 解压,打开f5.exe,自动打开默认浏览器

4.2 新しいプロジェクト フォルダーを作成し、プロジェクト フォルダーのパスをプロジェクトの追加リスト ボックスにコピーし、[追加] をクリックします

4.3 プロジェクト フォルダーを Sublime にドラッグし、プロジェクトに必要なファイルを作成し、ブラウザーを更新します

[編集する HTML ページを入力してください] をクリックします。

4.4 Sublime で HTML および CSS コードを自由に編集し、保存 (Ctrl+S) すると、ページが自動的に更新されます。

もっと読むことができます:

http://www.w3cplus.com/tools/emmet-cheat-sheet.html

http://www.douban.com/note/299431022/

次の場合にご注意ください。転載 転載を明確に示し、元の著者と元のブログ投稿のアドレスを示します。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。