快捷導(dǎo)航

vscode 配置vue+vetur+eslint+prettier自動(dòng)格式化功能

更新時(shí)間：2020年03月23日 10:32:54 作者：nick_h

這篇文章主要介紹了vscode 配置vue+vetur+eslint+prettier自動(dòng)格式化功能，本文通過(guò)實(shí)例代碼圖文的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

該配置用于vue開(kāi)發(fā)，最終效果是保存時(shí)自動(dòng)根據(jù)eslint對(duì)js、html和css代碼進(jìn)行格式化。

vscode Vetur插件

Vetur插件用于識(shí)別vue文件，原本vetur自帶格式化功能，但是和eslint會(huì)有沖突，所以沒(méi)用上。

vscode ESlint插件

Eslint插件用于根據(jù)工程目錄的.eslintrc.js配置文件在編輯器中顯示一些錯(cuò)誤提示，后面的自定格式化根據(jù)這里的錯(cuò)誤提示進(jìn)行格式化操作。

基于vue-cli創(chuàng)建的項(xiàng)目以下相關(guān)步驟需要注意：

創(chuàng)建的時(shí)候把Linter/Formatter選上(默認(rèn)已選上)

下一步選擇Eslint+Prettier

下一步選擇Lint on save (在編輯保存之后根據(jù)對(duì)代碼格式進(jìn)行檢測(cè))

下一步選擇In dedicated config files(將eslint和prettier的配置抽離到獨(dú)立的文件中)

創(chuàng)建完在package.json里面可看到和eslint與prettier相關(guān)的依賴

在.eslintrc.js可以看到總體的eslint規(guī)則合并了vue、eslint和prettier的一些插件庫(kù)進(jìn)行語(yǔ)法分析(eslint針對(duì)js,vue、prettier針對(duì)js、html和css,這里eslint和prettier的一些沖突已經(jīng)處理)

到這一步，編譯的時(shí)候就能看到eslint報(bào)錯(cuò)和警告了，但是還不能實(shí)現(xiàn)保存自動(dòng)格式化功能。

在文件根目錄下創(chuàng)建.prettierrc對(duì)prettier格式化進(jìn)行自定義規(guī)則設(shè)置，以下為我添加的規(guī)則

{
 /* 單引號(hào)包含字符串 */
 "singleQuote": true,
 /* 不添加末尾分號(hào) */
 "semi": false,
 /* 在對(duì)象屬性添加空格 */
 "bracketSpacing": true,
 /* 優(yōu)化html閉合標(biāo)簽不換行的問(wèn)題 */
 "htmlWhitespaceSensitivity": "ignore"
}

在用戶設(shè)置添加自定義設(shè)置

mac中的位置

根據(jù)需要選擇全局(User)或者工程(Workspace)的配置，點(diǎn)擊右上角的編輯按鈕，打開(kāi)settings.json文件

添加以下配置,使編輯器在保存時(shí)自動(dòng)eslint規(guī)則格式化

"editor.codeActionsOnSave": {
 "source.fixAll": true
},
/* 關(guān)閉編輯器自帶保存格式化功能，此功能會(huì)用Vetur進(jìn)行格式化。*/
"editor.formatOnSave": false

這是我自己的自定義配置

非vue-cli創(chuàng)建的項(xiàng)目

單獨(dú)引入以下紅框中的幾個(gè)依賴

添加vscode Vetur和ESlint, .eslintrc.js、.prettierrc 和 settings.json的內(nèi)容和上面一樣，這樣就可以實(shí)現(xiàn)保存自動(dòng)根據(jù)eslint進(jìn)行格式化了。

總結(jié)

引入eslint、vue和prettier的一些相關(guān)的依賴

@vue/cli-plugin-eslint
@vue/eslint-config-prettier
babel-eslint
eslint
eslint-plugin-prettier
eslint-plugin-vue
prettier

安裝vscode Vetur和ESlint插件
配置.eslintrc.js文件
配置.prettierrc文件
配置.settings.json文件

到此這篇關(guān)于vscode 配置vue+vetur+eslint+prettier自動(dòng)格式化功能的文章就介紹到這了,更多相關(guān)vscode vue vetur eslint prettier內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: