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

vue-cli4項目開啟eslint保存時自動格式問題

 更新時間:2020年07月13日 11:58:34   作者:c347087870  
這篇文章主要介紹了vue-cli4項目開啟eslint保存時自動格式的問題小結,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

最近新建一個vue-cli4的項目,初始化的時候沒開啟eslint,后面想開啟的時候不好配置,這里就做個開啟eslint和保存時自動修復格式的總結

vscode首先安裝eslint插件

在這里插入圖片描述

配置vscode的自動保存eslint格式

Ctrl+shift+p

在這里插入圖片描述

把下面代碼復制到里面

"editor.tabSize": 2,
 "eslint.alwaysShowStatus": true,
 "eslint.autoFixOnSave": true,
 "eslint.packageManager": "yarn",
 "eslint.validate": [
 "javascript", // 用eslint的規(guī)則檢測js文件
 {
  "language": "js",
  "autoFix": true
 },
 {
  "language": "vue",
  "autoFix": true
 },
 ],
 "eslint.options": {
 "extensions": [
  ".js",
  ".vue"
 ]
},
 "editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
 },
 "eslint.run": "onSave",
 "files.autoSaveDelay": 3000,
 "eslint.codeAction.disableRuleComment": {
 
 },
 "files.autoSave": "off",

項目中安裝eslint

package.json文件中的devDependencies里面添加

"@vue/cli-plugin-eslint": "~4.4.0",
	"babel-eslint": "^10.1.0",
 "eslint": "^6.7.2",
 "eslint-plugin-vue": "^6.2.2",

vue.config.js文件里面lintOnSave改成"warning"

根目錄添加eslint配置文件.eslintrc.js

在這里插入圖片描述

內容根據需要修改

module.exports = {
 "root": true,
 "env": {
  "node": true
 },
 "extends": [
  "plugin:vue/recommended",
  "eslint:recommended"
 ],
 "rules": {
 	 "indent": ["error", 2],
  "dot-location": [
   2,
   "property"
  ],
  "comma-spacing": [1],
  "space-before-blocks": [
   2,
   "always"
  ], // 強制在塊之前使用一致的空格
  "space-unary-ops": [
   2,
   {
    "words": true,
    "nonwords": false
   }
  ], // 強制在一元操作符前后使用一致的空格
  "array-bracket-spacing": [
   2,
   "never"
  ], // 強制數(shù)組方括號中使用一致的空格
  "quotes": [
   0,
   "double"
  ], // 強制使用一致的反勾號、雙引號或單引號
  "arrow-spacing": [
   2,
   {
    "before": true,
    "after": true
   }
  ],
  "vue/max-attributes-per-line":0,
  "no-var": 2, //禁用var,用let和const代替
  "no-mixed-spaces-and-tabs": 2, // 禁止空格和 tab 的混合縮進
  "no-trailing-spaces": 1, // 禁用行尾空格
  "no-unexpected-multiline": 2, // 禁止出現(xiàn)令人困惑的多行表達式
  "no-unused-vars": [
   2,
   {
    "vars": "all",
    "args": "none"
   }
  ], // 禁止出現(xiàn)未使用過的變量
  "vue/html-indent": [
   0,
   "tab"
  ],
  "vue/html-self-closing": [0],
  "vue/multiline-html-element-content-newline": [0],
  "vue/singleline-html-element-content-newline":[0],
  "vue/html-closing-bracket-newline":[0],
  "vue/no-v-html": [0]
 },
 "parserOptions": {
  "parser": "babel-eslint"
 }
}

到此這篇關于vue-cli4項目開啟eslint保存時自動格式問題的文章就介紹到這了,更多相關vue-cli4項目開啟eslint內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue實現(xiàn)簡易計算器的4種方法舉例

    vue實現(xiàn)簡易計算器的4種方法舉例

    這篇文章主要給大家介紹了關于vue實現(xiàn)簡易計算器的4種方法,文中通過代碼介紹的非常詳細,對大家學習或者使用vue覺有一定的參考借鑒價值,需要的朋友可以參考下
    2023-09-09
  • vue項目中將element-ui table表格寫成組件的實現(xiàn)代碼

    vue項目中將element-ui table表格寫成組件的實現(xiàn)代碼

    這篇文章主要介紹了vue項目中將element-ui table表格寫成組件的方法,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2019-06-06
  • Vue3組件掛載之創(chuàng)建組件實例詳解

    Vue3組件掛載之創(chuàng)建組件實例詳解

    這篇文章主要為大家介紹了Vue3組件掛載之創(chuàng)建組件實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • echarts設置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)

    echarts設置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)

    這篇文章主要為大家介紹了echarts設置tootip輪播切換展示效果,vue3搭配vue-echarts粘貼即用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步
    2023-10-10
  • TypeScript在vue中的使用解讀

    TypeScript在vue中的使用解讀

    這篇文章主要介紹了TypeScript在vue中的使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • 關于this.$refs獲取不到dom的可能原因及解決方法

    關于this.$refs獲取不到dom的可能原因及解決方法

    這篇文章主要介紹了關于this.$refs獲取不到dom的可能原因及解決方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • Vue3 SFC 和 TSX 方式自定義組件實現(xiàn) v-model的詳細過程

    Vue3 SFC 和 TSX 方式自定義組件實現(xiàn) v-model的詳細

    v-model 是 vue3 中的一個內置指令,很多表單元素都可以使用這個屬性,如 input、checkbox 等,咱可以在自定義組件中實現(xiàn) v-model,這篇文章主要介紹了Vue3 SFC 和 TSX 方式自定義組件實現(xiàn) v-model,需要的朋友可以參考下
    2022-10-10
  • vue視頻時間進度條組件使用方法詳解

    vue視頻時間進度條組件使用方法詳解

    這篇文章主要為大家詳細介紹了vue視頻時間進度條組件的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue 虛擬DOM快速入門

    vue 虛擬DOM快速入門

    這篇文章主要介紹了vue 虛擬DOM的相關資料,幫助大家更好的理解和學習使用vue框架,感興趣的朋友可以了解下
    2021-04-04
  • 詳解vue的數(shù)據binding綁定原理

    詳解vue的數(shù)據binding綁定原理

    這篇文章主要介紹了詳解vue的數(shù)據binding原理介紹,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04

最新評論