簡介
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 = lfinsert_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 = spaceindent_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 = spaceindent_size = 2# Matches the exact files either package.json or .travis.yml 設置確切文件 package.json/.travis/.yml的縮進類型[{package.json,.travis.yml}]indent_style = spaceindent_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_widthtab_width 用一個整數來設置tab縮進的列數。默認是indent_sizeend_of_line 設置換行符,值為lf、cr和crlfcharset 設置編碼,值為latin1、utf-8、utf-8-bom、utf-16be和utf-16le,不建議使用utf-8-bomtrim_trailing_whitespace 設為true表示會去除換行行首的任意空白字符。insert_final_newline 設為true表示使文件以一個空白行結尾root 表示是最頂層的配置文件,發現設為true時,才會停止查找.editorconfig文件
控制指定文件類型的縮進大小
這里可以設置,如下:
[{*.json,*.yml}]indent_style = spaceindent_size = 2
對于.json .yml 文件,使用空格替代tab,并且一個tab會被替換為2個空格。
文件末尾新行
始終在文件末尾插入一個新行
[*]end_of_line = lfinsert_final_newline = true
對于所有的文件
實例
# editorconfig.orgroot = true[*]charset = utf-8indent_size = 4indent_style = spaceinsert_final_newline = truetrim_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 = crlfinsert_final_newline = true# 對于所有的js文件,設置文件字符集為utf-8[*.js]charset = utf-8# 設置所有JS,vue的縮進為[*.{js,vue}]indent_style = tab
到此這篇關于vscode使用editorconfig插件以及.editorconfig配置文件說明詳解的文章就介紹到這了,更多相關vscode editorconfig配置內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持武林網!
新聞熱點
疑難解答