本文將為大家詳細(xì)介紹“vscode配置vue+vetur+eslint+prettier自動格式化功能的方法”,內(nèi)容步驟清晰詳細(xì),細(xì)節(jié)處理妥當(dāng),而小編每天都會更新不同的知識點(diǎn),希望這篇“vscode配置vue+vetur+eslint+prettier自動格式化功能的方法”能夠給你意想不到的收獲,請大家跟著小編的思路慢慢深入,具體內(nèi)容如下,一起去收獲新知識吧。
成都創(chuàng)新互聯(lián)公司是專業(yè)的隆德網(wǎng)站建設(shè)公司,隆德接單;提供成都網(wǎng)站設(shè)計、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行隆德網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
Visual Studio Code 是一個運(yùn)行于 OS X,Windows和 Linux 之上的,針對于編寫現(xiàn)代 web 和云應(yīng)用的跨平臺編輯器,它為開發(fā)者們提供了對多種編程語言的內(nèi)置支持,并且正如 Microsoft 在Build 大會的 keynote 中所指出的,這款編輯器也會為這些語言都提供了豐富的代碼補(bǔ)全和導(dǎo)航功能。
vscode Vetur插件
Vetur插件用于識別vue文件,原本vetur自帶格式化功能,但是和eslint會有沖突,所以沒用上。
vscode ESlint插件
Eslint插件用于根據(jù)工程目錄的.eslintrc.js配置文件在編輯器中顯示一些錯誤提示,后面的自定格式化根據(jù)這里的錯誤提示進(jìn)行格式化操作。
基于vue-cli創(chuàng)建的項(xiàng)目 以下相關(guān)步驟需要注意:
創(chuàng)建的時候把Linter/Formatter選上(默認(rèn)已選上)
下一步選擇Eslint+Prettier
下一步選擇Lint on save (在編輯保存之后根據(jù)對代碼格式進(jìn)行檢測)
下一步選擇In dedicated config files(將eslint和prettier的配置抽離到獨(dú)立的文件中)
創(chuàng)建完在package.json里面可看到和eslint與prettier相關(guān)的依賴
在.eslintrc.js可以看到總體的eslint規(guī)則合并了vue、eslint和prettier的一些插件庫進(jìn)行語法分析(eslint針對js,vue、prettier針對js、html和css,這里eslint和prettier的一些沖突已經(jīng)處理)
到這一步,編譯的時候就能看到eslint報錯和警告了,但是還不能實(shí)現(xiàn)保存自動格式化功能。
在文件根目錄下創(chuàng)建.prettierrc對prettier格式化進(jìn)行自定義規(guī)則設(shè)置,以下為我添加的規(guī)則
{ /* 單引號包含字符串 */ "singleQuote": true, /* 不添加末尾分號 */ "semi": false, /* 在對象屬性添加空格 */ "bracketSpacing": true, /* 優(yōu)化html閉合標(biāo)簽不換行的問題 */ "htmlWhitespaceSensitivity": "ignore" }
在用戶設(shè)置添加自定義設(shè)置
mac中的位置
根據(jù)需要選擇全局(User)或者工程(Workspace)的配置,點(diǎn)擊右上角的編輯按鈕,打開settings.json文件
添加以下配置,使編輯器在保存時自動eslint規(guī)則格式化
"editor.codeActionsOnSave": { "source.fixAll": true }, /* 關(guān)閉編輯器自帶保存格式化功能,此功能會用Vetur進(jìn)行格式化。*/ "editor.formatOnSave": false
這是我自己的自定義配置
非vue-cli創(chuàng)建的項(xiàng)目
單獨(dú)引入以下紅框中的幾個依賴
添加vscode Vetur和ESlint, .eslintrc.js、.prettierrc 和 settings.json的內(nèi)容和上面一樣,這樣就可以實(shí)現(xiàn)保存自動根據(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文件
如果你能讀到這里,小編希望你對“vscode配置vue+vetur+eslint+prettier自動格式化功能的方法”這一關(guān)鍵問題有了從實(shí)踐層面最深刻的體會,具體使用情況還需要大家自己動手實(shí)踐使用過才能領(lǐng)會,如果想閱讀更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁標(biāo)題:vscode配置vue+vetur+eslint+prettier自動格式化功能的方法
鏈接URL:http://muchs.cn/article20/piesco.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、品牌網(wǎng)站設(shè)計、標(biāo)簽優(yōu)化、小程序開發(fā)、外貿(mào)建站、網(wǎng)頁設(shè)計公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)