WebStorm是一款深受廣大程序員喜愛的 JavaScript 開發(fā)和Web前端開發(fā)工具，完美適應(yīng)各種復(fù)雜客戶端開發(fā)和Node.js的服務(wù)器端開發(fā)。

點(diǎn)擊下載WebStorm最新試用版

如果公司中存在某些編碼準(zhǔn)則，則在創(chuàng)建源代碼時(shí)必須遵循這些準(zhǔn)則。WebStorm可幫助您維護(hù)所需的代碼樣式。

代碼樣式是在項(xiàng)目級(jí)別和 IDE級(jí)別（全局）定義的。

• 在項(xiàng)目層面，設(shè)置被歸入 "項(xiàng)目方案"，該方案是預(yù)定義的，并以粗體標(biāo)示。項(xiàng)目風(fēng)格方案僅應(yīng)用于當(dāng)前項(xiàng)目。

  您可以使用 "Copy to IDE "命令將項(xiàng)目方案復(fù)制到IDE層。

• 在 IDE 層面，設(shè)置被歸入預(yù)定義的默認(rèn)方案（以粗體標(biāo)示），以及用戶通過 Duplicate 命令創(chuàng)建的任何其他方案（以純文本標(biāo)示）。全局設(shè)置是在用戶不想將代碼風(fēng)格設(shè)置與項(xiàng)目一起保留并共享時(shí)使用的。

  您可以使用 "Copy to Project "命令，將IDE方案復(fù)制到當(dāng)前項(xiàng)目中。

配置語言的代碼樣式

1. 在“Settings/Preferences”對(duì)話框中 Ctrl+Alt+S，轉(zhuǎn)到“Editor | Code Style”， 然后打開您的編程語言頁面。

2. 選擇代碼樣式方案，以用作所選語言的自定義代碼樣式的基礎(chǔ)。

3. 瀏覽所選語言頁面的選項(xiàng)卡，并為其配置代碼樣式首選項(xiàng)。

從其他語言復(fù)制代碼樣式設(shè)置

對(duì)于大多數(shù)受支持的語言，您可以從其他語言或框架復(fù)制代碼樣式設(shè)置。

1. 在“Settings/Preferences”對(duì)話框中 Ctrl+Alt+S，轉(zhuǎn)到"Editor | Code Style "， 然后打開您的編程語言頁面。

2. 單擊右上角的“Set From”。

   僅顯示這些語言的鏈接，這些鏈接適用于以其他語言為基礎(chǔ)定義設(shè)置的情況。

3. 從出現(xiàn)的列表中，選擇要從中復(fù)制代碼樣式的語言。

   

使用EditorConfig在目錄級(jí)別管理代碼樣式

要使用EditorConfig，請(qǐng)確保在 "Settings/Preferences | Plugins "頁面上啟用了EditorConfig捆綁插件，詳見管理插件。

WebStorm允許您使用EditorConfig支持（默認(rèn)情況下在“Settings/Preferences”對(duì)話框中 啟用）來管理每個(gè)文件集的所有代碼樣式設(shè)置Ctrl+Alt+S。您需要做的只是將.editorconfig文件放在根目錄中，該目錄包含要定義其代碼樣式的文件。您可以根據(jù)需要在項(xiàng)目中擁有多個(gè).editorconfig文件，因此可以為不同的模塊指定不同的樣式。

.editorconfig文件中的 所有選項(xiàng)都將應(yīng)用到它所在的目錄以及當(dāng)前項(xiàng)目代碼樣式之上的所有子目錄。如果未在中定義任何內(nèi)容.editorconfig，則取自項(xiàng)目設(shè)置。

.editorconfig文件中的 所有選項(xiàng)均分為以下類別：

• 標(biāo)準(zhǔn)選項(xiàng)，如indent_size，indent_style等。這些選項(xiàng)沒有任何特定于域的前綴。

• 具有ij_前綴并且適用于所有語言的通用IntelliJ選項(xiàng)：

  • ij_visual_guides

  • ij_formatter_off_tag

  • ij_formatter_on_tag

  • ij_formatter_tags_enabled

  • ij_wrap_on_typing

  • ij_continuation_indent_size

  • ij_smart_tabs

• 許多語言支持的常見IntelliJ選項(xiàng)。它們以ij_any前綴開頭，例如ij_any_brace_style。
• IntelliJ特定于語言的選項(xiàng)，其ij_<lang>_前綴為where<lang>語言域ID（通常為小寫語言名稱），例如ij_java_blank_lines_after_imports。

可以將相同的選項(xiàng)定義為通用選項(xiàng)和特定于語言的選項(xiàng)，例如ij_<...>_brace_style。特定于語言的選項(xiàng)比通用或通用選項(xiàng)具有更高的優(yōu)先級(jí)。

添加一個(gè).editorconfig文件

1. 在“project”視圖中，右鍵單擊包含要定義其代碼樣式的文件的源目錄，然后選擇“New | EditorConfig”。從上下文菜單中選擇EditorConfig。

2. 選擇要定義的屬性，以便WebStorm為它們創(chuàng)建存根，或?qū)⑺袕?fù)選框保留為空以手動(dòng)添加所需的屬性。

3. 要預(yù)覽對(duì)代碼樣式設(shè)置的更改將如何影響實(shí)際的源文件，點(diǎn)擊.editorconfig文件溝槽中的eye圖標(biāo)，并選擇一個(gè)受其影響的源文件。預(yù)覽將在右側(cè)打開

   

   您可以在預(yù)覽窗格中進(jìn)行更改，以嘗試測試如何反映配置更改，而不必?fù)?dān)心對(duì)源代碼進(jìn)行不必要的更改：當(dāng)您關(guān)閉.editorconfig文件時(shí)，所有這些更改都將被丟棄。