vscode使用editorconfig插件以及.editorconfig配置文件說明詳解

EditorConfig和Prettier一樣，都是用來配置格式化你的代碼的，這個格式化代碼，要和你lint配置相符！否則會出現你格式化代碼以後，卻不能通過你的代碼校驗工具的檢驗

EditorConfig 文件中的設置用於在基本代碼庫中維持一致的編碼風格和設置，例如縮進樣式、選項卡寬度、行尾字符以及編碼等，而無需考慮使用的編輯器vscode使用editorconfig插件以及.editorconfig配置文件說明詳解

或 IDE

editorConfig不是什麼軟件，而是一個名稱為.editorconfig的自定義文件。該文件用來定義項目的編碼規範，編輯器的行為會與.editorconfig 文件中定義的一致，並且其優先級比編輯器自身的設置要高，這在多人合作開發項目時十分有用而且必要

有些編輯器默認支持editorConfig，如webstorm；而有些編輯器則需要安裝editorConfig插件，如ATOM、Sublime、VS Code等

當打開一個文件時，EditorConfig插件會在打開文件的目錄和其每一級父目錄查找.editorconfig文件，直到有一個配置文件root=true

EditorConfig的配置文件是從上往下讀取的並且最近的EditorConfig配置文件會被最先讀取. 匹配EditorConfig配置文件中的配置項會按照讀取順序被應用, 所以最近的配置文件中的配置項擁有優先權

如果.editorconfig文件沒有進行某些配置，則使用編輯器默認的設置

配置.editorconfig



在當前項目根目錄下添加.editorconfig文件

editorconfig文件是定義一些格式化規則（此規則並不會被vscode直接解析）

官網的一個配置



# EditorConfig is awesome: https://EditorConfig.org # top-most EditorConfig file 表示是最頂層的配置文件，發現設為true時，才會停止查找.editorconfig文件 root = true # Unix-style newlines with a newline ending every file 對於所有的文件 始終在文件末尾插入一個新行 [*] end_of_line = lf insert_final_newline = true # Matches multiple files with brace expansion notation # Set default charset 對於所有的js,py文件，設置文件字符集為utf-8 [*.{js,py}] charset = utf-8 # 4 space indentation 控制py文件類型的縮進大小 [*.py] indent_style = space indent_size = 4 # Tab indentation (no size specified) 設置某中文件的縮進風格為tab Makefile未指明 [Makefile] indent_style = tab # Indentation override for all JS under lib directory 設置在lib目錄下所有JS的縮進為 [lib/**.js] indent_style = space indent_size = 2 # Matches the exact files either package.json or .travis.yml 設置確切文件 package.json/.travis/.yml的縮進類型 [{package.json,.travis.yml}] indent_style = space indent_size = 2

語法



editorConfig配置文件需要是UTF-8字符集編碼的, 以回車換行或換行作為一行的分隔符

斜線(/)被用作為一個路徑分隔符，井號(#)或分號(;)被用作於註釋. 註釋需要與註釋符號寫在同一行

通配符



* 匹配除/之外的任意字符串 ** 匹配任意字符串 ? 匹配任意單個字符 [name] 匹配name中的任意一個單一字符 [!name] 匹配不存在name中的任意一個單一字符 {s1,s2,s3} 匹配給定的字符串中的任意一個(用逗號分隔) {num1..num2} 匹配num1到num2之間的任意一個整數, 這裡的num1和num2可以為正整數也可以為負整數

屬性



所有的屬性和值都是忽略大小寫的. 解析時它們都是小寫的

indent_style 設置縮進風格(tab是硬縮進，space為軟縮進) indent_size 用一個整數定義的列數來設置縮進的寬度，如果indent_style為tab，則此屬性默認為tab_width tab_width 用一個整數來設置tab縮進的列數。默認是indent_size end_of_line 設置換行符，值為lf、cr和crlf charset 設置編碼，值為latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建議使用utf-8-bom trim_trailing_whitespace 設為true表示會去除換行行首的任意空白字符。 insert_final_newline 設為true表示使文件以一個空白行結尾 root 表示是最頂層的配置文件，發現設為true時，才會停止查找.editorconfig文件

控制指定文件類型的縮進大小



這裡可以設置，如下：

[{*.json,*.yml}] indent_style = space indent_size = 2

對於.json .yml 文件，使用空格替代tab，並且一個tab會被替換為2個空格。

文件末尾新行



始終在文件末尾插入一個新行

[*] end_of_line = lf insert_final_newline = true

對於所有的文件

每一行的尾部自動調整為 Lf

文件的末尾是一個空行

實例



# editorconfig.org root = true [*] charset = utf-8 indent_size = 4 indent_style = space insert_final_newline = true trim_trailing_whitespace = true [*.md] trim_trailing_whitespace = false

安裝 EditorConfig擴展



在vscode裡面安裝EditorConfig

EditorConfig擴展的作用是讀取第一步創建的editorconfig文件中定義的規則，並覆蓋user/workspace settings中的對應配置（從這我們也可以看出vscode本身其實是並不直接支持editorconfig的）

全局安裝或局部安裝



editorconfig依賴包(npm install -g editorconfig | npm install -D editorconfig)

安裝editorconfig依賴包主要是因為EditorConfig依賴於editorconfig包，不安裝的可能會導致EditorConfig無法正常解析我們在第一步定義的editorconfig文件

使用



打開需要格式化的文件並手動格式化代碼（shift+alt+f）

使用建議



配合代碼檢查工具使用，比如說：ESLint或TSLint，統一代碼風格。

我的用於vue項目的配置文件



配合ESLint + Prettier

#表示是最頂層的配置文件，發現設為true時，才會停止查找.editorconfig文件 root = true # Unix-style newlines with a newline ending every file 對於所有的文件 始終在文件末尾插入一個新行 [*] end_of_line = crlf insert_final_newline = true # 對於所有的js文件，設置文件字符集為utf-8 [*.js] charset = utf-8 # 設置所有JS,vue的縮進為 [*.{js,vue}] indent_style = tab