了解如何在 Adobe Dreamweaver 中使用 lint 分析 HTML、CSS 及 JS 檔案。在「輸出」面板中檢視錯誤和警告,而且只要按一下,即可跳到發生錯誤的程式碼行。

不論您是新手或經驗豐富的程式碼撰寫者,總是會有不小心或因為資訊不族而發生程式碼錯誤的機會。當網頁或甚至其中一部分看起來和您心裡想的不一樣時,您必須要對程式碼進行除錯來找出所有的語法或邏輯錯誤。除錯是極為麻煩和耗時的程序,尤其是在複雜實作的情況下。

Dreamweaver 借助於 linting,讓一般錯誤的程式碼除錯變得簡單方便。Linting 是一個分析程式碼的程序,藉以標記程式碼中的錯誤和可疑使用方式。HTML 語法錯誤、CSS 中的剖析錯誤或 JavaScript 檔案內的警告是在 Dreamweaver 內使用 linting 分析標註旗標的例子。

找到的錯誤和警告會列在停駐於工作區底部的獨立面板 (「輸出」面板) 內。面板內的每一行都可幫助您跳到發生錯誤的程式碼,讓您輕鬆尋找並修正程式碼。此外,錯誤程式碼的行號會以紅色 (表示錯誤) 和黃色 (表示警告) 標示。當您將滑鼠停留在標示的行號上方時,便會彈出錯誤或警告的預覽畫面。

Dreamweaver 可讓您使用 lint 分析 HTML (.htm 和 .html)、CSSJavaScript 檔案。請執行下列步驟使用 lint 分析這些檔案中的程式碼:

  1. 利用編輯 HTML、CSS 及 JS 組態檔,指定 linting 規則。如需詳細資訊,請參閱「指定 linting 規則」。

  2. 啟用或停用 linting。您可以在檔案載入或儲存時使用 lint 分析檔案。您可以使用「偏好設定 > Linting」選項來啟用/停用 linting。如需詳細資訊,請參閱「啟用 linting 及設定偏好設定」。

檔案中找到的錯誤和警告會顯示在「輸出」面板中。如需詳細資訊,請參閱「Linting 結果和輸出面板」。

啟用 linting 及指定 linting 規則

按一下「編輯 > 偏好設定」(Win) 或「Dreamweaver > 偏好設定」(Mac)。在「類別」清單中選取「Linting」,然後選取「啟用 Linting」。

指定 linting 規則

您可以透過編輯對應設定檔中的 linting 規則,使用 lint 分析 HTML、CSS 及 JS 檔案:

  • HTML:DW.htmlhintrc
  • CSS:DW.csslintrc
  • JS:.eslintrc

若要存取及編輯這些檔案,請執行下列步驟:

  1. 按一下「編輯 > 偏好設定」(Win) 或「Dreamweaver > 偏好設定」(Mac)。

  2. 在「類別」清單中選取「Linting」。

  3. 在「編輯規則設定」區段中,按一下所需的檔案類型,然後按一下「編輯並套用變更」。

    對應的組態檔隨即在 Dreamweaver 中開啟。

  4. 編輯或將 linting 規則加入至組態檔。如需 linting 規則的詳細資訊,請參閱下列文件:

    在這些設定檔中,您也可以設定所要顯示的錯誤或警告類型。

註解:

在較早的 Dreamweaver CC 19.0 版中,其 linting 規則設定檔為 JS:DW.jshintrc。您可以參閱 http://jshint.com/docs/options/

ECMAScript 6 Linting

Dreamweaver 支援 ECMAScript 6 語法。Dreamweaver 也支援 ECMAScript 程式碼的 linting 分析,其中將 ESLint 預設為 JavaScript linter

  1. 按一下「網站 > 管理網站」。

    「管理網站」對話方塊
    從「管理網站」對話方塊中選擇網站
  2. 從「網站設定」視窗的左側窗格中選取「進階設定」。

  3. 在左側窗格的「進階設定」中選取「JS Lint」。

    您可以按一下「ECMAScript 版本」旁邊的下拉式清單,然後選擇 3、5 或 6Dreamweaver 會使用您所選版本的預設規則集。

    選擇 ECMAScript 版本
    選擇 ECMAScript 版本
  4. 若要自訂規則集,您可以從下拉式清單中選取「設定檔」,然後按一下「編輯設定檔」。

    編輯 JS Lint 設定檔
    編輯 JS Lint 設定檔

    您在「網站設定」中所做的變更將會儲存,並且會在網站根目錄中建立新的檔案 .eslintrc.js (若沒有此檔案)。

    隨即會開啟網站根目錄中的 .eslintrc.js 檔案供您編輯。如需詳細資訊,請參閱「ESLint 規則」。

    .eslintrc.js 設定檔
    .eslintrc.js 設定檔

    註解:

    • 在「網站設定」對話方塊中指定的「ECMAScript 版本」設定,其優先權高於網站根目錄中所使用的 .eslintrc.js 檔案。
    • 如果您未在網站設定中使用 .eslintrc.js 檔案,Dreamweaver 會在所有位置搜尋 .eslintrc.js 檔案,直到向上搜尋至根目錄。

    如需有關設定檔串接和階層的詳細資訊,請參閱「ESLint 網站」。

Linting 分析結果和輸出面板

Linting 分析結果 (錯誤和警告) 列於「輸出」面板。「輸出」面板會停駐在所有預設工作區的底部供您使用。如果「輸出」面板已關閉,您可以藉由執行下列動作之一來開啟它:

  • 按一下「文件」視窗狀態列中的 linting 狀態圖示
  • 使用鍵盤快速鍵 Shift+F6
  • 使用「視窗 > 結果 > 輸出」
「輸出」面板和 linting 圖示
「輸出」面板和 linting 圖示

狀態列上的 linting 圖示會指示 linting 結果:

  • 紅色 - 目前的文件有錯誤和警告
  • 黃色 - 目前的文件只有警告
  • 綠色 - 目前的文件沒有錯誤

註解:

您也可以使用狀態列中的 linting 圖示,切換「輸出」面板 (開啟/關閉),前提是該圖示為紅色或黃色 (非綠色)。

內有錯誤或警告的程式碼行會分別以紅色和黃色標示。您可以按兩下「輸出」面板中的訊息,跳至發生錯誤的程式碼行。在程式碼檢視畫面內,您也可以將滑鼠停留在錯誤行的行號上方,預覽該錯誤或警告。

「輸出」面板一次會列出 50 個訊息,錯誤會列在警告的前面。而當您修正錯誤時,面板中的清單會捲動,以顯示下一個錯誤。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策