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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
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 CKEditor 上传图片实现代码
2009/11/06 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
Python标准库inspect的具体使用方法
2017/12/06 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python使用folium库绘制地图点击框
2018/09/21 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
校园活动策划方案
2014/06/13 职场文书
六五普法宣传标语
2014/10/06 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
Redis入门教程详解
2021/08/30 Redis
AJAX实现省市县三级联动效果
2021/10/16 Javascript
关于JavaScript轮播图的实现
2021/11/20 Javascript
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android