IntelliJ IDEA使用文件觀察器

Tip：此功能僅在 Ultimate 版本中受支持！

IntelliJ IDEA 支持與各種在后臺(tái)運(yùn)行的第三方編譯器集成，并且可以執(zhí)行以下操作：

⒈ 將Less、Sass、SCSS 和 Stylus 源代碼翻譯為 CSS 代碼。

⒉ 將 CoffeeScript 源代碼翻譯為 JavaScript 代碼，也可以創(chuàng)建源地圖來啟用調(diào)試。

⒊ 壓縮 JavaScript 和 CSS 代碼。

請(qǐng)注意，IntelliJ IDEA 不包含內(nèi)置編譯器，但僅支持與您必須下載并安裝在 IntelliJ IDEA 的外部工具的集成。

在 IntelliJ IDEA 中，這些編譯器配置稱為 "文件觀察器"。對(duì)于每個(gè)支持的編譯器，IntelliJ IDEA 提供了一個(gè)預(yù)定義的文件觀察程序模板。預(yù)定義文件觀察器模板在 IntelliJ IDEA 級(jí)別可用。要針對(duì)您的項(xiàng)目文件運(yùn)行編譯器，您需要根據(jù)相關(guān)模板創(chuàng)建特定于項(xiàng)目的文件觀察器，至少要指定要在您的機(jī)器上使用的編譯器的路徑。

您可以下載一個(gè)您選擇的編譯器并將其設(shè)置為文件觀察器。但是，在這種情況下，沒有預(yù)定義的模板可用，因此您必須手動(dòng)指定所有的設(shè)置。

為了適用，文件觀察器必須通過在設(shè)置對(duì)話框的文件觀察器頁(yè)面上選擇它旁邊的復(fù)選框來啟用，請(qǐng)參閱啟用和禁用文件觀察器。之后文件監(jiān)視器將在源代碼做出任何修改或保存時(shí)自動(dòng)調(diào)用，具體取決于立即文件同步(Immediate File Synchronization)復(fù)選框是否被選中或清除，請(qǐng)參閱“新觀察器對(duì)話框”。

文件觀察器的輸出存儲(chǔ)在一個(gè)單獨(dú)的文件中。預(yù)定義的模板根據(jù)編譯器類型建議可以使用的文件的類型。默認(rèn)情況下，當(dāng)?shù)谝淮握{(diào)用文件觀察器時(shí)，輸出文件會(huì)在與輸入文件相同的文件夾中創(chuàng)建，于是這個(gè)文件只被更新。您可以在創(chuàng)建文件的過程中自定義所有這些設(shè)置。

由文件觀察器生成的 JavaScript 文件被排除在代碼完成和重構(gòu)之外。

在項(xiàng)目樹視圖中，輸出文件顯示在原始文件的下方，顯示為一個(gè)節(jié)點(diǎn)。這是為了提高可視性，以便您可以更輕松地找到必要的文件。

文件觀察器有兩個(gè)專門的代碼檢查：

⒈ 在每個(gè)被識(shí)別為應(yīng)用預(yù)定義的文件觀察器(Sass，Less，SCSS 或 CoffeeScript)的主題的文件中調(diào)用文件觀察器可用檢查。如果沒有適用的預(yù)定義文件觀察器與當(dāng)前項(xiàng)目相關(guān)聯(lián)，IntelliJ IDEA 會(huì)建議添加一個(gè)。

⒉ 該“文件觀察器問題”檢查由運(yùn)行的文件觀察器調(diào)用，并突出顯示特定的錯(cuò)誤。

創(chuàng)建一個(gè)基于預(yù)定義模板的項(xiàng)目文件觀察器，請(qǐng)執(zhí)行以下常規(guī)步驟：

⒈ 確保要使用的編譯器被下載并安裝在您的計(jì)算機(jī)上。

⒉ 確保文件觀察器存儲(chǔ)庫(kù)插件已安裝并啟用。 插件沒有與 IntelliJ IDEA 捆綁在一起，但是可以從 JetBrains 插件倉(cāng)庫(kù)中安裝，如“更新和卸載版本庫(kù)插件”與“啟用和禁用插件” 中所述安裝。

⒊ 指定文件觀察器的名稱、類型和說明。

⒋ 在選項(xiàng)區(qū)域，配置文件觀察器的行為：將調(diào)用它的事件，從哪個(gè)文件調(diào)用，何時(shí)顯示控制臺(tái)等等。

⒌ 在觀察器設(shè)置區(qū)域，配置與編譯器及其行為的交互：可執(zhí)行文件的路徑、傳遞給它的參數(shù)、可接受的輸入和預(yù)期的輸出文件類型等。

指定文件觀察器名稱、類型和說明

⒈ 通過按 Ctrl+Alt+S 或選擇：文件| 設(shè)置(Windows 和 Linux)或者選擇：IntelliJ IDEA | 首選項(xiàng)(MacOS)來打開“設(shè)置/首選項(xiàng)”對(duì)話框，然后單擊“工具”下的文件觀察器。

⒉ 打開的“文件觀察器”頁(yè)面顯示已經(jīng)在項(xiàng)目中配置的文件觀察器的列表。點(diǎn)擊添加按鈕 #FormatImgID_0#或按 Alt+Insert，然后執(zhí)行以下操作之一：

① 選擇用于創(chuàng)建文件觀察程序的預(yù)定義模板。這個(gè)選擇取決于您要使用的編譯器。

② 要設(shè)置您選擇的編譯器，請(qǐng)選擇“自定義”。

在您選擇相關(guān)的模板或自定義選項(xiàng)，新觀察器對(duì)話框打開。

⒊ 在 "名稱" 文本框中輸入文件觀察器的名稱。默認(rèn)情況下，IntelliJ IDEA 建議您選擇選定的預(yù)定義模板的名稱。

配置文件觀察器的行為

在 "新觀察器" 對(duì)話框的 "選項(xiàng)" 區(qū)域中，配置 "文件觀察器" 的行為：將調(diào)用它的事件、可以從中調(diào)用的文件、要顯示的控制臺(tái)等。

⒈ 指定是否要讓文件觀察器與 IntelliJ IDEA 語法分析器進(jìn)行交互：

① 要使文件觀察器忽略在語法上無效且僅在無錯(cuò)誤的文件中啟動(dòng)的文件中的 "更新、保存和更改焦點(diǎn)" 事件，請(qǐng)選擇“忽略語法錯(cuò)誤的觸發(fā)觀察器”復(fù)選框。

② 要使文件觀察器啟動(dòng)，而不管文件的語法正確性如何，請(qǐng)清除“忽略語法錯(cuò)誤的觸發(fā)觀察器”復(fù)選框。該文件觀察器將在更新、保存或幀取消激活時(shí)啟動(dòng)，具體取決于"立即文件同步" 復(fù)選框的狀態(tài)。

⒉ 指定文件觀察器將調(diào)用的事件：

① 當(dāng)對(duì)源代碼進(jìn)行任何更改時(shí)，文件觀察器就會(huì)被調(diào)用，選擇“即時(shí)的文件同步”復(fù)選框。

② 清除該復(fù)選框以使文件觀察器在保存時(shí)啟動(dòng)(文件| 全部保存)，或者當(dāng)您從 IntelliJ IDEA(在幀停用時(shí))移動(dòng)焦點(diǎn)。

⒊ 指定如何讓文件觀察器處理依賴關(guān)系。當(dāng)文件觀察器在一個(gè)文件上被調(diào)用時(shí)，IntelliJ IDEA 會(huì)檢測(cè)包含這個(gè)文件的所有文件。對(duì)于這些文件中的每一個(gè)，IntelliJ IDEA 再次檢測(cè)到它所包含的文件。這個(gè)操作是遞歸重復(fù)的，直到 IntelliJ IDEA 到達(dá)在指定范圍內(nèi)不包含在任何地方的文件。這些文件被稱為根文件(不要與內(nèi)容根混淆)。

① 只針對(duì)根文件運(yùn)行文件觀察器，選擇“只跟蹤根文件”復(fù)選框。

② 清除復(fù)選框以運(yùn)行 File Watcher(文件觀察器)用于調(diào)用它的文件，以及對(duì)該文件在指定范圍內(nèi)遞歸的所有文件的調(diào)用。

該選項(xiàng)僅適用于 Babel、Closure Compiler、Compass、Jade、Less、Sass / SCSS、Stylus、UglifyJS 和 YUI Compressor JS。

⒋ 在“顯示控制臺(tái)”下拉列表中，指定何時(shí)顯示控制臺(tái)。可用的選項(xiàng)是：

① Always：當(dāng)選擇這個(gè)選項(xiàng)時(shí)，文件觀察器在啟動(dòng)時(shí)打開控制臺(tái)。

② Error：選擇此選項(xiàng)時(shí)， 僅當(dāng)編譯中發(fā)生錯(cuò)誤時(shí)，文件觀察器才會(huì)打開控制臺(tái)。

③ Never：在任何情況下選擇此選項(xiàng)來禁止打開控制臺(tái)。

⒌ 配置輸出過濾器以區(qū)分文件觀察器的輸出和其他輸出。這些過濾器為以下的基礎(chǔ)：

① 顯示文件觀察器輸出文件的路徑作為錯(cuò)誤以及其他消息和日志的鏈接。當(dāng)您點(diǎn)擊這個(gè)鏈接時(shí)，在編輯器中打開相應(yīng)的文件。例如，要顯示有用的錯(cuò)誤消息，請(qǐng)?jiān)谡齽t表達(dá)式中指定以下表達(dá)式，以匹配添加/編輯過濾器對(duì)話框的輸出字段：

$FILE_PATH$:$LINE$ $MESSAGE$

② 在輸出文件中突出顯示錯(cuò)誤。

點(diǎn)擊“輸出過濾器”按鈕打開輸出過濾器對(duì)話框并管理過濾器列表。

配置輸入文件的預(yù)期類型和位置

在“觀察文件”區(qū)域中，指定要由文件觀察器處理的文件的類型和位置。

⒈ 從文件類型下拉菜單中選擇輸入文件的預(yù)期類型。文件觀察器將僅考慮這種類型的文件作為分析和處理的對(duì)象。文件類型根據(jù)文件類型和文件擴(kuò)展之間的關(guān)聯(lián)來識(shí)別。

默認(rèn)情況下，該字段根據(jù)所選的預(yù)定義文件觀察器模板顯示文件類型。

⒉ 在“范圍”下拉列表中，定義文件觀察器可以應(yīng)用到的文件的范圍。這些文件中的變化將立即調(diào)用文件觀察器，或者根據(jù)當(dāng)前文件同步復(fù)選框的狀態(tài)，立即保存或幀停用。

您可以從下拉列表中選擇一個(gè)預(yù)定義的范圍：

① 項(xiàng)目文件：項(xiàng)目?jī)?nèi)容根目錄中的所有文件(請(qǐng)參閱：內(nèi)容根和配置內(nèi)容根)。

② 項(xiàng)目生產(chǎn)文件：項(xiàng)目?jī)?nèi)容根目錄下的所有文件，不包括測(cè)試源。

③ 項(xiàng)目測(cè)試文件：項(xiàng)目中的所有文件測(cè)試源根目錄。

④ 打開文件：當(dāng)前在編輯器中打開的所有文件。

VCS 作用域：只有在項(xiàng)目處于版本控制的情況下，這些作用域才可用。

① 已更改的文件：所有已更改的文件，即與所有現(xiàn)有文件相關(guān)聯(lián)的所有文件更改列表。

② 默認(rèn)值：所有與更改列表 Default相關(guān)的文件。

或者，點(diǎn)擊“瀏覽”按鈕并在打開的作用域?qū)υ捒蛑信渲米远x范圍。

有關(guān)范圍的更多詳細(xì)信息，請(qǐng)參閱“范圍和范圍對(duì)話框”頁(yè)面。

范圍設(shè)置覆蓋了僅跟蹤根文件復(fù)選框設(shè)置：如果依賴關(guān)系超出了指定范圍，則文件觀察器不適用于它。

配置與編譯器的交互

在“觀察器設(shè)置”區(qū)域中，配置與編譯器的交互：指定可執(zhí)行文件的路徑、傳遞給它的參數(shù)、可接受的輸入和預(yù)期的輸出文件類型等。

⒈ 在程序文本框中指定編譯器的可執(zhí)行文件的位置(.exe，.cmd，.bat ，或其他取決于特定工具，.jar的存檔也可以接受，但為它們定義PATH變量是不支持的)，執(zhí)行下列操作之一：

① 輸入路徑。

② 點(diǎn)擊瀏覽按鈕 打開“選擇路徑”對(duì)話框并導(dǎo)航到所需的位置。

③ 點(diǎn)擊“插入宏”按鈕打開宏對(duì)話框，您可以從列表中選擇相關(guān)的宏。

⒉ 在參數(shù)文本框中，在其他情況下定義要傳遞給編譯器的參數(shù)，使用此文本框來更改默認(rèn)的輸出位置，即您指定一個(gè)自定義位置，用于編譯器在編譯過程中存儲(chǔ)生成的文件。請(qǐng)注意，如果您在這里重新定義了默認(rèn)的輸出位置，則需要在“其他選項(xiàng)”區(qū)域中清除“從 stdout 創(chuàng)建輸出文件”復(fù)選框，否則生成的文件的內(nèi)容將被編譯器的輸出流覆蓋。

執(zhí)行以下操作之一：

① 在文本框中輸入?yún)?shù)列表。

② 點(diǎn)擊“插入宏”按鈕打開宏對(duì)話框，您可以從列表中選擇所需的宏。

指定參數(shù)時(shí)，請(qǐng)遵循以下規(guī)則：

① 使用空格來分隔各個(gè)參數(shù)。

② 如果參數(shù)包含空格，請(qǐng)使用雙引號(hào)將空格或包含空格的參數(shù)括起來，例如 some" "arg或"some arg"。

③ 如果參數(shù)包含雙引號(hào)(例如作為參數(shù)的一部分)，請(qǐng)使用反斜杠(例如：-Dmy.prop=\"quoted_value"\)將雙引號(hào)括起來。

⒊ 在“刷新文本框”的輸出路徑中，指定編譯器存儲(chǔ)其輸出的文件：生成的源代碼、源映射和依賴關(guān)系?；谶@個(gè)設(shè)置，IntelliJ IDEA 檢測(cè)通過編譯生成的文件。

請(qǐng)注意，更改此文本框中的值并不能使編譯器將其輸出存儲(chǔ)在另一個(gè)位置。要做到這一點(diǎn)，在參數(shù)文本框中指定所需的輸出位置。

執(zhí)行以下操作之一：

① 手動(dòng)輸入輸出路徑，使用冒號(hào)作為分隔符。

② 點(diǎn)擊“插入宏”按鈕打開“宏”對(duì)話框，您可以從列表中選擇所需的模式。

配置高級(jí)選項(xiàng)

在“其他選項(xiàng)”區(qū)域，指定高級(jí)編譯器配置設(shè)置。

⒈ 在“工作目錄”文本框中，指定編譯器要應(yīng)用的目錄。由于該工具始終在文件的上下文中調(diào)用，因此默認(rèn)的工作目錄是當(dāng)前文件的目錄。此設(shè)置通過宏$ FileDir $來在所有預(yù)定義模板中指定。要更新此默認(rèn)設(shè)置，請(qǐng)執(zhí)行以下操作之一：

① 在文本框中顯式鍵入路徑。

② 點(diǎn)擊瀏覽按鈕打開“選擇路徑”對(duì)話框并導(dǎo)航到所需的位置。

③ 點(diǎn)擊“插入宏”按鈕打開“宏”對(duì)話框，您可以從列表中選擇所需的宏。

如果該字段留空，IntelliJ IDEA 將使用文件觀察器被調(diào)用的文件所在的目錄。

⒉ 使用 stdout 復(fù)選框中的 Create output 文件來指定您想要生成的輸出文件。

① 要讓 IntelliJ IDEA 讀取本機(jī)編譯器的輸出(standard output stream (stdout))并從它生成結(jié)果文件，從 stdout 復(fù)選框中選擇 Create output file。

② 要讓編譯器將其輸出直接寫入到輸出路徑刷新字段指定的文件中，請(qǐng)清除復(fù)選框。

一些編譯器會(huì)生成一個(gè)standard output stream (stdout)文件，而其他的則不會(huì)，這可能會(huì)導(dǎo)致錯(cuò)誤。因此，強(qiáng)烈建議保留默認(rèn)設(shè)置。

⒊ 或者，可以定義環(huán)境變量。例如，為啟動(dòng)編譯器所需的工具指定 PATH 變量， 但在路徑中未引用它。在大多數(shù)情況下，它是 Node.js 或 ruby.exe。如果您手動(dòng)安裝編譯器，而不是通過節(jié)點(diǎn)包管理器或 gem Manager，并且它的安裝文件夾不在 Node.js 或 ruby，則這種情況可能會(huì)發(fā)生。

啟用和禁用文件觀察器

為了切換文件觀察器的啟用/禁用狀態(tài)，在設(shè)置對(duì)話框的文件觀察者頁(yè)面上選擇/清除復(fù)選框。如果在運(yùn)行文件觀察器時(shí)發(fā)生了一個(gè)錯(cuò)誤，則文件監(jiān)視器被自動(dòng)禁用。要恢復(fù)狀態(tài)，請(qǐng)手動(dòng)啟用文件觀察器。

當(dāng)一個(gè) “文件觀察器”已啟用，只要編輯適用的文件被更改或保存，它就會(huì)自動(dòng)啟動(dòng)，請(qǐng)參閱配置文件觀察器的行為。

自定義編譯器行為的示例

任何編譯器都是外部的第三方工具。因此影響編譯器的唯一方法就是將參數(shù)傳遞給它，就像您在命令行模式下工作一樣。這些參數(shù)對(duì)于每個(gè)工具都是特定的。下面是為 CoffeeScript 編譯器定制默認(rèn)輸出位置的兩個(gè)示例。

假設(shè)，您有一個(gè)具有以下文件夾結(jié)構(gòu)的項(xiàng)目：

默認(rèn)情況下，生成的文件將存儲(chǔ)在原始文件所在的文件夾中。

您可以更改此默認(rèn)位置并將生成的文件存儲(chǔ)在 js 文件夾中。而且，您可以將它們存儲(chǔ)在一個(gè)平面列表中，或者放置在重復(fù) app 節(jié)點(diǎn)下的原始結(jié)構(gòu)的文件夾結(jié)構(gòu)中。

⒈ 要將所有生成的文件存儲(chǔ)在輸出 js 文件夾中而不保留該 app 文件夾下的原始文件夾結(jié)構(gòu)：

① 在參數(shù)文本框中鍵入：

output $ProjectFileDir$\js\ --compile --map $FileName$

② 在輸出路徑刷新文本框，輸入：

$ProjectFileDir$\js\$FileNameWithoutExtension$.js:$ProjectFileDir$\js\$FileNameWithoutExtension$.map

結(jié)果，項(xiàng)目樹如下所示：

⒉ 要在輸出 js 文件夾中保留 app 節(jié)點(diǎn)下的原始文件夾結(jié)構(gòu)，請(qǐng)執(zhí)行以下操作：

① 在參數(shù)文本框中鍵入：

output $ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\ --compile --map $FileName$

② 在輸出路徑刷新文本框中，輸入：

$ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:$ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.map

結(jié)果，項(xiàng)目樹如下所示：