問題描述
一致的代碼風格不僅僅有助于提高可讀性，還可以減少錯誤和漏洞的產(chǎn)生。在編碼中，在VSCode中配置Prettier插件并實現(xiàn)使用Ctrl+S自動格式化代碼，其可以：
- 根據(jù)事先定義的規(guī)則自動調(diào)整代碼的縮進、換行、空格等格式，從而讓所有開發(fā)人員的代碼風格保持一致。這有助于提高代碼的可讀性和維護性，減少風格上的爭議；
- 降低因書寫錯誤而引發(fā)的潛在問題，提高代碼的質(zhì)量和可靠性；
- 消除團隊成員之間的代碼部分風格差異，提高協(xié)作的效率和一致性；
- 幫助摸魚；
解決方案
首先進入VSCode擴展，搜索Prettier插件（也可以使用別的格式化程序，看需求），點擊安裝：
Prettier 是一個 Opinionated 的代碼格式化工具，它通過解析代碼并使用自己的規(guī)則（考慮最大行長）重新打印代碼，從而使得代碼樣式一致，并在必要時包裝代碼。其git倉庫如下：
https://gitee.com/mirrors/Prettier?utm_source=alading&utm_campaign=repo
在安裝好Prettier插件后，按Ctrl + Shift + P，喚出配置欄，點擊首選項：打開工作區(qū)設置（JSON）：
可以看到在工作區(qū)新增了一個setting.json文件，這就是當前工作區(qū)的設置文件，我們點擊進入后，將以下代碼粘貼進去，其中editor.tabSize用于配置縮進的位數(shù)，editor.formatOnSave用于每次保存的時候自動格式化，eslint.format.enable用于配置每次保存的時候?qū)⒋a按eslint格式進行修復，eslint.validate用于配置需要格式化的文件類型：
{
// vscode默認啟用了根據(jù)文件類型自動設置tabsize的選項
"editor.detectIndentation": false,
// 重新設定tabsize
"editor.tabSize": 3, //縮進值為3，可自行修改
// #值設置為true時，每次保存的時候自動格式化；值設置為false時，代碼格式化請按shift+alt+F（快捷鍵，可自己更改）
"editor.formatOnSave": true,
// #每次保存的時候?qū)⒋a按eslint格式進行修復
"eslint.format.enable": true,
// 添加 vue 支持
//autoFix默認開啟，只需輸入字符串數(shù)組即可
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html"
],
// #讓函數(shù)(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"editor.suggestSelection": "first",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
} // 兩個選擇器中是否換行
}
隨意進入一個文件，輸入Ctrl + Shift + P，喚出配置欄，點擊格式化文檔
在彈出的窗口中配置默認格式化程序為Prettier ESlint：文章來源：http://www.zghlxwxcb.cn/news/detail-742344.html
一般都將其配置為Prettier ESlint，當然如果有別的格式化需求可以更換，也可以自己寫。大功告成，文章來源地址http://www.zghlxwxcb.cn/news/detail-742344.html
到了這里，關(guān)于解決方案：VSCode中配置自動格式化實現(xiàn)Ctrl+S自動格式化代碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
