ページ制作用の開発・デバッグツール (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 🎜 🎜 🎜

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

1

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

1

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

1

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

1

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

1

互換モードを設定する 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
  ; こんにちは、${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/