在Vue-cli中使用Eslint如何實現自動格式化

這篇文章主要介紹了Vue-cli Eslint在vscode裡程式碼自動格式化的方法，現在分享給大家，也給大家做個參考。

編輯器另外一個很重要的功能就是程式碼格式化了，VS Code預設提供常見檔案的格式化，如.js,.html等。

新增對.vue檔案的格式化支援

這裡我們新增對 .vue 檔案的格式化支援。

1. 安裝Vetur 外掛
2. 在VS Code 的設定中加入以下規則：

{
   "vetur.format.defaultFormatter": {
    "html": "prettier",
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "prettier",
    "ts": "prettier",
    "stylus": "stylus-supremacy"
  }
}

##這裡是設定Vetur 預設使用的格式化插件prettier。這樣對於.vue檔案中的 html 和 javascript 程式碼都有格式化支援了。

vue eslint 程式碼自動格式化

1. #vue-cli 程式碼風格為JavaScript Standard Style 程式碼檢查規格嚴格，一不小心就無法運作，使用eslint的autoFixOnSave可以在儲存程式碼的時候自動格式化程式碼

2. VSCode拓展外掛程式推薦（HTML、Node、Vue、React開發均適用）

   
   

建議閱讀：

##vscode外掛推薦
JavaScript Standard Style 程式碼風格規格

2. 
   

#文字eslint 自動格式化

設定環境:

npm i -g eslint-plugin-vue
#or
npm i -S eslint-plugin-vue

建立專案跟路徑下的檔案：.eslintrc | .eslint.js

//　添加插件
"plugins": [
  "vue"
]

在你的vscode設定檔裡加入：

# 1、在vscode加入eslint 外掛程式

2、在vscode加入vetur 外掛程式

3、修改你的setting.json


##

// 添加进你的vscode的 setting.json

"eslint.autoFixOnSave": true,
"eslint.validate": [
  "javascript",{
    "language": "vue",
    "autoFix": true
  },"html",
  "vue"
],

上面是我整理給大家的，希望未來對大家有幫助。

相關文章：

在vue-cli中使用webpack模板解決專案建立與打包路徑問題

在vue中bus全域事件中心（詳細教學）

#詳細解讀Angular系列中變化偵測問題

######### ##########

以上是在Vue-cli中使用Eslint如何實現自動格式化的詳細內容。更多資訊請關注PHP中文網其他相關文章！