欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

vscode Vetur插件

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

 

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ù)對代碼格式進(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)處理)

 

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

 

在文件根目錄下創(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文件

添加以下配置,使編輯器在保存時(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式

    vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式

    這篇文章主要介紹了vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue實(shí)現(xiàn)移動(dòng)端頁面切換效果【推薦】

    Vue實(shí)現(xiàn)移動(dòng)端頁面切換效果【推薦】

    這篇文章主要介紹了Vue實(shí)現(xiàn)移動(dòng)端頁面切換效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-11-11
  • 使用vue3+TS實(shí)現(xiàn)簡易組件庫的全過程

    使用vue3+TS實(shí)現(xiàn)簡易組件庫的全過程

    當(dāng)市面上主流的組件庫不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫,下面這篇文章主要給大家介紹了如何使用vue3+TS實(shí)現(xiàn)簡易組件庫的相關(guān)資料,需要的朋友可以參考下
    2022-03-03
  • 如何使用sm4js進(jìn)行加密和國密sm4總結(jié)

    如何使用sm4js進(jìn)行加密和國密sm4總結(jié)

    近期由于公司項(xiàng)目的需要開始研究國密SM4加密,下面這篇文章主要給大家介紹了關(guān)于如何使用sm4js進(jìn)行加密和國密sm4的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-04-04
  • Vue利用History記錄上一頁面的數(shù)據(jù)方法實(shí)例

    Vue利用History記錄上一頁面的數(shù)據(jù)方法實(shí)例

    這篇文章主要給大家介紹了關(guān)于Vue利用History記錄上一頁面的數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-11-11
  • vue3實(shí)現(xiàn)頁面截圖功能示例詳解

    vue3實(shí)現(xiàn)頁面截圖功能示例詳解

    在Vue3項(xiàng)目中實(shí)現(xiàn)頁面截圖的功能,可以通過使用js-web-screen-shot組件來實(shí)現(xiàn),本文以toolbox.js作為案例,詳細(xì)介紹了如何在Vue3框架下,利用js-web-screen-shot組件實(shí)現(xiàn)頁面截圖的具體步驟和方法,這一技術(shù)的應(yīng)用,不僅可以提高用戶體驗(yàn),還能在需要時(shí)方便地獲取頁面的即時(shí)信息
    2024-10-10
  • vue props對象validator自定義函數(shù)實(shí)例

    vue props對象validator自定義函數(shù)實(shí)例

    今天小編就為大家分享一篇vue props對象validator自定義函數(shù)實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 詳解如何添加babel?polyfill

    詳解如何添加babel?polyfill

    這篇文章主要介紹了詳解vue如何添加babel?polyfill實(shí)現(xiàn)方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • 解決vue3報(bào)錯(cuò):找不到模塊或其相應(yīng)的類型聲明

    解決vue3報(bào)錯(cuò):找不到模塊或其相應(yīng)的類型聲明

    這篇文章主要給大家介紹了關(guān)于如何解決vue3報(bào)錯(cuò):找不到模塊或其相應(yīng)的類型聲明的相關(guān)資料,這個(gè)錯(cuò)誤提示是指在代碼中引用了Vue模塊,但是系統(tǒng)找不到該模塊或者缺少相應(yīng)的類型聲明文件,需要的朋友可以參考下
    2023-07-07
  • Vue動(dòng)態(tài)控制input的disabled屬性的方法

    Vue動(dòng)態(tài)控制input的disabled屬性的方法

    這篇文章主要介紹了Vue動(dòng)態(tài)控制input的disabled屬性的方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-06-06

最新評論