Prettier-Code Formater程式碼格式化外掛使用教程

Prettier-Code Formater程式碼格式化外掛使用教程

今天為各位學習前端的小夥伴們推薦一個 Vscode 中好用的程式碼格式化外掛: Prettier

並在該文章中記錄它的用法

外掛的安裝

通過 VScode 的擴充套件市場安裝
npm 安裝 npm i -D prettier

外掛的使用

外掛的使用主要有兩種方式:

配置VScode程式碼格式化後, 結合VScode快捷鍵使用
npm安裝後, 輸入命令(CLI)方式使用

方式一: 配置VScode程式碼格式化後, 結合VScode快捷鍵使用

在用方法一安裝後, 需要在VScode的設定中設定預設的程式碼格式化器, 設定方法有兩種

方法1如圖所示:

方法2在settings.json中新增如下配置項:

"editor.defaultFormatter": "esbenp.prettier-vscode",

然後就能用VScode中格式化程式碼的快捷鍵(預設: Ctrl + Shift + P)來格式化程式碼了

方式二: CLI中使用命令列的方式格式化程式碼

這種方法適合在前端專案中配合.prettierrc使用, 保證專案中所有人格式化的程式碼風格都一致

CLI使用方式: npx prettier <options> [filename/dict]

常用的一些引數:

--write 或 -w 對程式碼進行格式化
--check 或 -c 檢查該檔案或該目錄下的檔案是否已經被Prettier格式化過了, 結果會在控制檯中告知
--config 指定格式化規則檔案的路徑, 適用於 .prettierrc 不在根目錄的場景
--no-config 不尋找配置檔案, 使用預設設定
--find-config-path 輸出當前檔案所應用的格式化規則檔案(例如: .prettierrc)的路徑

.prettierignore檔案

該檔案的作用與.gitignore的作用一致, 用於忽略特定檔案, 並且語法也一樣

如果專案中有.gitignore檔案, 可以在其中配置而不需要.prettierignore檔案, 如果兩檔案同時存在則涉及優先順序問題

.prettierignore 與 .gitignore 的優先順序

即使兩個檔案同時存在, 裡面的配置也不會同時生效(不會mix在一起)
只要.prettierignore檔案存在, 一切都以.prettierignore檔案為準, 而不管其他

需要不格式化某一部分程式碼

語法跟eslint中忽略某一部分的語法檢查一致: 使用當前語言的註釋語法, 內容是prettier-ignore, 以HTML、CSS、JS為例

<!-- prettier-ignore -->

<p>這個元素節點會跳過程式碼格式化</p>

/* prettier-ignore */

p {

    /* 跳過程式碼格式化 */

    color: red;

}

// prettier-ignore

()=>{console.log("test")}   /* 跳過程式碼格式化 */

.prettierrc配置檔案

這個檔案是該格式化外掛的重要檔案, 格式化的規則都可在該配置檔案中定義

格式化規則配置的優先順序

package.json 中的 prettier 配置項
.prettierrc配置檔案
.prettierrc.json檔案, .prettierrc.yml檔案, .prettierrc.yaml檔案, .prettierrc.json5檔案
使用commonJS模組化暴露的 .prettierrc.js檔案, .prettierrc.cjs檔案, prettier.config.js檔案, prettier.config.cjs檔案
.prettierrc.toml檔案

注意: 優先順序高的會覆蓋優先順序低的, 而不是混合(mixin)後生效

常用的程式碼格式化配置(前端)

詳細配置請在官網檢視, 這裡只列出常用的

printWidth: 一行程式碼能顯示的長度, 預設值: 80
tabWidth: 標籤的縮排, 預設值: 2
useTabs: 用製表符還是空格進行縮排, 預設值: false(用空格)
semi: 是否在末尾新增分號, 預設值: true 注意: 對於需要新增分號的場景, 即使是false也會自動新增上, 所以可以放心使用
singleQuote: 是否使用單引號代替雙引號, 如果引號的數量超過另一個引號, 則較少使用的引號將用於格式化字串, 預設值: false
quoteProps: 物件中的屬性名是否新增引號
1. as-needed(預設值): 只有當需要的時候才新增, 例如: 屬性名為"hello-world"
2. consistent: 只要物件中有一個屬性名是要加引號的, 則物件中除計算屬性名以外的所有屬性名都加上引號
3. preserve: 保留原風格, 有引號的繼續有, 沒有的也不會新增

trailingComma: 尾隨逗號, 在為物件新增新元素時可以直接新增而不用再去操心上一個元素末尾是否添加了逗號

// 函式引數尾隨逗號

function (a,){}

(b,)=>{}

// 物件尾隨逗號

let obj {

    a: 1,

    b: 2,

    // 這樣新增下一個屬性的時候就不用操心b的末尾是否有逗號了

}

// 陣列尾隨逗號

let arr = [1,2,3,]

// 注意這種方式的陣列不是尾隨逗號, 而是稱為稀疏陣列, 元素的值是null

let arr2 = [1,2,,,] // arr2.length => 5

es5(預設值): 在ES5標準下新增尾隨逗號(物件、陣列等)
all: 與es5的區別在於函式形參和函式呼叫傳遞的實參是否使用尾隨逗號
none: 不使用尾隨逗號

bracketSpacing: 物件的大括號之間是否有空格
- true(預設值) 示例: { foo: bar }
- false 示例: {foo: bar}
arrowParens: 當es6箭頭函式只有一個引數時是否新增括號
- always(預設值): 總是新增
- avoid: 儘量不新增
vueIndentScriptAndStyle: 是否縮排Vue元件檔案中的<script>和<style>標籤
- false(預設值): 不縮排
- true: 縮排
endOfLine: 行尾的形式, Windows用CRLF, macOS用LF, LF更相容
1. lf: 僅\n換行, 常見於 Linux 和 macOS 以及 git repos 內
2. crlf: 回車符 + 換行符 (\r\n), 在 Windows 上很常見
3. cr: 僅回車符(r), 很少使用
4. auto: 保持原有方式, 如果檔案中lf與crlf共存, 則以第一行的行尾樣式為準格式化所有
embeddedLanguageFormatting: 是否格式化嵌入的程式碼塊, 如markdown中的code block 或 HTML中let html = <html><head></head></html>
- auto: 如果 Prettier 可以自動識別嵌入程式碼, 則格式化嵌入程式碼
- off: 永遠不要自動格式化嵌入的程式碼

最後奉上我所使用的.prettierrc和.prettierignore

.prettierrc檔案:

{

    "printWidth": 120,

    "tabWidth": 4,

    "semi": false,

    "singleQuote": true,

    "quoteProps": "as-needed",

    "trailingComma": "es5",

    "bracketSpacing": true,

    "arrowParens": "avoid",

    "proseWrap": "never",

    "vueIndentScriptAndStyle": true,

    "endOfLine": "lf",

    "embeddedLanguageFormatting": "off"

}

.prettierignore檔案:

.DS_Store

node_modules

node_modules/**/*

node_modules/**/*.*

/dist

# local env files

.env.local

.env.*.local

# Log files

npm-debug.log*

yarn-debug.log*

yarn-error.log*

pnpm-debug.log*

# Editor directories and files

.idea

.vscode

*.suo

*.ntvs*

*.njsproj

*.sln

*.sw?

# 重要的環境依賴檔案

package.json

package.lock.json

# 程式碼格式化外掛的配置檔案

.prettierrc

.prettierignore

# git忽略檔案

.gitignore

# 不對markdown進行格式化, 容易打亂自己編排的樣式

*.md

Prettier-Code Formater程式碼格式化外掛使用教程