前言

一個項目從創建到被重構，必定會經手很多人，每個人的代碼風格迥異，就算是一個人從頭到尾開發同一個項目，也無法保證前后開發的代碼風格的相同。

約束，至關重要！不能讓代碼在不同的機器不同的IDE上出現不同的表現，不應該讓單雙引號在項目中亂飛...

.editorconfig

當項目成員使用不同的IDE或者不同的系統開發同一項目的時候，會出現什么問題？

像這種讓強迫癥患者抓狂的紅，ctrl + s可以去掉，但主管一巴掌揮過來，你改別人的代碼干什么！

不同的ID或者不同的系統會出現不同IDE存在對代碼縮、換行符的不同設置，.editorconfig的作用就是為了在不同的開發環境上遵循.editorconfig的配置項，達到擁有同樣的代表表現！

配置詳解

indent_style

space | tab

space是當鍵下tab鍵時使用軟選項卡填充縮進，也就是使用空格填充。tab是指鍵下tab鍵時使用硬選項卡填充縮進，也就是使用\t填充。

兩個值具體區別如下：

當 indent_style 的值設置為 space 后，縮進的實際字符長度等 4 個空格的長度。

當 indent_style 的值設置成 tab 后，縮進的實際長度等于 1 個制表符的長度，但是制表符的長度等于 4，其實這里就是等于一個字符，只不過是字符在 IDE 上長等于 4 而已。

同樣的縮進大小，一個占 4 個字符，一個占 1 個字符，代碼量少的時候沒啥區別，但是代碼量一大，就不一樣了。做個實驗，寫 10000 行有縮進的代碼，使用不同的 indent_style，看看文件占用的磁盤大小，過程省去，直接公布結果：

結果發現，在代碼量很大的時候，indent_style 為 tab 占用的磁盤比 space 的少。

那是不是可以下定論使用 tab 作為 indent_style 的值，不是的，您去 github 前 100star 項目看看人家是怎么配置的，您會發現人家都是用的 space！為什么和我們想的不一樣！找了很多原因，下面這點是很有說服力的：

使用space可以提高代碼的壓縮率，因為現在的前端項目都在追尋最大的壓縮率以減少文件傳輸占用的帶寬，根據壓縮原則，信息熵越大的壓縮率越低。很明顯，當取值為tab的時候，文件中大概率同時存在制表符和空格；而取值為space，文件就只存在空格了，所以space的信息熵就越低，壓縮率就越高。

當然，如何你們公司dont care 這點帶寬，使用tab也沒啥問題，只要統一即可！

indent_size | tab_width

number

這個值是用來設置縮進的列數的，一般來說設置為4是最好的，也有挺多外國項目選擇2列縮進數的，看自己喜歡吧。那indent_size 和tab_width有什么區別呢：

• indent_style為space時縮進的長度優先采用indent_size設置的值，如果沒有設置indent_size，則采用tab_width的值
• indent_style為tab時縮進的長度優先采用tab_width設置的值, 如果沒有tab_width， 則采用indent_size的值

end_of_line

lf | cr | crlf (大小寫不限)

end_of_line設置的換行符的表示方式。先看一下這幾個值是什么意思

• lf：全拼Line Feed，意思是換行，用符號 \n 表示
• cr: 全拼Carriage Return， 意思是回車， 用符號 \r 表示
• crlf：cr 和 lf的結合，回車換行，用符號 \r\n

不同的系統使用不同的換行符，如windows系統使用crlf作為換行符，linux/unix系統和較新版本的mac系統使用lf作為換行符， 舊版本的mac系統使用cr作為換行符。

既然有不同，那就應該統一起來，方式代碼在不同的系統上有不同的換行符。基于少數服從多數，lf被更多系統使用，所以這個推薦使用lf作為end_of_line的值。還有一點是現在很多代碼服務器或者業務服務器都是linux系統，本地和服務的代碼換行符最好一樣，以防一些文件字符操作的時候沒有兼容！

charset

字符集，寫utf-8就行了！

trim_trailing_whitespace

bool

這個值設置為true的時候會將換行符前面的字符刪除空格，設置為false時不會刪除，所以這里果斷設置為true，我的代碼不是空格堆起來的，不然老板說我造假?。

insert_final_newline

bool

這個值設置為true的時候確保文件保存的時候以換行符結尾，設置為false則不會。這個也果斷設置為true，因為防止有些讀取文件的功能等待那個讓它退出的換行符。

root

bool

這個值必須設置在.editorconfig文件的最前面，設置為true以停止對當前文件的.editorconfig文件搜索，IDE讀到這個配置就不hi繼續網上找.editorconfig配置了。一個項目最好只有一份.editorconfig配置，且放置在項目的根目錄下。

扔你一份配置

root = true[*]indent_style = spaceindent_size = 4end_of_line = lfcharset = utf-8trim_trailing_whitespace = trueinsert_final_newline = true

關于文件匹配格式的更多問題請看官方文檔

除此之外

想要IDE支持.editorconfig配置，大多數知名的IDE都是以安裝對應插件的形式去支持，而不是像一些不知名的IDE一樣內置，沒錯，webstorm，說的就是你！

IDE出不出名看這 ;

.prettier

你有沒有發現你的項目里面可能有這樣的代碼：

單雙引號亂用

隨意換行

有時寫python，有時寫C++。分不分號無所謂

pretter專治這些代碼潔癖。隨意、飄忽不定的代碼風格會讓代碼很難看。

通過prettier的輔助，在編寫代碼保存時，prettier會根據配置將我們的代碼休整成 “漂亮” 的樣子。

安裝prettier

安裝prettier有兩種方式，一種是項目安裝npm包的形式，一種是安裝IDE插件的形式。

項目安裝prettier

npm install --save-dev --save-exact prettier

同時需要在安裝目錄下創建.prettier.json配置文件。

#.prettier.json{ "printWidth": 120, ...}

通過命令行形式執行prettier。npm run prettier:

# package.json"script": { "prettier": "prettier --write ."}

這種安裝方式的缺點是：每次寫完代碼都要去運行npm run prettier，究極麻煩。

安裝prettier插件

安裝插件這種形式好處在于

• 一次安裝，以后只要項目中存在prettier的配置，都可以生效
• 代碼在保存的時候即完成執行prettier進行格式化

各個IDE的插件各異，看這prettier插件安裝；

安裝完之后在根目錄下創建.prettierrc配置文件。

#.prettierrc{ "printWidth": 120, ...}

忽略文件被格式化

在根目錄下創建 .prettierignore，通過寫入文件或者文件夾地址，告訴prettier這些文件或者文件夾不被格式化。

除了根據.prettierignore，prettier還會忽略格式化根目錄下的.gitignore文件或則.eslintignore文件所提供的文件列表。所以你看到一般node_modules文件夾不被prettier格式化，因為.gitignore配置了這個文件夾！

配置prettier

下面，通過一些配置認識一下prettier到底能干啥。注：prettier的一些配置與.editorconfig作用相同，但是prettier優先級更高！

printWidth

該配置指定了代碼的行長，超過行長將被換行。

默認值推薦值

80	100

tabWidth

該配置指定了一個縮進的長度。

默認值推薦值

2	4

useTabs

是否使用制表符作為縮進單位，當為true時使用制表符，false時使用空格。這個前面提過，使用空格，果斷false。

默認值推薦值

false	false

semi

是否在行尾加分號。加，斷句清晰！

默認值推薦值

true	true

singleQuote

是否使用單引號而不是使用雙引號。推薦使用單引號/

以下情況對應格式化：

# 出現單雙引號同時存在，不做格式化"'1'23" => "'1'23"'"1"23' => '"1"23'# 出現一種引號嵌套"\"223\"" => '"223"''\'223\'' => "'223'"默認值推薦值

false	true

quoteProps

對象中的屬性名加引號的方式。取 as-needed | consistent | preserve

• as-needed：僅僅在必須使用引號的對象屬性中使用，其他的不需要的不使用
• consistent：如果對象中有一個屬性必須使用引號，那么對象其他的屬性也一樣使用
• preserve：保留對象中屬性的引號使用，隨便用，不做格式化(除了單雙引號的格式化外)

注：必須使用引號的屬性像"xx-xx"這種。

對比一下：

# 取值 as-neededlet a = { 'b-1': 1, c: 2 };//格式化后let a = { 'b-1': 1, c: 2 };# 取值 consistentlet a = { 'b-1': 1, c: 2 };//格式化后let a = { 'b-1': 1, 'c': 2 };# 取值 preservelet a = { 'b-1': 1, c: 2, 'd': 2 };//格式化后let a = { 'b-1': 1, c: 2, 'd': 2 };默認值推薦值

as-needed	as-needed

jsxSingleQuote

同singleQuote，適用jsx文件并且覆蓋singleQuote

trailingComma

多行代碼時盡可能打印尾隨逗號。取值 es5 | none | all；

• es5：在ES5中有效的結尾逗號(對象，數組等)
• none: 沒有逗號
• all: 盡可能在結尾加上逗號(包括函數參數)

這里不需要過多的逗號！

默認值推薦值

es5	none

更多配置項看這里prettier Options，prettier很多配置都是默認的，可以做到開箱即用。

推薦配置集合

很多都是默認的，就不用寫進去了。

#.prettierrc{ "printWidth": 100, "tabWidth": 4, "singleQuote": true, "trailingComma": "none"}

.prettierrc 和.prettier.json有什么不同

沒什么不同，無論是項目內置prettier還是插件式的prettier，都可以讀到這些配置，同樣還可以讀到以下這些形式的配置

• package.json 中的prettier值
• .prettierrc
• .prettierrc.json 、.prettierrc.yml、 .prettierrc.yaml
• .prettierrc.js 、prettier.config.js
• .prettierrc.toml

prettier讀取這些配置的先后順序從上往下。

總結

Editorconfig 和prettier只是對代碼的格式化上有很大的規范作用，但是深入到代碼的細節問題，就不是它們所專業的了，要更加的規范化項目，還需要像Eslint和tslint這些專業的工具來處理。燒烤君后面也會對Eslint/tslint做總結。

總結

以上是生活随笔為你收集整理的dw项目符号空心圆怎么设置_项目规范配置之editorconfigamp;prettier的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。