利用編輯 HTML、CSS、DW 範本及 JS 組態檔。 如需詳細資訊，請參閱「指定 linting 規則」。
上次更新時間
2021年4月27日
了解如何在 Adobe Dreamweaver 中使用 lint 分析 HTML、CSS、DW 範本及 JS 檔案。 在「輸出」面板中查看錯誤和警告，而且只要按一下，即可跳到發生錯誤的程式碼行。
不論您是新手或經驗豐富的程式碼撰寫者，總是會有不小心或因為資訊不族而發生程式碼錯誤的機會。 當網頁或甚至其中一部分看起來和您心裡想的不一樣時，您必須要對程式碼進行除錯來找出所有的語法或邏輯錯誤。 除錯是極為麻煩和耗時的程序，尤其是在複雜實作的情況下。
Dreamweaver 借助於 linting，讓一般錯誤的程式碼除錯變得簡單方便。 Linting 是一個分析程式碼的程序，藉以標記程式碼中的錯誤和可疑使用方式。 HTML 語法錯誤、CSS 中的剖析錯誤或 JavaScript 檔案內的警告是在 Dreamweaver 內使用 linting 分析標註旗標的例子。
找到的錯誤和警告會列在停駐於工作區底部的獨立面板 (「輸出」面板) 內。 面板內的每一行都可幫助您跳到發生錯誤的程式碼，讓您輕鬆尋找並修正程式碼。 此外，錯誤程式碼的行號會以紅色 (表示錯誤) 和黃色 (表示警告) 標示。 當您將滑鼠停留在標示的行號上方時，便會彈出錯誤或警告的預覽畫面。
使用「開啟編輯 linting」功能，可在編輯程式碼時，同時在輸出控制面板上查看錯誤和警告
Dreamweaver 可讓您使用 lint 分析 HTML (.htm 和 .html)、 CSS、DW 範本、 和 JavaScript 檔案。
請執行下列步驟使用 lint 分析這些檔案中的程式碼：
啟用或停用 linting。 您可以在檔案被編輯、載入或儲存時使用 lint 分析檔案。
- 使用「偏好設定 > linting」選項來啟用/停用 linting。 如需詳細資訊，請參閱「啟用 linting 及設定偏好設定」。
檔案中找到的錯誤和警告會顯示在「輸出」面板中。 如需詳細資訊，請參閱「Linting 結果和輸出面板」。
啟用 linting、開啟編輯 linting 及指定 linting 規則
按一下「編輯 > 偏好設定」(Win) 或「Dreamweaver > 偏好設定」(Mac)。 在「類別」清單中，按一下「 Linting」、選擇「啟用 Linting」，然後按一下「套用」。
開啟編輯 linting
在 Dreamweaver 中，依照預設，「開啟編輯 linting」功能為啟用狀態。 若要停用，按一下「編輯 > 偏好設定」(Win) 或「Dreamweaver > 偏好設定」(Mac)。 在類別清單中，按一下Linting，選取編輯時進行 linting並按一下套用。
指定 linting 規則
您可以透過編輯對應設定檔中的 linting 規則，使用 lint 分析 HTML、CSS 及 JS 檔案：
- HTML：DW.htmlhintrc
- CSS：DW.csslintrc
- JS：.eslintrc
若要存取及編輯這些檔案，請執行下列步驟：
按一下「編輯 > 偏好設定」(Win) 或「Dreamweaver > 偏好設定」(Mac)。
在「類別」清單中選取「Linting」。
在「編輯規則設定」區段中，按一下所需的檔案類型，然後按一下「編輯並套用變更」。
對應的組態檔隨即在 Dreamweaver 中開啟。
編輯或將 linting 規則加入至組態檔。 如需 linting 規則的詳細資訊，請參閱下列文件：
- HTML Linter：https://github.com/yaniswang/HTMLHint/wiki/Rules
- CSS Linter：https://github.com/CSSLint/csslint/wiki/Rules
- JS Linter：https://eslint.org/docs/rules
在這些設定檔中，您也可以設定所要顯示的錯誤或警告類型。
備註
在較早的 Dreamweaver 19.0 版中，其 linting 規則設定檔為 JS：DW.jshintrc。 您可以參閱 http://jshint.com/docs/options/
ECMAScript 6 Linting
Dreamweaver 支援 ECMAScript 6 語法。 Dreamweaver 也支援 ECMAScript 程式碼的 linting 分析，其中將 ESLint 預設為 JavaScript linter。
按一下「網站 > 管理網站」。
從「網站設定」視窗的左側窗格中選取「進階設定」。
在左側窗格的「進階設定」中選取「JS Lint」。
您可以按一下ECMAScript 版本旁的下拉式清單，然後選擇 3、5 或 6。Dreamweaver 使用您選取版本的預設規則集。
若要自訂規則集，您可以從下拉式清單中選取「設定檔」，然後按一下「編輯設定檔」。
您在「網站設定」中所做的變更將會儲存，並且會在網站根目錄中建立新的檔案 .eslintrc.js (若沒有此檔案)。
隨即會開啟網站根目錄中的 .eslintrc.js 檔案供您編輯。 如需詳細資訊，請參閱「ESLint 規則」。
備註
- 在「網站設定」對話方塊中指定的「ECMAScript 版本」設定，其優先權高於網站根目錄中所使用的 .eslintrc.js 檔案。
- 如果您的網站中沒有 ESLint 設定檔，Dreamweaver 會在所有位置搜尋這些設定檔，直到向上搜尋至根目錄。
如需有關設定檔串接和階層的詳細資訊，請參閱「ESLint 網站」。
Linting 結果和輸出面板
Linting 分析結果 (錯誤和警告) 列於「輸出」面板。 「輸出」面板會停駐在所有預設工作區的底部供您使用。 如果「輸出」面板已關閉，您可以藉由執行下列動作之一來開啟它：
- 按一下「文件」視窗狀態列中的 linting 狀態圖示
- 使用鍵盤快速鍵 Shift+F6
- 使用「視窗 > 結果 > 輸出」
狀態列上的 linting 圖示會指示 linting 結果：
紅色：目前文件有錯誤和警告
黃色：目前文件僅有警告
綠色：目前文件沒有錯誤
備註
您也可以使用狀態列中的 linting 圖示，切換「輸出」面板 (開啟/關閉)，前提是該圖示為紅色或黃色 (非綠色)。
內有錯誤或警告的程式碼行會分別以紅色和黃色標示。 您可以按兩下「輸出」面板中的訊息，跳至發生錯誤的程式碼行。 在程式碼檢視畫面內，您也可以將滑鼠停留在錯誤行的行號上方，預覽該錯誤或警告。
「輸出」面板一次會列出 50 個訊息，錯誤會列在警告的前面。 而當您修正錯誤時，面板中的清單會捲動，以顯示下一個錯誤。
