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

Vue-cli Eslint在vscode里代碼自動格式化的方法

 更新時間：2018年02月23日 14:21:50   作者：HuaRongSAO  
本篇文章主要介紹了Vue-cli Eslint在vscode里代碼自動格式化的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

編輯器另外一個很重要的功能就是代碼格式化了，VS Code默認提供常見文件的格式化，如.js,.html等。

添加對.vue文件的格式化支持

這里我們添加對 .vue 文件的格式化支持。

1. 安裝 Vetur 插件
2. 在 VS Code 的設置中添加如下規(guī)則：

{
   "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 代碼檢查規(guī)范嚴格，一不小心就無法運行，使用eslint的autoFixOnSave可以在保存代碼的時候自動格式化代碼
  2. VSCode拓展插件推薦（HTML、Node、Vue、React開發(fā)均適用）

建議閱讀：

  1. vscode插件推薦
  2. JavaScript Standard Style 代碼風格規(guī)范

正文 eslint 自動格式化

配置環(huán)境:

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

創(chuàng)建項目跟路徑下的文件：.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"
],

參考文集：

https://stackoverflow.com/questions/45852531/eslint-code-format-in-vue
https://github.com/varHarrie/Dawn-Blossoms/issues/10

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • Vue中的計算屬性與監(jiān)聽屬性

    Vue中的計算屬性與監(jiān)聽屬性

    這篇文章介紹了Vue中的計算屬性與監(jiān)聽屬性，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-03-03
  • Vue El-descriptions 描述列表功能實現

    Vue El-descriptions 描述列表功能實現

    這篇文章主要介紹了Vue El-descriptions 描述列表功能實現,Descriptions 描述列表,列表形式展示多個字段,本文結合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2024-05-05
  • 從0搭建vue3組件庫Input組件

    從0搭建vue3組件庫Input組件

    這篇文章主要介紹了從0搭建vue3組件庫Input組件,每個功能的實現代碼都做了精簡,方便大家快速定位到核心邏輯,接下來就開始對這些功能進行實例代碼講解，需要的朋友可以參考下
    2022-11-11
  • vue模仿網易云音樂的單頁面應用

    vue模仿網易云音樂的單頁面應用

    這篇文章主要介紹了vue仿網易云音樂的單頁面應用實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • el-table?樹形數據?tree-props?多層級使用避坑

    el-table?樹形數據?tree-props?多層級使用避坑

    本文主要介紹了el-table?樹形數據?tree-props?多層級使用避坑,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-08-08
  • 關于vue中輸入框的使用場景總結

    關于vue中輸入框的使用場景總結

    這篇文章主要介紹了關于vue中輸入框的使用場景總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-05-05
  • Vue ECharts設置主題實現方法介紹

    Vue ECharts設置主題實現方法介紹

    這篇文章主要介紹了Vue ECharts設置主題，本文通過實例代碼圖文相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-12-12
  • Vue解析帶html標簽的字符串為dom的實例

    Vue解析帶html標簽的字符串為dom的實例

    今天小編就為大家分享一篇Vue解析帶html標簽的字符串為dom的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 使用Vue和Firebase實現后臺數據存儲的示例代碼

    使用Vue和Firebase實現后臺數據存儲的示例代碼

    在現代 web 應用開發(fā)中,前端和后端的無縫協(xié)作至關重要,借助 Firebase 等云計算解決方案,前端開發(fā)者可以輕松實現數據存儲與實時更新,本文將為大家詳細介紹如何利用 Vue 3 的 Composition API 和 Firebase 實現后臺數據存儲,需要的朋友可以參考下
    2024-10-10
  • 前端Vue全屏screenfull通用解決方案及原理詳細分析

    前端Vue全屏screenfull通用解決方案及原理詳細分析

    這篇文章主要給大家介紹了關于前端Vue全屏screenfull通用解決方案及原理的相關資料,使用screenfull這一第三方庫可以實現更穩(wěn)定的全屏功能,需要的朋友可以參考下
    2024-10-10

最新評論