vscode使用editorconfig插件以及.editorconfig配置文件說明詳解
簡介
EditorConfig和Prettier一樣，都是用來配置格式化你的代碼的，這個格式化代碼，要和你lint配置相符！否則會出現(xiàn)你格式化代碼以后，卻不能通過你的代碼校驗工具的檢驗
EditorConfig 文件中的設(shè)置用于在基本代碼庫中維持一致的編碼風(fēng)格和設(shè)置，例如縮進(jìn)樣式、選項卡寬度、行尾字符以及編碼等，而無需考慮使用的編輯器vscode使用editorconfig插件以及.editorconfig配置文件說明詳解
或 IDE
editorConfig不是什么軟件，而是一個名稱為.editorconfig的自定義文件。該文件用來定義項目的編碼規(guī)范，編輯器的行為會與.editorconfig 文件中定義的一致，并且其優(yōu)先級比編輯器自身的設(shè)置要高，這在多人合作開發(fā)項目時十分有用而且必要
有些編輯器默認(rèn)支持editorConfig，如webstorm；而有些編輯器則需要安裝editorConfig插件，如ATOM、Sublime、VS Code等
當(dāng)打開一個文件時，EditorConfig插件會在打開文件的目錄和其每一級父目錄查找.editorconfig文件，直到有一個配置文件root=true
EditorConfig的配置文件是從上往下讀取的并且最近的EditorConfig配置文件會被最先讀取. 匹配EditorConfig配置文件中的配置項會按照讀取順序被應(yīng)用, 所以最近的配置文件中的配置項擁有優(yōu)先權(quán)
如果.editorconfig文件沒有進(jìn)行某些配置，則使用編輯器默認(rèn)的設(shè)置
配置.editorconfig
在當(dāng)前項目根目錄下添加.editorconfig文件
editorconfig文件是定義一些格式化規(guī)則（此規(guī)則并不會被vscode直接解析）
官網(wǎng)的一個配置
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file 表示是最頂層的配置文件，發(fā)現(xiàn)設(shè)為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文件，設(shè)置文件字符集為utf-8
[*.{js,py}]
charset = utf-8
# 4 space indentation 控制py文件類型的縮進(jìn)大小
[*.py]
indent_style = space
indent_size = 4
# Tab indentation (no size specified) 設(shè)置某中文件的縮進(jìn)風(fēng)格為tab Makefile未指明
[Makefile]
indent_style = tab
# Indentation override for all JS under lib directory 設(shè)置在lib目錄下所有JS的縮進(jìn)為
[lib/**.js]
indent_style = space
indent_size = 2
# Matches the exact files either package.json or .travis.yml 設(shè)置確切文件 package.json/.travis/.yml的縮進(jìn)類型
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2
語法
editorConfig配置文件需要是UTF-8字符集編碼的, 以回車換行或換行作為一行的分隔符
斜線(/)被用作為一個路徑分隔符，井號(#)或分號(;)被用作于注釋. 注釋需要與注釋符號寫在同一行
通配符
* 匹配除/之外的任意字符串
** 匹配任意字符串
? 匹配任意單個字符
[name] 匹配name中的任意一個單一字符
[!name] 匹配不存在name中的任意一個單一字符
{s1,s2,s3} 匹配給定的字符串中的任意一個(用逗號分隔)
{num1..num2} 匹配num1到num2之間的任意一個整數(shù), 這里的num1和num2可以為正整數(shù)也可以為負(fù)整數(shù)
屬性
所有的屬性和值都是忽略大小寫的. 解析時它們都是小寫的
indent_style 設(shè)置縮進(jìn)風(fēng)格(tab是硬縮進(jìn)，space為軟縮進(jìn)) indent_size 用一個整數(shù)定義的列數(shù)來設(shè)置縮進(jìn)的寬度，如果indent_style為tab，則此屬性默認(rèn)為tab_width tab_width 用一個整數(shù)來設(shè)置tab縮進(jìn)的列數(shù)。默認(rèn)是indent_size end_of_line 設(shè)置換行符，值為lf、cr和crlf charset 設(shè)置編碼，值為latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建議使用utf-8-bom trim_trailing_whitespace 設(shè)為true表示會去除換行行首的任意空白字符。 insert_final_newline 設(shè)為true表示使文件以一個空白行結(jié)尾 root 表示是最頂層的配置文件，發(fā)現(xiàn)設(shè)為true時，才會停止查找.editorconfig文件
控制指定文件類型的縮進(jìn)大小
這里可以設(shè)置，如下：
[{*.json,*.yml}]
indent_style = space
indent_size = 2
對于.json .yml 文件，使用空格替代tab，并且一個tab會被替換為2個空格。
文件末尾新行
始終在文件末尾插入一個新行
[*] end_of_line = lf insert_final_newline = true
對于所有的文件
- 每一行的尾部自動調(diào)整為 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擴(kuò)展
在vscode里面安裝EditorConfig
EditorConfig擴(kuò)展的作用是讀取第一步創(chuàng)建的editorconfig文件中定義的規(guī)則，并覆蓋user/workspace settings中的對應(yīng)配置（從這我們也可以看出vscode本身其實是并不直接支持editorconfig的）
全局安裝或局部安裝
editorconfig依賴包(npm install -g editorconfig | npm install -D editorconfig)
安裝editorconfig依賴包主要是因為EditorConfig依賴于editorconfig包，不安裝的可能會導(dǎo)致EditorConfig無法正常解析我們在第一步定義的editorconfig文件
使用
打開需要格式化的文件并手動格式化代碼（shift+alt+f）
使用建議
配合代碼檢查工具使用，比如說：ESLint或TSLint，統(tǒng)一代碼風(fēng)格。
我的用于vue項目的配置文件
配合ESLint + Prettier
#表示是最頂層的配置文件，發(fā)現(xiàn)設(shè)為true時，才會停止查找.editorconfig文件
root = true
# Unix-style newlines with a newline ending every file 對于所有的文件 始終在文件末尾插入一個新行
[*]
end_of_line = crlf
insert_final_newline = true
# 對于所有的js文件，設(shè)置文件字符集為utf-8
[*.js]
charset = utf-8
# 設(shè)置所有JS,vue的縮進(jìn)為
[*.{js,vue}]
indent_style = tab
到此這篇關(guān)于vscode使用editorconfig插件以及.editorconfig配置文件說明詳解的文章就介紹到這了,更多相關(guān)vscode editorconfig配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
utf-8 是一種在web應(yīng)用中經(jīng)常使用的一種 unicode 字符的編碼方式，使用 utf-8 的好處在于它是一種變長的編碼方式，對于 ANSII 碼編碼長度為1個字節(jié)，這樣的話在傳輸大量 ASCII 字符集的網(wǎng)頁時，可以大量節(jié)約網(wǎng)絡(luò)帶寬。2009-06-06
本文給大家分享的2個簡單而且實用的小功能代碼，分別是日歷控件和天氣預(yù)報接口，推薦給大家，需要的小伙伴快來參考下吧2015-03-03
本篇文章屬于游戲開發(fā)Unity進(jìn)階篇，主要介紹了游戲開發(fā)Unity2D圖片任意形狀破碎裂片效果展示，有需要的朋友可以借鑒參考下，希望可以有所幫助2021-09-09
作為一個軟件開發(fā)者，你一定會對網(wǎng)絡(luò)應(yīng)用如何工作有一個完整的層次化的認(rèn)知，同樣這里也包括這些應(yīng)用所用到的技術(shù)：像瀏覽器，HTTP，HTML，網(wǎng)絡(luò)服務(wù)器，需求處理等等。本文將更深入的研究當(dāng)你輸入一個網(wǎng)址的時候，后臺到底發(fā)生了一件件什么樣的事2021-06-06
這篇文章主要介紹了Systemd?入門實戰(zhàn)教程,介紹如何使用它完成一些基本的任務(wù)，本文結(jié)合示例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了程序員喜歡的5款最佳代碼比較工具，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-06-06
這篇文章主要介紹了各類常見語言清除網(wǎng)頁緩存方法匯總,包括了常見的html、asp、php與java,非常具有實用價值,需要的朋友可以參考下2014-10-10
這篇文章主要介紹了使用git上傳到碼云分支的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了各種編程語言中$符號的意義,本文是給編程新看看的,$符號在多種編程語言中都在使用,需要的朋友可以參考下2014-09-09
在利用httpwatch進(jìn)行抓包分析時，我們經(jīng)常會看到200、301、304這幾個狀態(tài)碼。具本三者是什么意思呢？這里腳本之家小編就為大家介紹一下2017-07-07