全面了解vscode格式化配置

一、基礎配置

網上大多數有關vscode格式化的文章都會提到Prettier這個插件，而且確實非常好用。但在使用它之前，你需要先進行基礎的格式化配置，否則除了英文單詞之外，其他的一切都會在保存時一團糟。

在文件->首選項->設置中搜索“Format On Save”，勾選上這一選項即可。此時，保存時就會自動對代碼進行格式化。不過注意，這個配置只對語言服務（如JavaScript、TypeScript等）生效，其他的格式化需要使用專屬插件。

二、使用Prettier

如果你需要進行更為複雜的格式化，Prettier是一個不錯的選擇。這個插件可以支持大部分語言，還能自動檢測你的文件類型並進行格式化。在使用Prettier之前，你還需要在終端中安裝它，可以使用npm或yarn來安裝。命令如下：

npm install --save-dev prettier
yarn add --dev prettier

安裝完成後，在文件->首選項->設置中進行如下配置：

{
  "editor.formatOnSave": true,
  "[javascript]": {
      "editor.formatOnSave": false
  },
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "files.eol": "\n",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true
}

其中，“prettier.singleQuote”代表是否使用單引號，“prettier.semi”代表是否使用分號，“files. eol”代表使用哪種行尾格式，這些都是可以自己根據情況進行調整的。

三、使用ESLint

ESLint是一款非常出色的代碼檢查工具，可以保證你的代碼質量和規範性。在使用ESLint之前，你還需要在終端中安裝它，可以使用npm或yarn來安裝。命令如下：

npm install eslint --save-dev
yarn add eslint --dev

安裝完成後，你需要創建一個 .eslintrc.json 或 eslintrc.js 文件，根據項目需求進行配置。配置後，你可以將其與Prettier一起使用，來實現更完美的代碼格式化效果。

使用ESLint能夠幫助我們識別代碼中的問題並進行修復，而使用Prettier則能解放我們的雙手，讓我們不再需要一遍又一遍地手動調整代碼格式。

四、使用EditorConfig

不同編輯器的默認字符編碼、換行符類型等都不同，這會導致在不同編輯器中打開同一個文件時顯示不一致，甚至會影響到代碼的運行。而使用 EditorConfig 插件可以解決這個問題，它會創建一個 .editorconfig 文件，並根據其中的規則為文件做出相應的調整。

在使用EditorConfig之前，你需要先在終端中安裝它，可以使用npm或yarn來安裝。命令如下：

npm install --save-dev editorconfig
yarn add --dev editorconfig

安裝完成後，在根目錄下創建一個 .editorconfig 文件，然後在其中添加如下樣例內容：

root = true

[*]
charset = utf-8
indent_style = tab
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

這樣，你就可以為自己的代碼配置一些基本規則，保證代碼的整潔、一致性。

五、格式化JSON文件

在使用vscode編輯JSON文件時，可能會遇到格式化問題。你可能已經注意到，在JSON文件中縮進時，幾個空格和一個tab鍵的縮進是不能通用的。要解決這個問題，你需要在.vscode/settings.json文件中添加如下代碼：

{
  "[json]": {
      "editor.insertSpaces": true,
      "editor.tabSize": 2
  }
}

通過以上配置，你就可以愉快地進行JSON文件的編輯和格式化啦。

總結

vscode的格式化配置非常強大，通過合理的配置可以大大提高我們的代碼編寫效率。在開始使用前，你需要先進行基礎的格式化配置，然後按照需求選擇使用Prettier、ESLint和EditorConfig中的哪些工具。希望這篇文章能幫助你更好地了解與使用這些工具。