VSCode-代碼格式化

1、vetur

1. 介紹

VSCode下強大的vue工具，支持vue語法的高亮（完整的支持高亮的語法以下圖）、代碼片斷、emmet（代碼速寫，VSCode自己自帶有tab鍵對html5的代碼進行快速開發，可是須要在settings.json文件中配置）、錯誤檢測、格式化等，具體的使用能夠參考官方文檔

vetur官方文檔

2. 使用

1) emmet在vue中使用的配置

"emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
}複製代碼

2）錯誤檢測

vetur默認使用eslint-plugin-vue@beta來檢測template，若是不想使用linting，能夠在settings.json中關閉

修改此值爲false便可

3）格式化

vetur推薦使用兩個空格來規定editor.tabSize和editor.insertSpace,

對於html、css、less、scss、js格式使用js-beautify來規範，這個不須要再進行安裝

js-beautify的github倉庫

3. 使用要點

須要在VSCode中安裝vetur插件，其餘都不須要安裝

要點一： 保存文件的時候自動格式化的方法：

settings.json文件中添加：

"editor.formatOnSave": true複製代碼

要點二： 保存文件的時候自動格式化的問題的解決：

可是這樣格式化有一個問題，就會全部的js語句會自動帶上分號和雙引號

緣由就是由於vetur默認使用的有不少是prettier插件，以下圖

prettier在VSCode中的插件- prettier 安裝成功後VSCode默認的格式化就會被prettier代替，默認的快捷鍵是Ctrl + shift + F 。詳細配置查看官方文檔（此處僅供學習，咱們的基礎配置中暫無需安裝）

prettier官方文檔

基本prettier配置文檔

prettier只關注格式化，它沒有檢查代碼語法的能力，因此常常會遇到搭配各類lint檢查的時候出現各類衝突。

下面是解決保存時自動格式化出現添加雙引號和分號的方法：

解決方式1:

在settings.json文件中添加：

把

"vetur.format.defaultFormatter.js": "prettier"複製代碼

改成 

"vetur.format.defaultFormatter.js": "vscode-typescript"複製代碼

這種解決方式就用不了prettier這個插件了

解決方式2：（如今使用這種解決方式）

-- 在settings.json文件中新增

// 去除自動格式化時js加的分號與雙引號
"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "semi": false,
        "singleQuote": true
    }
}複製代碼

解決方式3：

VSCode局部安裝prettier插件

npm install --save-dev --save-exact prettier複製代碼

--或者是全局安裝

npm install --global prettier複製代碼

若是安裝npm包 須要進行如下操做：

--1. 新建.prettierrc.json配置文件在項目根目錄下

-- 2 . prettierrc.json文件的配置以下

{
    "singleQuote": true,
    "semi": false
}複製代碼

要點三： template內的標籤格式化：

vetur默認不會對template內進行格式化，改進方法

在settings.json文件中添加：

// 對template代碼格式化
"vetur.format.defaultFormatter.html": "js-beautify-html"複製代碼

要點四： tab的空格數：

默認編輯器的tab空格是4個 改爲2個

在settings.json文件中添加：

"editor.tabSize": 2,複製代碼

2、其餘配置

推薦安裝的插件：

1. vscode-icons

是給VSCode下項目的文件加上圖標，以區別文件，在settings.json中增長：

// 文件圖標主題插件 安裝vscode-icons後的配置
"workbench.iconTheme": "vscode-icons",複製代碼

以下圖所示：

2. vscode-fileheader

是給文件開始添加註釋的插件。安裝完畢以後在settings.json中添加配置：

"fileheader.Author": "zhangsan",  
"fileheader.LastModifiedBy": "zhangsan",複製代碼

F1或者Alt+Cmd+P而後輸入fileheader回車便可添加

添加完以下

其餘插件推薦 segmentfault.com/a/119000001…

3、完整settings.json配置文檔

{   
    // 文件圖標主題插件 安裝vscode-icons後的配置
    "workbench.iconTheme": "vscode-icons",
    // 安裝vscode-fileheader 給文件開頭添加多行註釋的配置 (F1或Alt+CMD+P後輸入fileheader回車便可添加)
    "fileheader.Author": "zhangsan",
    "fileheader.LastModifiedBy": "zhangsan",
    // 工做區主題色，自行安裝本身喜歡的
    "workbench.colorTheme": "One Dark Pro",
    // 控制是否在打開文件時，基於文件內容自動檢測 `editor.tabSize#` 和 `#editor.insertSpaces`
    "editor.detectIndentation": false,
    // 默認tab2個空格"editor.tabSize": 2,
    // 使用tab鍵進行HTML5快速開發
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    // 保存時代碼自動格式化
    "editor.formatOnSave": true,
    // 去除自動格式化時js加的分號與雙引號
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": false,
            "singleQuote": true
        }
    },
    // 對template代碼格式化
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // 在輸入時顯示含有參數文檔和類型信息的小面板。
    "editor.parameterHints.enabled": true,
    // 配置emmet是否啓用tab展開縮寫
    "emmet.triggerExpansionOnTab": true,
    // 控制是否在鍵入時自動顯示建議。
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    }
}複製代碼