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 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
如何编写高质量JS代码
Dec 28 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
vue el-tree 默认展开第一个节点的实现代码
May 15 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(视频)Http下载
2006/12/12 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
django实现分页的方法
2015/05/26 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
英语故事演讲稿
2014/04/29 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
节能减耗标语
2014/06/21 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
Python面向对象编程之类的概念
2021/11/01 Python