介紹

prettier?prettier.io

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

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

配合 VS Code 及 ESlint 使用

首先通過(guò)VS Code插件市場(chǎng)安裝 prettier 和 Vetur。如下圖：

然后重啟VS Code

Vetur設(shè)置(文件 -> 首選參數(shù) -> 設(shè)置 -> 擴(kuò)展 -> Vetur)

找到 format > defanult formatter: xxxx

將所有的 formatter 都改成 prettier ，這樣在格式化 *.vue文件 內(nèi)部的 html模板/js/ts/css/sass時(shí)候都會(huì)調(diào)用 prettier 進(jìn)行格式化。當(dāng)然還有其他一些格式化參數(shù)也可以嘗試去更改，例如：

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

Completion:Auto Import 自動(dòng)導(dǎo)入包

Validation:Script/Style/Template 檢查模板

等等。

prettier的配置項(xiàng)非常少，可以參加官方文檔，不過(guò)后面遇到一些問(wèn)題，后面再說(shuō)要怎么更改。

ESlint如果是通過(guò)Vue cli 創(chuàng)建的項(xiàng)目，只要在創(chuàng)建項(xiàng)目的時(shí)候代碼檢查選項(xiàng)時(shí)候勾選 ESlint + prettier 即可，基礎(chǔ)配置已經(jīng)都幫我們配置好了。

還可以在 VS Code 中設(shè)置保存時(shí)觸發(fā)格式化。

使用時(shí)候遇到的一些問(wèn)題

Q1：包裹文字時(shí)候結(jié)束標(biāo)簽的結(jié)尾尖括號(hào)掉到了下一行。如圖：

原因可能是Vue模板的格式邏輯不嚴(yán)謹(jǐn)問(wèn)題，不過(guò)只要通過(guò)Prettier設(shè)置即可解決:

Prettier:HTMLWhitespaceSensitivity ： 'ignore'

Q2: Prettier: 在編輯器設(shè)置的選項(xiàng)無(wú)效？

如果更改了 Prettier 的設(shè)置選項(xiàng)，但實(shí)際不起作用，可以嘗試在根目錄新建一個(gè) .prettierrc 文件，通過(guò)json來(lái)配置，這樣做的好處可以把配置上傳到代碼服務(wù)器，團(tuán)隊(duì)都使用相同格式的代碼。如：

{

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

"singleQuote": false, // 默認(rèn)單引號(hào) ，false 默認(rèn)使用雙引號(hào)

"bracketSpacing": true,

"jsxBracketSameLine": true,

"htmlWhitespaceSensitivity": "ignore" // 問(wèn)題1中的設(shè)置

}

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

首先檢查ESlint 配置是否使用了prettier規(guī)則，如果確定使用了，則是一些自定義規(guī)則在ESlint 和 Prettier插件中的配置不一致導(dǎo)致的。檢查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",

// 如果插件配置中修改了相關(guān)選項(xiàng)，// 則必須在此添加相對(duì)應(yīng)的自定義規(guī)則否則就會(huì)出現(xiàn)編輯器格式化后ESlint檢查無(wú)法通過(guò)的情況。 {

printWidth: 200,

singleQuote: false,

bracketSpacing: true,

jsxBracketSameLine: true,

htmlWhitespaceSensitivity: "ignore"

}

]

},

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

};

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。