使用手冊取消

Lint 程式碼

搜尋

上次更新時間 2021年4月29日

了解如何在 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 分析這些檔案中的程式碼：

利用編輯 HTML、CSS、DW 範本及 JS 組態檔。如需詳細資訊，請參閱「指定 linting 規則」。
啟用或停用 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 會使用您所選版本的預設規則集。

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

編輯 JS Lint 設定檔

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

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

.eslintrc.js 設定檔
註解：
在「網站設定」對話方塊中指定的「ECMAScript 版本」設定，其優先權高於網站根目錄中所使用的 .eslintrc.js 檔案。

如果您的網站中沒有 ESLint 設定檔，Dreamweaver 會在所有位置搜尋這些設定檔，直到向上搜尋至根目錄。

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