2020最新版vscode格式化代碼——wsdchong

vscode格式化配置研究初稿

文章目錄

• ​​vscode格式化配置研究初稿​​

• ​​前言​​
• ​​理論​​

• ​​參考文章：​​
• ​​代碼格式化目的：​​
• ​​代碼格式化的注意事項：​​

• ​​插件作用​​
• ​​符合代碼檢驗​​
• ​​插件更新​​

• ​​代碼格式化插件的官方文檔：​​

• ​​我的settings.json檔案​​
• ​​總結​​

前言

之前用vscode進行格式化的時候都是在百度和谷歌上搜“vscode格式化代碼”然後直接copy别人。細節的配置一直沒去看過。

但是最近一段時間開發項目的時候發現和同組的送出代碼的時候格式總是不統一。于是這兩天專門看了看插件的官方文檔，研究研究。

今天初步有一點研究結果了。會配置一點點了。寫此部落格與大家共同參考。不足的地方歡迎大家補充，錯誤的地方歡迎大家糾錯。

文章内容包括兩個部分：一是理論，二是我的settings.json的配置。

理論

參考文章：

​​幹貨！15種vscode插件，提高開發效率​​

​​vetur自動格式化官方文檔翻譯——wsdchong​​

前端 | VS Code 配置 Vue 開發環境 - Vetur+ESLint+Prettier（2020）

代碼格式化目的：

代碼格式化的目的一是為了提高代碼可讀性，友善自己編碼，友善團隊開發；二是友善找出和修正因為格式導緻的錯誤。

在團隊開發。因為每個人的編碼習慣不同，如

• 縮進是2還是4。
• 代碼結尾是否加分号，用單引号還是用雙引号。
• 函數和後面的括号之間是否加個空格。
• 等等

統一代碼格式，讓每個人開發更順利。

為了完成第一個目的，格式化插件有vetur、prettier等針對檔案進行格式化的插件；

為了完成第二個目的，格式化插件有ESlint等對檔案進行代碼檢驗的插件。

代碼格式化的注意事項：

插件作用

首先明白格式化插件分别側重格式化哪些檔案，因為不同的檔案有不同的格式規範。

prettyhtml格式化HTML；
prettier格式化css/less/scss/postcss/ts；
stylus-supremacy格式化stylus；
vscode自帶格式化插件格式化js；
vetur格式化.vue檔案；讓不同塊使用不同的格式化方案
ESlint：新版的ESlint支援了對.vue檔案的校驗。      

符合代碼檢驗

然後注意讓格式化的代碼符号ESlint代碼檢驗。

格式化代碼最重要的是兩點，一點是用格式化插件格式化對應的檔案；另一點是讓格式化後的代碼能通過代碼檢驗工具。

舉個例子。

Prettier插件不支援在函數名後面加上括号。這點和ESlint沖突了。是以js的格式化不能使用prettier插件格式化，而是使用vscode自帶的js格式化功能來格式化。否則ESlint就是報錯，簡直煩死強迫症。

插件更新

最後要注意插件的是插件不斷更新的，是以網上直接copy的格式化代碼會各種不相容。

如vscode 的 ESLint 插件在某個版本已經移除了 ​

​"eslint.validate"​

​ 這個配置選項，而網上很多教程都是使用的這個。

在新版的 ESLint 中已經支援了對 ​

​*.vue​

​ 檔案的校驗，是以無需再進行這項配置了，隻需要添加一個儲存時自動修複 ESLint 錯誤的功能就行了。

代碼格式化插件的官方文檔：

語言介紹

pug：​​官方文檔​​ 。pug是一款專門為node.js平台開發的HTML子產品引擎。

less：​​官方文檔​​。less是一門CSS預處理語言。

scss：​​官方文檔​​。scss（sass）是世界上最成熟、穩定強大的專業級CSS預處理語言。

postcss：​​官方文檔​​。postcss是使用js插件來轉換CSS的工具。

stylus：​​官方文檔​​。stylus是node.js平台上的CSS預處理架構。

插件介紹

vetur：​​官方文檔​​​。代碼高亮、emmet文法支援、文法錯誤校驗檢查、代碼提醒、格式化vue。

vetur內建了prettier，讓.vue檔案中不同的塊使用不同的格式化方案，template标簽調用 html 格式化工具，script标簽調用 JavaScript 格式化工具，style标簽使用style格式化工具。

ESlint：​​官方文檔​​。代碼檢驗。

prettyhtml：​​官方文檔​​。為vue或純HTML模闆等提供通用格式化的工具。

pretties：​​官方文檔​​。代碼格式化工具，能夠解析代碼，使用使用者設定的規則格式化規範的代碼。

stylus-supremacy：​​官方文檔​​。用于格式化stylus檔案的node.js子產品。

我的settings.json檔案

{
  /*格式化檔案對應插件：
主要是兩步，一步是用格式化插件格式化對應的檔案；
另一步讓格式化後的代碼能通過代碼檢驗工具。
prettyhtml格式化HTML；prettier格式化css/less/scss/postcss/ts；
stylus-supremacy格式化stylus；
vscode自帶格式化插件格式化js；
vetur格式化.vue檔案；
ESlint進行代碼檢驗。
*/

  /*格式化思路和注意事項。
注意格式化的代碼能符合ESlint代碼檢驗。
1.用vetur設定預設格式化工具。格式化.vue檔案
2.用ESlint設定儲存時修複ESlint錯誤的功能。
3.用prettier格式化css；去除文法結尾的分号，使用單引号替換雙引号。
4.儲存時自動格式化。
*/

  // 預設使用prettier格式化支援的檔案
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  // "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "open-in-browser.default": "Chrome",

  // 将vetur的js格式化工具指定為vscode自帶的
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 移除js語句的分号
  "javascript.format.semicolons": "remove",
  // 在函數名後面加上括号，類似這種形式 foo () {}
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

  // eslint配置項，儲存時自動修複錯誤。
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },

  // 指定 *.vue 檔案的格式化工具為vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // 指定 *.js 檔案的格式化工具為vscode自帶
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },

  "vetur.format.defaultFormatterOptions": {
    "JS-beautify-HTML": {
      //  JS-beautify-HTML的設定在這裡
      "wrap_attributes": "force-aligned"
    },
    " prettyhtml": {
      "printWidth'": 100, //  每一行不超過100個字元
      "singleQuote": false, //  不用單引号
      "wrapAttributes": false,
      "sortAttributes": true
    },
    "prettier": {
      //  去掉代碼結尾的分号
      "semi": false, //不加分号
      "singleQuote": true, //用單引号
      // #讓prettier使用eslint的代碼格式進行校驗
      "eslintIntegration": true,
      "arrowParens": "always"
    }
  },

  // vscode預設啟用了根據檔案類型自動設定tabsize的選項
  "editor.detectIndentation": false,
  // 重新設定tabsize
  "editor.tabSize": 2,

  // 儲存時自動格式化代碼
  "editor.formatOnSave": true,

  //可選項。stylus的格式化配置以及sass格式化配置。
  // 格式化stylus, 需安裝Manta's Stylus Supremacy插件
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之後是否換行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  //  啟用調試模式。
  "sass.format.debug": false,
  //  删除空格
  "sass.format.deleteEmptyRows": true,
  //  删除最後一個空格。
  "sass.format.deleteWhitespace": true,
  //  将 scss / css  轉換為 sass。
  "sass.format.convert": true,
  //  如果 屬性:值 為true,則始終設定為1.
  "sass.format.setPropertySpace": true

  //   最簡單格式化方法，防止設定過多，導緻ESlint報錯。
  //     "vetur.format.defaultFormatter.js": "prettier-eslint",
  //     "vetur.format.defaultFormatterOptions": {
  //         "prettier": {
  //             "semi": false, //  不要分号
  //             "singleQuote": true //  要單引号
  //         }
  //     },
  //     // #每次儲存的時候自動格式化
  //     "editor.formatOnSave": true,
  //     "window.zoomLevel": 0,//設定vscode的字型大小和界面縮放。

  /*格式化插件：
//vetur：代碼高亮、emmet文法支援、文法錯誤校驗檢查、代碼提醒、格式化vue。
vetur內建了prettier，讓.vue檔案中不同的塊使用不同的格式化方案，
<template> 調用 html 格式化工具，
<script> 調用 JavaScript 格式化工具，
<style> 使用style格式化工具。

//ESlint：新版的ESlint支援了對.vue檔案的校驗。

//prettyhtml：為純HTML模闆等提供通用格式化的工具。
//prettier：格式化工具，用于css/less/scss/postcss/ts
//stylus-supremacy：用于格式化stylus檔案的node.js子產品。
//js的格式化工具用vscode自帶的。
Prettier不支援在函數名後面加上括号。這點和ESlint沖突了。

//EditorConfig：主要是用于讓 vscode 支援.editorconfig 檔案。
.editorconfig 檔案中的設定用于在基本代碼庫中維持一緻的編碼風格和設定，
例如縮進樣式、頁籤寬度、行尾字元以及編碼等。
EditorConfig 是讓代碼建立前保持規範，
Prettier 是讓代碼儲存後保持規範
*/
}      

總結