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


Posted in Javascript onMarch 17, 2020

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

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

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

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

vue+ESLint 配置保存 自动格式化代码vue+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+ESLint 配置保存 自动格式化代码

// 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 配置保存 自动格式化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
javascript的理解及经典案例分析
May 20 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
基于Vue实现拖拽效果
Apr 27 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 #Javascript
JavaScript实现横版菜单栏
Mar 17 #Javascript
JavaScript实现留言板案例
Mar 17 #Javascript
es6函数之严格模式用法实例分析
Mar 17 #Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 #Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 #Javascript
JS前端模块化原理与实现方法详解
Mar 17 #Javascript
You might like
PHP flock 文件锁详细介绍
2012/12/29 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
浅谈React高阶组件
2018/03/28 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
python之wxPython应用实例
2014/09/28 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
python excel和yaml文件的读取封装
2021/01/12 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
介绍一下XMLHttpRequest对象
2012/02/12 面试题
幼儿园家长评语大全
2014/04/16 职场文书
安全协议书
2014/04/23 职场文书
五四青年节活动总结
2015/02/10 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
九年级化学教学反思
2016/02/22 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
MySQL详细讲解变量variables的用法
2022/06/21 MySQL