介紹

prettier?prettier.io

prettier是一個專業代碼格式化工具，支持JS、TS、sass、less、HTML、java、yaml、md、swift等等，主流的語言大多都支持。提供了VS、VSC 、Vim 、Atom、sublime 、WebStorm 等 IDE/編輯器插件，可以很方面安裝及使用。下面介紹下 vscode 下的 配合eslint檢查 vue代碼的相關配置介紹和一些問題。

Vetur是一個 Vue文件(.vue)的VS Code 插件，其他編輯器應該有另外的第三方插件。

配合 VS Code 及 ESlint 使用

首先通過VS Code插件市場安裝 prettier 和 Vetur。如下圖：

然后重啟VS Code

Vetur設置(文件 -> 首選參數 -> 設置 -> 擴展 -> Vetur)

找到 format > defanult formatter: xxxx

將所有的 formatter 都改成 prettier ，這樣在格式化 *.vue文件 內部的 html模板/js/ts/css/sass時候都會調用 prettier 進行格式化。當然還有其他一些格式化參數也可以嘗試去更改，例如：

Completion:Tag Casing 表示Vue標簽是連接線式'my-button'的 還是 component變量的駝峰式 'MyButton' 的。

Completion:Auto Import 自動導入包

Validation:Script/Style/Template 檢查模板

等等。

prettier的配置項非常少，可以參加官方文檔，不過后面遇到一些問題，后面再說要怎么更改。

ESlint如果是通過Vue cli 創建的項目，只要在創建項目的時候代碼檢查選項時候勾選 ESlint + prettier 即可，基礎配置已經都幫我們配置好了。

還可以在 VS Code 中設置保存時觸發格式化。

使用時候遇到的一些問題

Q1：包裹文字時候結束標簽的結尾尖括號掉到了下一行。如圖：

原因可能是Vue模板的格式邏輯不嚴謹問題，不過只要通過Prettier設置即可解決:

Prettier:HTMLWhitespaceSensitivity ： 'ignore'

Q2: Prettier: 在編輯器設置的選項無效？

如果更改了 Prettier 的設置選項，但實際不起作用，可以嘗試在根目錄新建一個 .prettierrc 文件，通過json來配置，這樣做的好處可以把配置上傳到代碼服務器，團隊都使用相同格式的代碼。如：

{

"printWidth": 200, // 最大打印寬度，超出將換行

"singleQuote": false, // 默認單引號 ，false 默認使用雙引號

"bracketSpacing": true,

"jsxBracketSameLine": true,

"htmlWhitespaceSensitivity": "ignore" // 問題1中的設置

}

Q3：Prettier 格式化后 ESlint 檢查警報，并更改了我的代碼格式.

首先檢查ESlint 配置是否使用了prettier規則，如果確定使用了，則是一些自定義規則在ESlint 和 Prettier插件中的配置不一致導致的。檢查eslintrc.js

module.exports = {

root: true,

env: { node: true },

extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],

rules: {

"no-console": process.env.NODE_ENV === "production" ? "error" : "off",

"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",

"prettier/prettier": [

"error",

// 如果插件配置中修改了相關選項，// 則必須在此添加相對應的自定義規則否則就會出現編輯器格式化后ESlint檢查無法通過的情況。 {

printWidth: 200,

singleQuote: false,

bracketSpacing: true,

jsxBracketSameLine: true,

htmlWhitespaceSensitivity: "ignore"

}

]

},

parserOptions: { parser: "@typescript-eslint/parser" }

};

總結

以上是生活随笔為你收集整理的eslint 无法格式化ts_VS Code Prettier + ESlint 格式化Vue代码及遇到问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。