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

vue+ESLint 配置保存 自動(dòng)格式化代碼

 更新時(shí)間:2020年03月17日 16:17:25   作者:k250119101  
這篇文章主要介紹了vue+ESLint 配置保存 自動(dòng)格式化代碼的相關(guān)知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1. 在.eslintrc.js 添加 vscode 終端啟動(dòng)服務(wù)

// 添加⾃定義規(guī)則
 'prettier/prettier': [
  // eslint校驗(yàn)不成功后,error或2則報(bào)錯(cuò),warn或1則警告,off或0則⽆提示
  'error',
  {
  singleQuote: true,
  semi: false, //結(jié)束是否加分號(hào)
  printWidth: 160//每行最長字符 
  }
 ]

在這里插入圖片描述

2.打開VS code 文件》首選項(xiàng)》設(shè)置》擴(kuò)展》ESLint》

在這里插入圖片描述 在這里插入圖片描述

// eslint格式化字符串
 "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
 },

如果編譯 發(fā)現(xiàn)以下錯(cuò)誤

warning delete ·· (prettier/prettier) “error Delete ⏎ prettier/prettier” in .vue files

解決

在vuejs項(xiàng)目中,運(yùn)行如下命令解決:

npm run lint – --fix

如果還是沒行,就要在 vue.config.js 添加

在這里插入圖片描述

// vue.config.js

// 舊 data: @import "~@/assets/scss/variables.scss"; // 新 prependData: @import ~@/assets/scss/variables.scss;

module.exports = {
 chainWebpack: config => {
 config.module
  .rule('eslint')
  .use('eslint-loader')
  .loader('eslint-loader')
  .tap(options => {
  options.fix = true
  return options
  })
 }
}
 ERROR Failed to compile with 1 errors                                 1:06:43
 error in ./src/App.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'prependdata'. These properties are valid:
 object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
 at validate (E:\VUE\ElementUI\myProject\vue-manage\node_modules\schema-utils\dist\validate.js:85:11)
 at Object.loader (E:\VUE\ElementUI\myProject\vue-manage\node_modules\sass-loader\dist\index.js:36:28)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss& 4:14-416 14:3-18:5 15:22-424
 @ ./src/App.vue?vue&type=style&index=0&lang=scss&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.3.30:3333/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

css laoder沒安裝安裝

npm install sass-loader --save-dev
npm install node-sass --save-dev
npm install css-loader style-loader --save-dev

總結(jié)

到此這篇關(guān)于vue+ESLint 配置保存 自動(dòng)格式化代碼的文章就介紹到這了,更多相關(guān)vue 配置保存 自動(dòng)格式化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 解決antd datepicker 獲取時(shí)間默認(rèn)少8個(gè)小時(shí)的問題

    解決antd datepicker 獲取時(shí)間默認(rèn)少8個(gè)小時(shí)的問題

    這篇文章主要介紹了解決antd datepicker 獲取時(shí)間默認(rèn)少8個(gè)小時(shí)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • 解決Can''t find variable: SockJS vue項(xiàng)目的問題

    解決Can''t find variable: SockJS vue項(xiàng)目的問題

    這篇文章主要介紹了解決Can't find variable: SockJS vue項(xiàng)目的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vue語法之render函數(shù)和jsx的基本使用

    vue語法之render函數(shù)和jsx的基本使用

    這篇文章主要介紹了vue語法之render函數(shù)和jsx的基本使用,在Vue中是支持jsx的,凡是我們是比較少在Vue中使用jsx的,jsx在react中使用的更加廣泛,因此在這里我簡單介紹一下jsx的基本使用,需要的朋友可以參考下
    2022-08-08
  • Vue+Electron打包桌面應(yīng)用(超詳細(xì)完整教程)

    Vue+Electron打包桌面應(yīng)用(超詳細(xì)完整教程)

    這篇文章主要介紹了Vue+Electron打包桌面應(yīng)用超詳細(xì)完整教程,在這大家要記住整個(gè)項(xiàng)目的json文件不能有注釋,及時(shí)沒報(bào)錯(cuò)也不行,否則運(yùn)行命令時(shí)還是有問題,具體細(xì)節(jié)問題參考下本文詳細(xì)講解
    2024-02-02
  • Vue-Router進(jìn)階之滾動(dòng)行為詳解

    Vue-Router進(jìn)階之滾動(dòng)行為詳解

    本篇文章主要介紹了Vue-Router進(jìn)階之滾動(dòng)行為詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09
  • Console高級(jí)用法總結(jié)

    Console高級(jí)用法總結(jié)

    Console 對(duì)象提供了瀏覽器控制臺(tái)調(diào)試的接口。在不同宿主環(huán)境上它的工作方式可能不一樣,但通常都會(huì)提供一套共性的功能,本文主要總結(jié)了Console的一些高級(jí)用法,感興趣的小伙伴可以參考一下
    2023-04-04
  • Vue3 框架Arco Design詳解

    Vue3 框架Arco Design詳解

    Arco Design 作為一款專為 Vue3 打造的企業(yè)級(jí) UI 組件庫,以其豐富的特性和卓越的性能,成為現(xiàn)代 Web 應(yīng)用開發(fā)者值得關(guān)注的選擇,這篇文章主要介紹了Vue3 框架Arco Design詳解,需要的朋友可以參考下
    2024-08-08
  • vue中的slot封裝組件彈窗

    vue中的slot封裝組件彈窗

    這篇文章主要介紹了vue中的slot封裝組件彈窗,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • 詳解Vue 全局變量,局部變量

    詳解Vue 全局變量,局部變量

    這篇文章主要介紹了Vue全局變量局部變量,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • Element-ui中元素滾動(dòng)時(shí)el-option超出元素區(qū)域的問題

    Element-ui中元素滾動(dòng)時(shí)el-option超出元素區(qū)域的問題

    這篇文章主要介紹了Element-ui中元素滾動(dòng)時(shí)el-option超出元素區(qū)域的問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-05-05

最新評(píng)論