vue+ESLint 配置保存 自动格式化代码

 更新时间:2020年03月17日 16:17:25   作者:k250119101  
这篇文章主要介绍了vue+ESLint 配置保存 自动格式化代码的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

1. 在.eslintrc.js 添加 vscode 终端启动服务

// 添加⾃定义规则
 'prettier/prettier': [
  // eslint校验不成功后,error或2则报错,warn或1则警告,off或0则⽆提示
  'error',
  {
  singleQuote: true,
  semi: false, //结束是否加分号
  printWidth: 160//每行最长字符 
  }
 ]

在这里插入图片描述

2.打开VS code 文件》首选项》设置》扩展》ESLint》

在这里插入图片描述 在这里插入图片描述

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

如果编译 发现以下错误

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

解决

在vuejs项目中,运行如下命令解决:

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

总结

到此这篇关于vue+ESLint 配置保存 自动格式化代码的文章就介绍到这了,更多相关vue 配置保存 自动格式化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue (Vuex)中 store 基本用法

    Vue (Vuex)中 store 基本用法

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,这篇文章主要介绍了Vue 中 store 基本用法,需要的朋友可以参考下
    2023-01-01
  • 使用vue/cli出现defineConfig is not function错误解决办法

    使用vue/cli出现defineConfig is not function错误解决办法

    这篇文章主要给大家介绍了关于使用vue/cli出现defineConfig is not function错误的解决办法,当我们在做打包配置的时候,出现了这个错误,需要的朋友可以参考下
    2023-11-11
  • vue3实现点击空白区域隐藏div

    vue3实现点击空白区域隐藏div

    这篇文章主要介绍了vue3实现点击空白区域隐藏div方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • Vue+Mockjs模拟curd接口请求的示例详解

    Vue+Mockjs模拟curd接口请求的示例详解

    这篇文章主要介绍了Vue+Mockjs模拟curd接口请求的示例详解,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网

    Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网

    这篇文章主要介绍了Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue动态组件实现异常处理方法

    Vue动态组件实现异常处理方法

    Vue3动态组件怎么进行异常处理?下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-02-02
  • vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

    vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

    今天小编就为大家分享一篇vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue中的插槽详解

    vue中的插槽详解

    这篇文章主要介绍了Vue中的插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-10-10
  • webpack 3 + Vue2 使用dotenv配置多环境的步骤

    webpack 3 + Vue2 使用dotenv配置多环境的步骤

    这篇文章主要介绍了webpack 3 + Vue2 使用dotenv配置多环境,env文件在配置文件都可以用, vue页面用的时候需要在 webpack.base.conf.js 重新配置,需要的朋友可以参考下
    2023-11-11
  • 基于Vue3实现无限滚动组件的示例代码

    基于Vue3实现无限滚动组件的示例代码

    如果你在社交媒体上停留的时间过长,那么,你所在的网站很可能正在使用无限滚动组件。这篇文章教你利用Vue3实现无限滚动组件,感兴趣的可以参考一下
    2022-09-09

最新评论