ページ制作用の開発・デバッグツール (1)_html/css_WEB-ITnose

出典: jingwhale Bole Toutiao でオリジナルの作品を共有することを歓迎します

開発ツールの紹介

開発ツールは一般に、テキスト エディターと統合開発環境 (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 をインストールします

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

SublimeCodeIntel: コードのヒント

DocBlocker: コメント js コード

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

ターミナル: m コマンド

2.1 パッケージ制御

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

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

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

1

import urllib.request,os; pf = 'PackageControl.sublime-package'; ipp = sublime.installed_pa​​ckages_path();urllib.request.install_opener(urllib .request.ProxyHandler( )) ); open(os.path.join(ipp, pf),'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf. replace('', '%20'). ()) を読みます。

r os; Sublime-Package'; IPP = sublime .installed_pa​​ckages_path(); 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( 'インストールを完了するには Sublime Text を再起動してください')

すべてがうまくいけば、「環境設定」メニューの下に「パッケージ設定」メニューと「パッケージ制御」メニューが表示されます。

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

a.

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

Package Control.sublime-package をダウンロードし、Installed Packages/ ディレクトリにコピーします

e.

SublimeText を再起動します。

2.2 Emmet

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

b、 パネルに「install package」と入力して Enter キーを押します

c、

次に、「 Emmet 」と入力し、インストールが完了するまで待ちます。

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

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

html:5 または !: HTML5 ドキュメントタイプ 🎜html:xt🎜 : XHTML の移行ドキュメント タイプに使用されます 🎜🎜html:4s: 🎜 HTML4 厳密なドキュメント タイプに使用されます 🎜 2) head タグ内の操作 🎜🎜 外部スタイル シートの導入: link:css+tab 🎜🎜 🎜 🎜 🎜 1 🎜 🎜 🎜 <リンク rel= "スタイルシート" href= "style.css" >

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

1

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

1

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

1

ファビコンを追加: link:favicon+tab

1

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

1

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

互換モードを設定する meta:compat+tab

1

<

デモは以下の通りです:

3)本文編集

●タグ: タグ名(+tab)

●id:

タグ名#+クラス名(+tab)、複数のクラス

クラス: タグ名 . + ID 名 (+tab)、これには 1 つの ID のみが続きます

.item を入力するだけで、Emmet は親に基づいて判断しますタグ、通常は div です。たとえば、

に .item と入力すると、
が生成されます。
以下はすべて暗黙のタグ名です:
li:

ul と ol で使用されます tr:

table、tbody、thead、tfoot で使用されます

td: tr Medium で使用されます
オプション: select と optgroup で使用されます
●ラベルの内容
: ラベル名 { 内容

}

ラベル内の属性 : ラベル名 [属性名 = 属性値] など: A [href = www.baidu.com]

:

フォーム METHOD プロパティ

フォーム: 投稿 (GET)






->inp
input:hidden->input:h
input:text->input:t

input :パスワード->

入力:pinput:checkbox->

input:c

input:radio->input:r
input:submit->input:s
input:button->input:b

●ネスト
>: ネストされた要素を表すサブ要素シンボル

+:

同レベルのラベル シンボル

^: シンボルの前にラベルを 1 行進めることができます
●Group()

を Set と

brackets

でネストして、(.foo>h1)+(.bar>h2) と入力するなど、いくつかのコード ブロックをすばやく生成できます。次のコードが自動的に生成されます。


●複数の要素を定義する

*

複数の要素を定義するには、* シンボルを使用できます。たとえば、ul>li*3 は次のコードを生成できます

●Counter$

"carousel" を実行すると、要素 (ID またはクラス) の名前のカウント ビットが存在します。次のように $ を使用してこれを実現できます:

さまざまな操作を合理的に組み合わせて、複雑なスタイルのコード ブロックを記述することができます。

2.2.3 CSS の略語 1) 値
たとえば、要素の幅を定義するには、

1

width: 100px; を生成します。 🎜🎜 P X を除く、 h10p+m5e と入力するなど、他の単位も生成できます。結果は次のようになります 🎜 🎜 🎜 🎜 1 🎜 🎜 2 🎜

高さ : 10% ;

マージン : 5em ;

ユニットエイリアスリスト: p

は %、e は em、x は ex を意味します2) @f+

3). あいまい一致 一部の略語がわからない場合、Emmet は入力 ov:h、ov-h、ovh などの入力内容に基づいて最も近い構文を照合します。生成されたコードは同じです。 :

1

オーバーフロー : hidden ;

4) 非 W3C 標準 CSS 属性を入力すると、Emmet は trf などのサプライヤー プレフィックスを自動的に追加します。 、生成されます:

1

2

3

4
5

-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) と入力すると、 は次のコードを生成します:

1 2

3

background-image : -webkit-linear-gradient( left , # fff 50% , #000 );
背景画像 : -o-linear-gradient( 左 , #fff 50% , #000 );
背景画像 : リニアグラデーション(右へ , #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、これを検索します

3) カーソルを img または background-image タグに移動し、ctrl+u を押します, Emmet は画像の寸法を自動的に読み取り、追加します。 4) 複数行選択

キーワードを選択し、Ctrl+dを押すと、同じキーワードを複数選択できます(押すたびに1つ追加されます)。 5) ポイントを編集するためのショートカット キーは、ctrl+alt+左と ctrl+alt+右です。 6) 重複する一致する開始タグと終了タグをすばやく削除します (ショートカット キー: Ctrl+K)。 一部の大規模な HTML コードでは、入れ子になっているタグが多すぎる場合があります。Emmet を使用してタグを削除します。

7) 数値の増減は、0.1、1、10 の 3 つの値で実行できます。ショートカット キーは、

alt+上/下、Ctrl+上/下、および Alt+Shift+上/下 です。 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」と入力してEnterキーを押します

c、次に、「DocBlocker」と入力し、インストールが完了するまで待ちます
を使用して、コメントする関数の上にある '/**'+Tab キーを押してコードをコメント化します。
2.5 SublimeCodeIntel

SublimeCodeIntel は、非常に強力なコード プロンプト プラグインです。

a、

ショートカット キーの組み合わせ ctrl+shift+P を使用して、コマンド パネルを呼び出します
b、

パネルに「install package」と入力し、Enter キーを押します

c、 次に、「SublimeCodeIntel」と入力して待ちますインストールが完了するまで。 2.6 JSFormat
インストール


a、まず、次のパスでユーザー キー バインド ファイルを開きます:
Preferences → Key Bindings ? User
b、次に、次のコードを追加します (必要な場合は、ショートカット キーの組み合わせを定義できます)自分自身):
{"keys": ["ctrl+shift+r"], "command": "reindent" , "args": {"single_line": false}}

c、JSFormatのインストール
● Passショートカット キーの組み合わせ ctrl+shift+P でコマンド パネルが表示されます
●パネルに「install package」と入力して Enter キーを押します
●次に「format」（フォーマットを意味します）と入力し、必要な内容の答えをポップアップ リスト フォーマット操作に言語を使用するには、ここでは js をフォーマットし、JSFormat を選択し、インストールが完了するまで待ちます。

を使用してフォーマットされていないコードを選択し、「Ctrl+Shift+r」を押してコードをフォーマットします。

2.7 ターミナル

インストール

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

使用方法

任意の場所でescキーを押して、vimコマンドの状態に入ります。 vimコマンドを使用できます。終了するには、a を押します。

3. スニペット

スニペットはテキストに挿入され、テキストを現在のコード環境に適したものにするスマートなテンプレートです。プログラマーは常に単純なコード スニペットを書き直し続けますが、この種の作業は退屈で退屈ですが、スニペットの登場によりコードはより効率的になります。

スニペット ファイルは、拡張子 .sublime-snippet を持つ XML ファイルです。独自のスニペットを作成するには、メニュー バー Tools-> を使用します。 ;新しいスニペット。

3.1 新しく作成されたファイルは次のとおりです:

1

2

3

4

5

6

7

8

9

<抜粋>

<内容> ;< ![CDATA[
こんにちは、${1:this} は ${2:snippet} です。

; 1

< div >こんにちは!

4. [F5] 更新せずに Web 開発 (保存して更新)

[F5] はすべてのエディターをサポートしており、ブラウザーの Web ページ開発ツールを使用すると、コードの保存中にページを自動的に更新できます。

アドレスを取得します: 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/